溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
上一篇簡單的過了一遍HTML的常用標(biāo)簽，這一篇繼續(xù)CSS。
例1 CSS的標(biāo)簽選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--<link rel="stylesheet" href="common.css" />-->
<style>
/*標(biāo)簽選擇器，找到所有的標(biāo)簽應(yīng)用以下樣式*/
div{
color: green;
}
/*id選擇器，找到標(biāo)簽id等于i1的標(biāo)簽，應(yīng)用以下樣式*/
#i1{
font-size: 56px;
/* color: green; */
}
/*class選擇器，找到class=c1的所有標(biāo)簽，應(yīng)用一下樣式*/
.c1{
background-color: red;
}
/*層級選擇器，找到 class=c2 下的div下的p下的class=c3標(biāo)簽，應(yīng)用以下樣式*/
/*.c2 div p a{*/
/**/
/*}*/
.c2 div p .c3{
background-color: red;
}
/*組合選擇器，找到class=c4,class=c5,class=c6,的標(biāo)簽，應(yīng)用以下樣式*/
.c4,.c5,.c6{
background-color: aqua;
}
</style>
</head>
<body>
<div class="c4">1</div>
<div class="c5">1</div>
<div class="c6">1</div>
<div class="c2">
<div></div>
<div>
<p>
<span>oo</span>
<a class="c3">uu</a>
</p>
</div>
</div>
<div class="c3">sdfsdf</div>
<span class="c1">1</span>
<div class="c1">2</div>
<a class="c1">3</a>
<a id="i1">baidu</a>
<div>99</div>
<div>99</div>
<div>99</div>
<div>
<div>asdf</div>
</div>
</body>
</html>
例2 加載CSS文件
創(chuàng)建一個css文件，把style內(nèi)容寫進(jìn)去
在html文件里面導(dǎo)入這個css文件，效果和直接寫是一樣的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="common.css" /> </head> <body> <div>asdfasdfsdf</div> </body> </html>
例3 float的使用
如果不用float，那么因?yàn)?lt;div>是塊級標(biāo)簽，他會自動變成兩行,使用float之后，漂浮起來變成一行，具體的理解是，css是分層級的，一個是標(biāo)準(zhǔn)層，一個是浮動層；他float之后就漂浮到標(biāo)準(zhǔn)標(biāo)簽的外面的一層了（浮動層），那么這個float的標(biāo)簽后面的標(biāo)簽，如果沒有float的話，會自動往上跑（標(biāo)準(zhǔn)層），這樣的結(jié)果有可能導(dǎo)致浮動的標(biāo)簽遮擋了后面沒有浮動的標(biāo)簽。同時這個float的標(biāo)簽如果他的上面是一個標(biāo)準(zhǔn)的標(biāo)簽，他會自動緊貼上面；如果他的上面是一個浮動的，他會跟著浮動到同一行，如果塞不下才會跑到下面一行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.c1{
color: red;
/*background-color: #FF69B4;*/
/*background-color: rgb(25,180,10);*/
/*background-color: red;*/
font-size: 32px;
height: 150px;
width: 500px; /* 按照父親相對占比*/
}
</style>
</head>
<body>
<div class="c1">test1</div>
<div >
<div >test2</div>
<div >test3</div>
</div>
</body>
</html>
例4. 加載背景圖片
使用背景圖片的時候需要指定高度，寬帶；一個使用技巧是通過Chrome的F12，可以滾輪編輯數(shù)字像素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.img{
background-p_w_picpath: url("4.gif");
height: 200px;
width: 400px;
background-repeat: no-repeat;
}
.img2{
background-p_w_picpath: url("2.jpg");
height: 50px;
width: 50px;
background-position: 84px -58px;
}
</style>
</head>
<body>
<div class="img"></div>
<div class="img2"></div>
</body>
</html>
列5 邊距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div > <div ></div> </div> <div > <div > <input /> <input /> <input /> </div> </div> </body> </html>
注意那三個input距離上邊和左邊的距離
列6 clear的使用
clear可以禁止float, 默認(rèn)一個float的標(biāo)簽后面跟著的標(biāo)簽會跟著float起來，可以指定clear來控制是否漂浮
這里有一個很不錯的文章解釋了float和clear的使用
前面已經(jīng)說了
假如某個div元素A是浮動的，如果A元素上一個元素也是浮動的，那么A元素會跟隨在上一個元素的后邊(如果一行放不下這兩個元素，那么A元素會被擠到下一行)；如果A元素上一個元素是標(biāo)準(zhǔn)流中的元素，那么A的相對垂直位置不會改變，也就是說A的頂部總是和上一個元素的底部對齊。如果使用了clear，那么在float那一層里面 他會把橫向排列的div再變成縱向的，但是不影響標(biāo)準(zhǔn)層的排列
http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html
例如；紅色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div ></div> <div ></div> <div ></div> <div ></div> </body> </html>
例7 position的使用 首先看fixed的使用，固定標(biāo)簽在屏幕的某個位置，即使拖動滾輪 他也在那里不會動。fixed以后，效果和float類似，他就漂浮起來了（想象立體空間），這樣導(dǎo)致他后面的div會自動往上跑，造成一部分遮擋?？梢酝ㄟ^調(diào)整margin來正常顯示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div ></div> <div >返回頂部</div> </body> </html>
例8 position的使用場景2，外面使用relative，里面用absolute，這樣的可以保證 111始終在父div的固定位置, 這個absolute的位置可以為正數(shù)，也可以為負(fù)數(shù)（跑出去邊框）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div > <div > <div >111</div> </div> </div> </body> </html>
例9加載圖片,和背景圖使用類似，也需要指定高度和寬度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <img src="2.jpg" > </body> </html>
例10 一個模擬對話框的界面
display:none 隱藏標(biāo)簽
如果希望實(shí)現(xiàn)彈出框一個居中的效果，可以指定top： 50%，left：50%，這樣左上角就居中了，然后根據(jù)彈出框的尺寸，左移動一半，下移動一半
如有多層，可以指定z-index來覺得誰在誰上面，z-index越大，這個div就越在上面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.hide {
display: none;
}
.modal{
width: 400px;
height: 300px;
background-color: #dddddd;
position: fixed;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -150px;
z-index: 10;
}
.shadow{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
/*background-color: black;*/
/*opacity: 0.4;*/
background-color: rgba(0,0,0,.6);
z-index: 9;
}
</style>
</head>
<body>
<input type="button" value="添加" />
<div class="shadow"></div>
<div class="modal">
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
</div>
<div >
</div>
</body>
</html>
例11. 菜單高亮效果
布局一般分為三大塊：header,body和foot
根據(jù)需求可以left float或者right float
cursor是鼠標(biāo)放上去的效果
.w里面 margin：0 auto可以保證在拖曳瀏覽器大小的時候，整個頁面始終居中顯示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
}
ul{
margin: 0;
list-style-type: none;
}
ul li{
float: left;
padding: 0 8px 0 8px;
color: white;
cursor: pointer;
}
/*當(dāng)鼠標(biāo)移動到li標(biāo)簽上時，自動應(yīng)用以下樣式*/
ul li:hover{
background-color: blueviolet;
}
.pg-header{
height: 44px;
background-color: #2459a2;
line-height: 44px;
}
.w{
width: 980px;
margin: 0 auto;
background-color: red;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="w">
<ul>
<li>菜單一</li>
<li>菜單二</li>
<li>菜單三</li>
<li>菜單三</li>
<li>菜單三</li>
<li>菜單三</li>
<li>菜單三</li>
<li>菜單三</li>
</ul>
</div>
</div>
<div class="pg-body"></div>
<div class="pg-footer"></div>
</body>
</html>
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼