Ⅰ 百度空間CSS詳細教程
我直接給你貼出來吧,畢竟點入了別人的地址不一定能找到你想要的,好就是好,不好就是不好,請看本人寫的教程 首先聲明本人不是CSS高手,所以有些錯誤是難免的,本攻略以本人現在使用的CSS代碼講解,全方面的涉及到背景圖片,播放器,模塊透明,設定頁面寬度等問題.大家需要明白的,要裝扮好自己的空間除了需要熟知網路空間的CSS外,還要有一定的美工基礎,畢竟圖片是漂亮的關鍵.還有,對於新手來講,最好先看一下網路官方的CSS幫助,不知道地址的請點此進入,這樣可以讓你了解CSS代碼所對應的模塊.我對自己的代碼作了詳細注釋,很多下問題可以在我的注釋里找到,如不懂的請留言給我. 一:背景圖片 一般人設計空間一般是把網路空間分成上下兩部分,上指的是空間名稱,空間簡介那部分,下指的是導航欄以下部分,就是文章內容以及其他小模塊.對於新手來講,這是最好的拆分方法.空間名稱這一部分一般是裝扮空間的前提,如果有精美的圖片,只要改下這里的背景就可以讓空間煥然一新.修改這里的背景很簡單,打開CSS編輯頁面,找到#header,在後面插入BACKGROUND: url(圖片地址) no-repeat 0px 0px 在這里講解下背景圖片的幾個屬性:repeat是指定圖片是否平鋪和以何種方式平鋪.有四個屬性: repeat : 默認值。背景圖像在縱向和橫向上平鋪 no-repeat : 背景圖像不平鋪 repeat-x : 背景圖像僅在橫向上平鋪 repeat-y : 背景圖像僅在縱向上平鋪 後面的兩個PX是指定圖片左邊距和上邊距,這是比較重要的,可以調整圖片到你喜歡的位置.這里注意下,在空間名稱這部分添加背景圖片的時候請同時調整這里的高度和TAB里的距頂部距離.高度代碼:height,把高度調整為你圖片的高度. 示例:現在我要在空間名稱部分放一張高度為160的圖片,我們就需要修改兩個地方: 1:#header{ HEIGHT: 160px BACKGROUND: url(圖片地址) no-repeat 8px 0px;} 2:#tab{top:160px;left:0px;} 對於上部分的背景圖片就講到這里.下部分和上部分的方法一樣,不過插入代碼的地方是.stage 找代碼可以按CTRL+F搜索. 我們還可以設定下總體背景,把背景圖片代碼插在BODY里就可以了.還有很重要的一點,網路的模塊都是有背景色的,這樣的話,我們就算放入背景圖片,基本上也被遮住了,這就需要用到背景透明代碼:background:transparent;在你想設置透明的模塊里放入此代碼就可以了. 具體代碼對應模塊請參考網路官方CSS幫助,上面已經有連接了. 二:播放器設置 不多說廢話,提供代碼一個: #phx{FILTER:Alpha(Opacity=66,FinishOpacity=26,Style=2,StartX=20,StartY=40,FinishX=0,FinishY=0)gray();WIDTH: 209px;HEIGHT:45px;margin-top:12px} 這個代碼可以任意插在CSS任何位置,只要知道width和height是分別改變播放器寬度和高度的就可以任意改變播放器大小了. 三:指定頁面寬度 有些人覺得網路空間的頁面看起來太寬,想設計的小一點,這其實不難.甚至簡單的只需要知道一個寬度代碼:width 當然,為了更方便的設置,我們最好再加入一些自己的代碼. #layout td.c2t3{padding-right:0px;padding-top:0px;width:250} #layout td.c2t1{padding-left:170px;padding- top:0px;width:600px;border-right:#930000 0px solid;} #layout td.c2t2{width:60px} 可以把這段代碼放在.stage後面C2T3是指定頁面右邊屬性,c2t1指定左邊屬性,c2t2是左和右的間距.(注意:此代碼只針對把空間分成兩列的) padding:檢索或設置對象四邊的內補丁,有上下左右 padding-right:在這里不講專業術語了,為了大家便於了解,可以當作是指定對象距離右邊的位置 padding-top:(同上,指定頂部) padding-left:(同上,指定左邊) PADDING-BOTTOM:(同上,指底部) 如果你有很好的美工基礎,也可以在這里插入相應的背景圖片美化空間. 下面我以我的CSS代碼作注釋.如要使用,請去掉注釋內容. 注意:不小心有些文字搞成黑色了,居然修改不回來,如果看不清楚,請用滑鼠選取後再看 /* 浪兒製作 http://hi..com/jsqk/ ◎浪兒出手,必是精品◎ All Rights reserved. css by jsqk. */ /* green style VER 3.1 */ #phx{FILTER:Alpha(Opacity=66,FinishOpacity=26,Style=2,StartX=20,StartY=40,FinishX=0,FinishY=0)gray();WIDTH: 209px;HEIGHT:45px;margin-top:12px} (播放器代碼) .f14 {color:#668214} BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;color:#668214;background:url() -2px -1px} .modbl{line-height:1px} .modbc{line-height:1px} .modbr{line-height:1px} (本段代碼請參考網路空間官方CSS幫助) #mod_bloglist{padding-top:0px} #m_blog {padding-top:0px} (指定文章內容距離#header部分的距離.) (下面的代碼請大家參考網路官方CSS幫助) #m_blog div.cnt a {text-decoration:none;color:#344500} #m_blog div.cnt a:visited {text-decoration:none;color:#344500} #m_blog div.cnt a:hover {border-bottom:1px #344500 dashed;color:#344500} #m_blog {padding-left:15px;padding-right:15px;margin-top:20px} #m_blog div.tit{padding-top:0px;padding-bottom:0px;color:#4E7304;font-size:13px;font-weight:bold;text-decoration:none;border-bottom:1px solid #4E7304;border-top:0px solid #ffffff;TEXT-INDENT: 119px;line-height:17px} #m_blog div.tit a{color:#4E7304;font-size:13px;font-weight:bold;text-decoration:none} #m_blog div.tit a:visited{color:#4E7304;text-decoration:none} #m_blog div.date{font-size:13px;margin:-20px 0 8px 0;color:#4E7304;TEXT-INDENT: 7px;font-weight:bold} #m_blog div.cnt{color:##005533;line-height:20px;font-size:15px;font-weight:700;PADDING-RIGHT: 10px; PADDING-LEFT: 10px;PADDING-TOP: 10px;PADDING-bottom: 10px;} #m_blog div.more{margin:14px 0 16px 0;text-decoration:none;font-weight:bold} #m_blog div.more a{color:#ffffff;font-size:14px;text-decoration:none;font-weight:bold} #m_blog div.more a:visited{color:#ffffff;text-decoration:none;font-weight:bold} #m_blog div.opt{color:#689411;font-size:12px} #m_blog div.opt a{color:#689411;font-size:12px;text-decoration:none} #m_blog div.opt a:visited{color:#689411;text-decoration:none} #m_blog div.line{margin-top:17px;line-height:17px} #m_blog div.none{padding:100px 0 100px 0;color:#1a4a8a;font-size:14px} #m_pro {text-align:left;padding-left:18px;padding-right:10px;} #m_pro a{color:#995C00;font-weight:bold;text-decoration:none;text-align:center} #m_pro a:visited{color:#995C00;font-weight:bold;text-decoration:none} #m_pro div.image{text-align:center;;border-bottom:#ffffff 1px solid;padding-top:5px;padding-bottom:5px} #m_pro div.act{margin-top:10px} #m_pro div.user{color:#995C00;font-size:12px;font-weight:bold} #m_pro div.desc{color:#995C00;font-size:12px} #m_pro div.line{margin-top:17px;line-height:17px;border-top:1px solid #1A4A8A} #m_pro td{color:#995C00;line-height:24px;font-size:14px} #m_album div.image{text-align:center;padding-top:30px} #m_album div.page{color:#995C00;font-size:12px;text-align:center} #m_album div.page a{color:#995C00;font-size:12px} #m_album div.page a:visited{color:#330000} #m_links {padding-left:18px;padding-right:18px;text-align:left;border-top:0px solid #995C00;text-align:lift} #m_links div.item{color:# 6E981A;font-size:12px; LINE-HEIGHT: 21px} #m_links div.item a{color:#995C00;font-size:12px;text-decoration:none} #m_links div.item a:visited{color:#995C00} #m_links div.linediv.line{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4} #m_artclg {border-top:0px solid #5C85BB;padding-top:5px} #m_artclg {padding-left:18px;padding-right:18px;text-align:left;border-top:0px solid #995C00;text-align:lift} #m_artclg div.item{color:#995C00;font-size:12px;text-align:left;padding-left:0px} #m_artclg div.item a{color:#995C00;font-size:12px;text-decoration:none} #m_artclg div.item a:visited{color:#995C00;text-decoration:none} #m_artclg div.linediv.line{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4} #m_comment {padding-left:18px;padding-right:18px;text-align:left;border-top:0px solid #995C00;text-align:lift} #m_comment div.item{color:#D2E9F4;font-size:12px;} #m_comment div.item a{color:#995C00;font-size:12px;} #m_comment div.item a:visited{color:#995c00;text-decoration:none;} #m_comment div.item a.cnt{color:#995C00;font-size:12px;} #m_comment div.item a.cnt:visited{color:#995c00;text-decoration:none;font-weight:normal;text-align:center} #m_comment div.item a.cnt:hover{color:#D2E9F4;text-decoration:underline;text-align:left} #m_comment div.line{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4} #m_albumlist div.note{color:#995C00;font-size:14px} #m_albumlist div.desc{margin-bottom:12px;padding:3px 10px 3px 10px;line-height:22px;background-color:#F2F2F2;font-size:14px} #m_albumlist div.none{padding:100px 0 100px 0;color:#995C00;font-size:14px} #m_albumlist div.line{margin-top:10px;line-height:16px;border-top:1px solid #ffffff} #m_albumlist div.tit{margin:6px 0 7px 0;color:#995C00;font-size:14px} #m_albumlist div.tit a{color:#995C00;font-size:14px} #m_albumlist div.tit a:visited{color:#995C00} #m_albumlist span.count{color:#995C00;font-size:12px;font-weight:bold} #m_albumlist span.size{color:#999999;font-size:12px;font-family:Arial} #m_albumlist a.act{color:#995C00;font-size:12px} #m_albumlist a.act:visited{color:#995C00} #m_albumlist a.page{color:#330000;font-size:14px} #m_albumlist a.page:visited{color:#330000} #m_albumlist td.image{padding:5px;border:1px solid #999999;background:#995C00} #m_friend div.filter{margin-bottom:10px;padding-left:10px;padding-top:10px;height:27px;line-height:27px} #m_friend div.catalog{margin-bottom:10px;padding-left:10px;height:27px;line-height:27px;background-color:#F2F2F2;font-size:14px} #m_friend div.user{margin-top:4px;color:#995C00;font-size:12px} #m_friend div.user a{color:#995C00;font-size:12px} #m_friend div.user a:visited{color:#995C00} #m_friend div.line{margin-top:10px;line-height:16px;border-top:1px solid #995C00} #m_mylink1 {padding-left:18px;padding-right:18px;text-align:left;border-top:0px solid #995C00;text-align:lift} #m_mylink1 div.item{color:#995C00;font-size:12px} #m_mylink1 div.item a{color:#995C00;font-size:12px;text-decoration:none} #m_mylink1 div.item a:visited{color:#995C00} #m_mylink1 div.line{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4} #m_mylink2 {padding-left:18px;padding-right:18px;text-align:left;border-top:0px solid #995C00;text-align:lift} #m_mylink2 div.item{color:#995C00;font-size:12px} #m_mylink2 div.item a{color:#995C00;font-size:12px;text-decoration:none} #m_mylink2 div.item a:visited{color:#995C00} #m_mylink2 div.line{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4} #m_mylink3 {padding-left:18px;padding-right:18px;text-align:left;border-top:0px solid #995C00;text-align:lift} #m_mylink3 div.item{color:#995C00;font-size:12px} #m_mylink3 div.item a{color:#995C00;font-size:12px;text-decoration:none} #m_mylink3 div.item a:visited{color:#995C00} #m_mylink3 div.line{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4} #m_mylink4 {padding-left:18px;padding-right:18px;text-align:left;border-top:0px solid #995C00;text-align:lift} #m_mylink4 div.item{color:#995C00;font-size:12px} #m_mylink4 div.item a{color:#995C00;font-size:12px;text-decoration:none} #m_mylink4 div.item a:visited{color:#995C00} #m_mylink4 div.line{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4} #m_filed {padding-left:18px;padding-right:18px;text-align:left;border-top:0px solid #995C00;text-align:lift} #m_filed div.item{color:#995C00;font-size:12px} #m_filed div.item a{color:#995C00;font-size:12px} #m_filed div.item a:visited{color:#995C00} #m_filed div.line{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4} #m_setting a{color:#995C00} #m_setting a:visited{color:#995C00} #m_setting{line-height:22px;color:#995C00;font-size:14px} #m_setting img.sel{border:4px solid #FFDB7B} #m_setting img.unsel{border:1px solid #D2D2D2} #m_setting span.tit{font-size:14px} #m_setting span.usr{color:#995C00} #m_setting div.sel{padding-top:6px;font-size:14px;font-weight:bold} #m_setting div.line{margin-top:20px;line-height:16px;border-top:1px solid #ffffff} #m_sysinfo a{color:#995C00} #m_sysinfo a:visited{color:#995C00} #m_sysinfo{line-height:22px;color:#995C00;font-size:14px} #m_sysinfo span.new{color:#FF0000;font-size:10px;font-family:Arial} #m_sysinfo span.date{color:#995C00;font-size:14px} #m_setbase{color:#995C00;font-size:14px} #m_setbase td{color:#995C00;font-size:14px} #m_setbase div.line{margin-top:5px;line-height:8px;border-top:1px solid #ffffff} {all rights reserved,http://hi..com/jsqk} #in_comment div.tit{margin-bottom:12px;color:#995C00;font-size:14px;font-weight:bold} #in_comment div.user{margin-bottom:6px;color:#995C00;font-size:12px} #in_comment div.user a{color:#995C00;font-size:12px} #in_comment div.user a:visited{color:#995C00} #in_comment div.user span.date{color:#995C00;font-size:12px} #in_comment div.desc{color:#995C00;font-size:12px} #in_comment div.line{margin-top:17px;line-height:17px;border-top:1px solid #995C00} #in_send div.tit{margin:10px 0 10px 0;color:#995C00;font-size:14px;font-weight:bold} /* 請不要隨意修改版權,尊重別人的勞動成果.如有需要,請和浪兒本人聯系 */
Ⅱ css+div標簽,使用css控制網頁類教程
一開始的話建議下載個html+css參考手冊,再弄個dreamweaver,之後下載幾個網頁模板,在dreamweaver里打開模板,看人家裡面html和css怎麼寫的,之後查看參考手冊,簡單的瀏覽一下用法,之後自己照著模板練習一下,用的熟了就算入門了。接著給你推薦一本css的書,叫《禪意花園》世界各地的大師們寫的,對你的css布局能力有很大提高,看懂了那你就可以出師了。
Ⅲ 如何在百度博客css彈出網頁
不可以! 修改CSS只能修改html的顯示樣式,要彈出窗口就要修改html文件,用戶沒有修改html文件的許可權
Ⅳ 如何用css做網頁
先用xhtml把網頁框架給寫出來,把結構的元素寫出來,然後再用CSS(表現)來控制結構:)
Ⅳ 改版後的百度空間CSS怎麼用
我給你提供一套 給你一套好看的CSS代碼 (直接復制到CSS就可) 這個CSS代碼 我感覺很好看 不信你試試 記得給我加分 BODY {BACKGROUND-POSITION: center 50%; BACKGROUND-ATTACHMENT: fixed; BACKGROUND-IMAGE: url(http://mumayi1.999kb.com/pic/2006-10-05/6z5tigmubrg5yys9khjc.gif); } A:hover{LEFT: 1px; POSITION: relative; TOP: 1px; TEXT-DECORATION: underline} td,div{color:#F9E3F5} BODY{CURSOR: url('http://imgcache.qq.com/qzone/space_item/orig/13/3341.ani') } A {CURSOR: url('http://imgcache.qq.com/qzone/space_item/orig/0/3344.ani') ;background-repeat: no-repeat;background-position: center;background-attachment: fixed;;CURSOR:url('http://imgcache.qq.com/qzone/space_item/orig/13/3341.ani')}a:hover{CURSOR:url('http://imgcache.qq.com/qzone/space_item/orig/0/3344.ani')}a:hover {position:relative; left:1px; top:1px; clip:rect()} body{background-color:#FB7CC8}}body{CURSOR: url('http://imgcache.qq.com/qzone/space_item/orig/13/3341.ani');}body{a:hover{position:relative; left:1px; top:1px; clip:rect()}} BODY {scrollbar-face-color: #000000; scrollbar-shadow-color: maroon; scrollbar-highlight-color:#F9E3F5; scrollbar-3dlight-color: #000000; scrollbar-darkshadow-color:#000000; scrollbar-arrow-color:#F9E3F5; scrollbar-base-color: #000000; scrollbar-track-color: #000000; filter: chroma(color=#F9E3F5);} #header{height:150px;background:url(http://album.sina.com.cn/pic/454db7da020006fn) repeat;} #header div.lc{background:url()
Ⅵ 完全教程:用外聯式CSS做一個網頁
外聯是把css單獨放在外部,方便各個頁面引用。
<link href="xx.css" rel="stylesheet" type="text/css">
內聯一般只是針對本頁的css,所以就是直接在本頁<head></head>之間。
他們的寫法和功能沒有任何區別,就是一個單獨存成css文件,一個在本頁面上寫!
你要是想簡單的學點,告訴我信箱,我給你發一個好點的基礎教程!
Ⅶ 在網頁製作中如何使用Css
CSS是英語Cascading Style Sheets(層疊樣式表單)的縮寫,它是一種用來表現HTML或 XML 等文件式樣的計算機語言。
CSS目前最新版本為CSS3,能夠真正做到網頁表現與內容分離的一種樣式設計語言。相對於傳統HTML的表現而言,CSS能夠對網頁中的對象的位置排版進行像素級的精確控制,支持幾乎所有的字體字型大小樣式,擁有對網頁對象盒模型的能力,並能夠進行初步交互設計,是目前基於文本展示最優秀的表現設計語言。
有三種方法可以在站點網頁上使用樣式表:
1.將網頁鏈接到外部樣式表。
2.在網頁上創建嵌入的樣式表。
3.應用內嵌樣式到各個網頁元素。
每一種方法均有其優缺點: (1)當要在站點上所有或部份的網頁上一致地應用相同樣式時,可使用外部樣式表。在一個或多個外部樣式表中定義樣式,並將它們鏈接到所有網頁,便能確保所有網頁外觀的一致性。如果人們決定更改樣式,只需在外部樣式表 — 中作一次更改 — 而該更改會反映到所有與該樣式表相鏈接的網頁上。通常外部樣式表以 .css 做為文件擴展名,例如 Mystyles.css。 (2)當人們只是要定義當前網頁的樣式,可使用嵌入的樣式表。嵌入的樣式表是一種級聯樣式表,「嵌」在網頁的 <HEAD> 標記符內。嵌入的樣式表中的樣式只能在同一網頁上使用。 使用內嵌樣式以應用級聯樣式表屬性到網頁元素上。 如果網頁鏈接到外部樣式表,為網頁所創建的內嵌的或嵌入式樣式將擴充或覆蓋外部樣式表中的指定屬性。
要在網頁上使用外部樣式表的樣式,可將該網頁鏈接到樣式表,方法是使用位於 「格式」 菜單上的 「樣式表連接」 命令。可以鏈接一個或數個樣式表到網頁視圖模式下的當前網頁,或到在文件夾列表中的所選網頁,或到站點上的全部網頁。 該「樣式」 框列出標准 HTML 標記符,例如標題 1,還有嵌入的樣式表或鏈接到網頁的外部樣式表中所含的類或 ID 選擇器。要應用樣式到網頁元素,請選定該樣式然後單擊 「樣式」 框中的樣式或選擇器。 在 Microsoft FrontPage 2000 中,某些格式設置特性會作為內嵌樣式自動應用。例如∶如果使用 「邊框與陰影」 命令(在 「格式」 菜單上)在普通段落周圍應用框,FrontPage 會寫下格式設置信息,作為段落標記符的內嵌樣式屬性(例如∶ <p style="border-style: solid">)。然而某些屬性的應用需要使用 CSS,其他則需要使用 HTML 。如果人們只想使用 CSS 應用內嵌樣式,可使用 「樣式」 按鈕(位於網頁元素的 「屬性」 對話框里)應用類或 ID 選擇器或嵌入式樣式。
Ⅷ 為什麼我訪問百度的所有網站都無法載入CSS
因為中國很多網站製作都不符合w3c標准,所以你用ie8看的話就會變形,凡是變形的都是不規范的,你要想看,你自己切換到ie7兼容模式
Ⅸ HTML網頁怎麼使用CSS樣式
在製作一個網頁的時候,Css樣式的添加一共有四種方式,一起來看看這四種方式:
一、使用STYLE屬性: 將STYLE屬性直接加在個別的元件標簽里。
<元件(標簽) STYLE="性質(屬性)1: 設定值1; 性質(屬性)2: 設定值2; ...}
例如:
<TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"標楷體"; line-height:150%>
這種用法的優點 是可靈巧應用樣式於各標簽中,但是缺點則是沒有整篇文件的『統一性』。
二、使用STYLE標簽: 將樣式規則寫在<STYLE>...</STYLE>標簽之中。
通常是將整個的 <STYLE>...</STYLE>結構寫在網頁的<HEAD> </HEAD>部份之中。這種用法的優點就是在於整篇文件的統一性,只要是有聲明的的元件即會套用該樣式規則。缺點就是在個別元件的靈活度不足。
三、使用 LINK標簽: 將樣式規則寫在.css的樣式檔案中,再以<LINK>標簽引入。
假設我們把樣式規則存成一個example.css的檔案,我們只要在網頁中加入
<LINK REL=STYLESHEET TYPE="text/css" HREF="example.css">
即可套用該樣式檔案中所制定好的樣式了。 通常是將LINK標簽寫在網頁的<head></head>部份之中。這種用法的優點就是在於可以把要套用相同樣式規則的數篇文件都指定到同一個樣式檔案即可。缺點也是在個別文件或元件的靈活度不足。
四、使用@import引入: 跟LINK用法很像,但必放在<STYLE>...</STYLE> 中。
要注意的是,行末的分號是絕對不可少的!這種方式也可以把