首頁 > 開發者 > JavaScript
CSS的Class以及ID選取器，CSSClassID選取器
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">(www.111cn.net)
<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;
}
from:http://www.111cn.net/cssdiv/56/f4164fcc3cd74141c519e1e5313289c4.htm
在同一頁面內，相同id對象只能出現一次，而相同的class對象卻能出現多次，在引用css式樣時，id用“#”標記，而class是用“.”標記的。在script中，只能取得id元素，卻不能取得class元素。就這樣而已。如下：
在css中：#id{padding:1px;}//為id所引用
.class{margin:15px solid #3d3f3e}//為class所引用
而在script中：只有getElementbyId("name")//假設頁面中是id是name
CSS class 與 id 兩個選取器，哪個優先順序高？
<div class="case1" id="case2"></div>
<style>
.case2{樣式內容}
#case2{樣式內容}
</style>
在結構想相同情況下ID優先順序要高於 CLASS
ID是唯一的。 CLASS一個頁面可以出現很多個
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
