9、CSS的Class以及ID選取器
id和class的不同指出在於一個頁面同一個ID只能只有一次，而class可以無限制使用。
同樣，你可以在html選取器後面使用一個選取器來指定特殊HTML元素，比如p.jam{值}將作用到帶有'jam'class屬性的段落。
10、這個都差點忘了。頁面配置
clear float disply等這幾個，關於網站用div+css主要把這個用好。
總結：基本上都差不多，css的概念都有了一個瞭解，必定我們是做web開發，但是css,html前端的我們不能不知道，要知道個大概，查資料也知道怎麼查就行了。所以我接下來想做一個demo來示範一下。今晚發上，希望大家支援一下黑俠客，我也是一隻很老的菜鳥，現在才踏進來這個web之間，希望大家多多協助，謝～
11、演練html+css
由於我的目的是學習web開發，所以這個html＋css不要求太精，瞭解一下大概，在以後我拿到一個執行個體可以改就行了，這就是我的目的。不知道大家是什麼要求。
接下來我就改一下百度的頁面，因為本人比較懶，比較大的頁面可能沒有耐心做下去，就模仿一下百度吧，也不知道這兩天學的行不行.
首先看到這個布面，我先分析結構，用html把結構弄出來，接下來再看錶現方式用css定義。
| 代碼如下 |
複製代碼 |
<html>
<head>
<title>html+css baidu.com demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/css.css" rel="stylesheet" type="text/css" />
<body>
<div id="box">
<div id="login"><a href="#">登入</a></div>
<div id="log"></div>
<div id="txt">
<ul>
<li><a href="#">新聞</a></li>
<li><a href="#">網頁</a></li>
<li><a href="#">貼吧</a></li>
<li><a href="#">知道</a></li>
<li><a href="#">MP3</a></li>
<li><a href="#">圖片</a></li>
<li><a href="#">視頻</a></li>
</ul>
</div>
<div id="ipt">
<input type="text" />
<input type="button" value="百度一下" id="btn" />
</div>
<div id="help">
<ul>
<li><a href="#">協助</a></li>
<li><a href="#">搜尋</a></li>
</ul>
</div>
<div id="link">
<ul>
<li><a href="#">企業推廣</a></li>
<li><a href="#">搜尋風雲榜</a></li>
<li><a href="#">關於百度</a></li>
<li><a href="#">About Baidu</a></li>
</ul>
</div>
<div id="copy">©2008 Baidu <a href="#">使用百度前必讀 京ICP證030173號</a></div>
</div>
</body>
</html> body{
width: 98%;
margin: 0px auto;
}
#login{
float: right;
font-size: 12px;
padding-top: 7px;
}
#log{
background-image:url(../images/log.gif);
height:129px;
padding:0;
background-repeat: no-repeat;
background-position: center;
}
#txt ul{
float: left;
}
input #btn{
color: Blue;
}
#nav{
margin: 0px auto;
height: 200px;
}
#link ul{
margin: 0px auto;
color: Black;
float: left;
}
#copy{
clear: both;
text-align: center;
color: #7777cc;
font-size: 12px;
}
#copy a{
color: #7777cc;
} |
