CSS 層疊樣式表（Cascading Style Sheets）

時間 2019-12-12

標籤 css 層疊樣式 cascading style sheets 欄目 CSS 简体版

原文原文鏈接

css樣式
內嵌樣式：<span style ="color:red;">內嵌</span>
內聯：
<style>
span{
font-size:14px;
}
</style>
外聯：
<link rel="stylesheet" href="../css/global.css">
在外聯中，css裏不能寫style
font-family：「Microsoft Yahei」，「黑體」，sans-serif；
sans-serif 非襯線字體
serif 襯線字體
選擇器
id選擇器
id=「span1」css

#sapn1{
border：1px solid；
}
類選擇器（能夠定義多個樣式）
class=「test_class」html

.test_class{
... ;
}
屬性選擇器
<input type="text">
input[type="text"/]{
... ;
}
組合/並集選擇器
h1,h2,h3,h4,h5,h6{
font-weight:normal;
}
元素/標籤/標記選擇器
<span>xxx</span>
span{
... ;
}
後代選擇器
ul li{
background-color：red；
}
子集選擇器
ul>li{
border:1px solid;
}
僞類選擇器
當前樣式
a:link{
... ;
}
點擊後： visited
懸停，滑過： hover
點擊時： active

shell

標準文檔流
前提：在沒有CSS的前提上微信

塊級元素獨佔一行，但是width，height字體

行內元素並排顯示，auto*auto動畫

塊級元素列表：url

<address> <caption> <dd> <dt> <html>
<form> <h1>~<h6> <hr> <li> <ol> <ul>
<p> <pre> <table> <td> <tfoot> <th>
<thead> <tr> <body> <figure> <blockquote>
<menu>spa

行內元素：orm

<a> <abbr> <b> <br/> <cite> <em> <i>
<label> <q> <select> <small> <span> <strong>
<sub> <sup> <textarea>htm

迪士尼主頁實戰練習

index.html部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>迪士尼</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="homepage">
<header>
<nav>
<ul>
<li>
<i></i>
<a href="#">首頁</a>
</li>
<li>
<i></i>
<a href="#">商店</a>
</li>
<li>
<i></i>
<a href="#">樂園</a>
</li>
<li>
<img src="img/b_logo.png" alt="">
</li>
<li>
<i></i>
<a href="#">影視</a>
</li>
<li>
<i></i>
<a href="#">數碼</a>

</li>
<li>
<i></i>
<a href="#">會員</a>
</li>
</ul>
</nav>
</header>
<img src="img/160216172223655101.jpg" alt="">
<h1>明星</h1>

<div class="star">
<ul>
<li>
<img src="img/151209173849244246.jpg" alt="">
<p>米奇和他的朋友們</p>
</li>
<li>
<img src="img/151209173747572402.jpg" alt="">
<p>迪士尼公主</p>
</li>
<li>
<img src="img/151130185638114248.jpg" alt="">
<p>賽車總動員</p>
</li>
<li>
<img src="img/151130185656630780.jpg" alt="">
<p>小公主蘇菲亞</p>
</li>
<li>
<img src="img/151130185733287815.jpg" alt="">
<p>冰雪奇緣</p>
</li>
<li>
<img src="img/151130185754146838.jpg" alt="">
<p>星球大戰</p>
</li>
</ul>
</div>
<h1>商店</h1>

<div class="store">

<div class="store_left">
<img src="img/160322141822716049.jpg" alt="">
</div>

<div class="store_right">
<img src="img/phoneshell.jpg" alt="">
<img src="img/fox.jpg" alt="">
<img src="img/pendent.jpg" alt="">
<img src="img/cup.jpg" alt="">
</div>
</div>
<h1>迪士尼資訊</h1>

<div class="news">
<div class="news_left">
<section><img src="img/160113121641905797.jpg" alt=""></section>
<section class="news_text">
<h2>上海迪士尼樂園開園在即！</h2>
<p>自2016年6月16日起，您將能夠探索一個史無前例的神奇世界，
每一個人都能在這裏點亮心中奇夢。
<i></i>
</p>
</section>
</div>
<div class="news_right">
<div class="news_right_up">
<ul>
<li>
<section><img src="img/160321105131828720.jpg" alt=""></section>
<section class="news_text">
<h3>《瘋狂動物城》票房突破10億人民幣！</h3>
<p>《瘋狂動物城》上映第16日登頂中國動畫賣座第一，
併成爲史上首部破10億動畫片！
<i></i>
</p>
</section>
</li>
<li>
<section><img src="img/160225171114064621.jpg" alt=""></section>
<section class="news_text">
<h3>全球首座迪士尼音樂報時鐘樓正式落成</h3>
<p>迪士尼鐘樓將於迪士尼旗艦店
一塊兒爲上海帶來一份奇妙而夢幻的娛樂購物體驗。
<i></i>
</p>
</section>
</li>
</ul>
</div>
<div class="news_right_down">
<div class="news_right_down_img"><section><img src="img/160229155948703765.jpg" alt=""></section></div>
<div class="news_right_down_text">
<section class="news_text">
<h3>《頭腦特工隊》得到第88屆奧斯卡最佳動畫長片</h3>
<p>皮克斯《頭腦特工隊》得到第88屆奧斯卡最佳動畫長片！實至名歸！
<i></i>
</p>
</section>
</div>
</div>
</div>
</div>

<footer>
<div class="foot">

<div>
<ul>
<li><img src="img/b_logo.png" alt=""></li>
<li><img src="img/weibo.jpg" alt=""><p>關注咱們的微博</p></li>
<li><img src="img/weibo.jpg" alt=""><p>關注咱們的微信</p></li>
</ul>
</div>

<div>
<a href="#">關於咱們</a>
<a href="#">加入咱們</a>
<a href="#">法律條款</a>
<a href="#">隱私政策</a>
<a href="#">退換貨政策</a>
</div>
<div><small>Disney | Pixar All rights reserved.備案號：滬B2-20040339-3</small></div>
</div>
</footer>

</div>
</body>
</html>

CSS部分

*{
padding: 0;
margin: 0;
}
.homepage{
width: 1200px;
margin: auto;
/*outline:1px solid;*/
}
body{
font-family: sans-serif;
}
li{
list-style-type: none;
}
h1{
font-family: Arial sans-serif;
text-align: center;
margin: 55px 0 42px 0;
}
/*導航欄*/
header li{
float: left;
width: 14.28%;
text-align: center;
line-height: 46px;
}
header a{
text-decoration: none;
color: black;
}
header i{
display: inline-block;
width: 20px;
height: 20px;
background: url("img/icon.png");
}
header li:nth-child(2) i{
background-position: 0 -20px;
}
header li:nth-child(3) i{
background-position: 0 -44px;
}
header li:nth-child(5) i{
background-position: 0 -62px;
}
header li:nth-child(6) i{
background-position: 0 -80px;
}
header li:nth-child(7) i{
background-position: 0 -101px;
}

/*導航懸停視口變化*/
header li:hover a{
color: red;
}
header li:nth-child(1):hover i{
background-position: -22px 0;
}
header li:nth-child(2):hover i{
background-position: -22px -20px;
}
header li:nth-child(3):hover i{
background-position: -22px -44px;
}
header li:nth-child(5):hover i{
background-position: -22px -62px;
}
header li:nth-child(6):hover i{
background-position: -22px -80px;
}
header li:nth-child(7):hover i{
background-position: -22px -101px;
}

/*明星*/
.star{
overflow: hidden;
text-align: center;
}
.star li{
width: 16.6%;
float: left;
}
.star img{
width: 115px;
}
/*商店*/
.store{
overflow: hidden;
}
.store img{
float: left;
}
.store_left img{
width: 50%;
}
.store_right img{
width: 24.8%;
border: 1px solid gainsboro;
}

/*資訊*/

.news{
overflow: hidden;
height: 769px;
outline: 1px solid gainsboro;
}
.news p{
font-size: 15px;
color: rgb(84, 85, 77);

}
.news_text{
margin: 30px 30px 10px;
}
.news h3,h2{
padding-bottom: 22px;
}
.news_left{
width: 50%;
float: left;
}
.news_right_up ul{
height:62%;
}
.news_right_up li{
width: 25%;
float: left;
outline: 1px solid gainsboro;
}
.news_right_down{
width: 50%;
float: right;
}

.news_right_down_text{
display: inline-block;
width: 50%;
float: right;
}
.news_right_down_img{
width: 50%;
float: left;
}

.news i{
display: inline-block;
width: 14px;
height: 14px;
background: url("img/icon.png");
background-position: -48px -102px;
}
/*.news li{*/
/*outline: 1px solid gainsboro;*/
/*}*/

/*腳部*/footer{ text-align: center;}.foot{ margin-bottom: 150px;}footer ul{ overflow: hidden; width: 490px; margin: 90px auto 21px; padding: 25px; border-bottom: 1px solid gainsboro;}footer li{ float: left;}footer li:nth-child(1){ padding: 0 30px 0 0; border-right: 1px solid gainsboro;}footer li:nth-child(2){ padding: 0 35px;}footer a{ text-decoration: none; color: black;}