溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
【樣式概要和選擇器】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>頁面一</title>
<!--引用css的第1種方式（引用文件）-->
<link rel="stylesheet" href="new_file.css"/>
<!--引用css的第2種方式，定義，.這種用得最多-->
<style>
.logo{
background-color: red;
}
</style>
<!--或：第2種方式也可寫成這樣-->
<style>
#wsyht{
background-color: red;
}
</style>
<!--或：第2種方式也可寫成這樣-->
a,div{ <!--組合標簽:找所有的div和a標簽，只要是div和a標簽，字體都是紅色的->
color: red;
}
<!--或：第2種方式也可寫成這樣-->
a div{ <!--層級標簽:想寫幾層就幾層,a標簽下的div標簽變成紅色，如下代碼-->
color: red;
}
<a>
<input />
<div></div>
<a/>
.logo a{ <!--任何標簽只要class=logo，他里面的a標簽都是紅色，如下代碼-->
color: red;
}
<div class="logo">
<a></a>
</div>
input[type='text']{ <!--讓所有Input標簽，type='text的屬性都用這個樣式，也叫屬性選擇器-->
color: red;
}
</head>
<!--第二種方式用得最多的是. 、 層級和組合標簽-->
<body>
<!--引用css的第3種方式，直接加參數-->
<div >123</div>
<div class="logo">123</div> <!--引用第1種方式或第2種方式的css，引用.號開頭的-->
<div id="wsyht">123</div> <!--引用第1種方式或第2種方式的css,引用#號前面開頭的，id要唯一，第二個標簽不能再引用wsyht這個樣式，只能用一次-->
</body>
</html>
【最常用兩種選擇器演示】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>頁面一</title>
<style>
.logo{
background-color: #FF1493;
font-size: 18px;
border: 1px solid #fff;
}
.logo a,.logo p{
font-size: 56px;
}
</style>
<!--rgb顏色對照表網址http://www.114la.com/other/rgb.htm-->
</head>
<body>
<div class="logo">
<div>div標簽</div>
<a>a標簽</a>
<p>p標簽</p>
</div>
</body>
</html>
【樣式之背景圖片】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>頁面</title>
</head>
<body>
<!--no-repeat不重復53px縱軸-->
<div Apple-tab-span" >height: 20px;
background-repeat: no-repeat;
background-position: -0px -53px;">
</div>
</body>
</html>
<!--其它屬性
top:9px
left:18px
width:18px
height:16px
-->
【邊框和內外邊距】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>頁面</title>
</head>
<body><!--border邊框，紅色solid實線，border-top-style頂部樣式為虛線(dotted)-->
<div Apple-tab-span" >border-top-style: dotted;">
abc
</div>
<!--margin-top頭部外邊距,padding-top頂部內邊距60px-->
<div >
<div Apple-tab-span" >margin-top: 10px;margin-left: 20px;margin-right: 20px;
padding-top: 60px;">wsyht</div>
</div>
</body>
</html>
【浮動布局】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>頁面一</title>
<style>
.clearfix:after{
content:".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
</style>
</head>
<body>
<!--display屬性
display:none #隱藏值，需要結合js一起使用，js觸發了某個動作合，display none將值隱藏
original
display:block
display:inline
-->
<!--display: block把內聯標簽變成塊級標簽-->
<span >content</span>
<!--dispalay: inline把塊級標簽變成內聯標簽-->
<div >connect</div>
<!--css提代的cursor值-->
<span >pointer</span> <!--pointer變成小手-->
<span >heLp</span> <!--help變成指針-->
<span >wait</span> <!--wait變成圓圈-->
<span >move</span> <!--move變成虛擬十字架-->
<span >crosshair</span> <!--crosshair變成實線十字架-->
<span >自定義圖片</span><!--自定義指針圖片-->
<!--以下為布局-->
<!--浮動-->
<br/>
<div >div1</div> <!--往左移百分之20%-->
<div >div2</div> <!--往右移百分之80%-->
<!--浮動之后子div不會繼承父的樣式，也就是父div的屬性，所以需要繼承clearfix樣式，這是法1-->
<div class="clearfix">
<div >div3</div>
<div >div4</div>
</div>
<!--浮動之后子div不會繼承父的樣式，也就是父div的屬性，所以再加多一行clear:both，這是法2-->
<div >
<div >div5</div>
<div >div6</div>
<div ></div>
</div>
<!--
fixed
relative
absolute
-->
<!--fixed頭部固定設置，設置了position等于fixed后，要設置width他才能在頁面上顯示出來,top=0把他放在最上面-->
<div Apple-tab-span" >background-color: #333;width: 100%;
top: 0px;">
</div>
<div ></div> <!--加大高度出現滑輪看效果-->
<!--fixed左邊設置-->
<div >
<div Apple-tab-span" >position: fixed;top: 60px;bottom: 0;">
<div top: 80px;bottom:">hello</div>
<div top: 90px;bottom:">wsyht</div>
</div>
</div>
<div ><p>12345678</p></div>
<!--absolute的div大小只能限制在設了relative的div大小范圍內設置大小-->
<div >
<div ></div>
</div>
</body>
</html>
【透明庶照】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>頁面測試</title>
<!--opacity透明度可設置值為0到1，z-index像素px大的他的層就在最上面-->
<style>
.shade{
position: fixed;
top:0;
right: 0;
bottom: 0;
left: 0;
background-color: #333;
opacity: 0.6;
z-index: 12;
}
.delete{
position: fixed;
top: 50%;
left: 50%;
width: 400px;
height: 200px;
background-color: white;
margin-left: -200px;
margin-top: -150px;
z-index: 15;
}
</style>
</head>
<body>
<table>
<tr>
<th>IP</th>
<th>編輯</th>
</tr>
<tr>
<td>1.1.1.11</td>
<td>刪除</td>
</tr>
<tr>
<td>1.1.1.12</td>
<td>刪除</td>
</tr>
<tr>
<td>1.1.1.13</td>
<td>刪除</td>
</tr>
<tr>
<td>1.1.1.14</td>
<td>刪除</td>
</tr>
</table>
<!--遮罩層開始-->
<div class="shade"></div>
<!--遮罩層結束-->
<!--刪除層開始-->
<div class="delete">
<div>提示</div>
<div>確定要刪除嗎</div>
<div>
<input type="button" value="取消">
<input type="button" value="確定">
</div>
</div>
<!--刪除層結束-->
</body>
</html>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
