## [源碼]()
選擇器
```
選擇器 示例 描述
.class ; .intro 選擇 class="intro" 的所有元素
#id ; #firs 選擇 id="firs" 的所有元素。
* ; * 選擇所有元素。
element; p 選擇所有 <p> 元素。
element,element ; div,p 選擇所有 <div> 元素和所有 <p> 元素
element element ; div p 選擇 <div> 元素內部的所有 <p> 元素。
element>element; div>p 選擇父元素為 <div> 元素的所有 <p> 元素。
element+element; div+p 選擇緊接在 <div> 元素之后的 <p> 元素。
```
示例
#### 效果
```
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {
background-color: #e1b1b1;
}
/*選擇器*/
/*標簽選擇器*/
table {
width: 400px;
height: 400px;
}
table tr {
/*nbsp 選擇table 下面的所有 tr*/
/*background-color:green;*/
}
table > tbody > tr, div {
/*>選擇父元素為table元素的所有tbody元素...*/
background-color: green;
}
table tr td {
}
table > tr > td {
}
div + p {
/*+ div后面緊挨著的p*/
background-color: green;
}
div {
/*+ div后面緊挨著的p*/
background-color: green;
}
/*tag
id
class
*/
#div1 {
background-color: #ff0000;
}
.cl1 {
background-color: #0034ff;
}
/*內聯>id>class>tag*/
</style>
</head>
<body>
<div class="cl1" id="div1" style="background-color:#eae132;">div1</div>
<div class="cl1">div1</div>
<table>
<caption>描述</caption>
<tr>
<td>
td
</td>
<td>
td
</td>
</tr>
<tr>
<td>
td
</td>
<td>
td
</td>
</tr>
<tr>
<td>
td
</td>
<td>
td
</td>
</tr>
</table>
<span>span</span>
<div>dd</div>
<p>pppppppp</p>
</body>
</html>
```
樣式
CSS 背景屬性
```
background 在一個聲明中設置所有的背景屬性。
background-color 設置元素的背景顏色。
background-image 設置元素的背景圖像。
background-repeat 設置是否及如何重復背景圖像。
```
CSS 邊框屬性
```
border 在一個聲明中設置所有的邊框屬性。
border-style 設置四條邊框的樣式。
border-width 設置四條邊框的寬度。
border-radius 定義邊框形狀。
outline 在一個聲明中設置所有的輪廓屬性。
outline-color 設置輪廓的顏色。
outline-style 設置輪廓的樣式。
outline-width 設置輪廓的寬度。
```
Box 屬性
```
overflow-x 如果內容溢出了元素內容區域
overflow-y 如果內容溢出了元素內容區域
overflow-style 規定溢出元素的首選滾動方法
box-shadow 向方框添加一個或多個陰影
```
Color 屬性
`color 顏色`
CSS 尺寸屬性
```
height 設置元素高度。
max-height 設置元素的最大高度。
max-width 設置元素的最大寬度。
min-height 設置元素的最小高度。
min-width 設置元素的最小寬度。
width 設置元素的寬度。
```
CSS 字體屬性
```
font 在一個聲明中設置所有字體屬性。
font-family 規定文本的字體系列。
font-size 規定文本的字體尺寸。
font-size-adjust 為元素規定 aspect 值。
font-stretch 收縮或拉伸當前的字體系列。
font-style 規定文本的字體樣式。
font-weight 規定字體的粗細。
Hyperlink 屬性
target 簡寫屬性，設置target-name、target-new以及target-position屬性
```
CSS 列表屬性
```
list-style 在一個聲明中設置所有的列表屬性。
list-style-image 將圖象設置為列表項標記。
list-style-type 設置列表項標記的類型。
```
CSS 外邊距屬性
```
margin 在一個聲明中設置所有外邊距屬性。
margin-bottom 設置元素的下外邊距。
margin-left 設置元素的左外邊距。
margin-right 設置元素的右外邊距。
margin-top 設置元素的上外邊距。
```
CSS 內邊距屬性
```
padding 在一個聲明中設置所有內邊距屬性。
padding-bottom 設置元素的下內邊距。
padding-left 設置元素的左內邊距。
padding-right 設置元素的右內邊距。
padding-top 設置元素的上內邊距。
```
CSS 定位屬性
```
position 規定元素的定位類型。
bottom 設置定位元素下外邊距邊界與其包含塊下邊界之間的偏移。
left 設置定位元素左外邊距邊界與其包含塊左邊界之間的偏移。
right 設置定位元素右外邊距邊界與其包含塊右邊界之間的偏移。
top 設置定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。
clear 規定元素的哪一側不允許其他浮動元素。
cursor 規定要顯示的光標的類型（形狀）。
display 規定元素應該生成的框的類型。
float 規定框是否應該浮動。
overflow 規定當內容溢出元素框時發生的事情。
vertical-align 設置元素的垂直對齊方式。
visibility 規定元素是否可見。
z-index 設置元素的堆疊順序。
```
CSS 表格屬性
```
border-collapse 規定是否合并表格邊框。
border-spacing 規定相鄰單元格邊框之間的距離。
```
CSS 文本屬性
```
color 設置文本的顏色。
letter-spacing 設置字符間距。
line-height 設置行高。
text-align 規定文本的水平對齊方式。
text-decoration 規定添加到文本的裝飾效果。
text-outline 規定文本的輪廓。
text-overflow 規定當文本溢出包含元素時發生的事情。
text-wrap 規定文本的換行規則。
word-break 規定非中日韓文本的換行規則。
word-wrap 允許對長的不可分割的單詞進行分割并換行到下一行。
```
CSS 旋轉
```
transform:rotate(angle) 旋轉角度
```
CSS 動畫屬性
```
@keyframes 規定動畫。
animation 所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。
animation-name 規定 @keyframes 動畫的名稱。
animation-duration 規定動畫完成一個周期所花費的秒或毫秒。
animation-delay 規定動畫何時開始。
animation-iteration-count 規定動畫被播放的次數。
animation-direction 規定動畫是否在下一周期逆向地播放。
```
# 示例1
```
<html>
<head>
<title></title>
<style>
#cssss {
width: 200px;
min-width: 200px;
max-width: 200px;
height: 200px;
min-height: 200px;
max-height: 200px;
/*一個參數 表示四個方向*/
padding: 20px;
/*兩個參數 1->上下，2->左右*/
padding: 20px 30px;
/*三個參數 1->上，2->左右 3->下*/
padding: 20px 30px 40px;
padding: 10px 20px 30px 40px;
/*padding-top
padding-right
padding-bottom
padding-left*/
/*兩個參數 寬度和樣式*/
border: 2px solid;
/*三個參數 寬度 樣式 顏色*/
/*border:1px double red;*/
/*border-width:1px;
border-style:solid;
border-color:red;*/
/*下部三個參數 寬度 樣式 顏色*/
/*border-top:1px double red;
border-right:1px double red;
border-bottom:1px double red;
border-left:1px double red;*/
/*x4*/
/*border-top-width:1px;
border-top-style:solid;
border-top-color:red;*/
/*一個參數 代表 4個方向*/
/*border-radius:50px;*/
/*兩個參數 1->左上 and 右下 2->左下 and 右上*/
/*border-radius:10px 200px;*/
/*三個參數 1->左上 2->左下 and 右上 3->右下*/
/*border-radius:10px 50px 100px;*/
/*四個參數 1-4->左上 右上 右下 左下*/
/*border-radius:10px 50px 100px 200px;*/
/*border-top-left-radius: 60px;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
border-bottom-left-radius: 50px;*/
/*一個參數 四個方向*/
margin: 20px;
/*兩個參數 1->上下 2->左右*/
/*margin:10px 20px;*/
/*三個參數 1->上 2->左右 3->下*/
/*margin: 10px 20px 30px;*/
/*四個參數 1-4 ->上 右 下 左*/
/*margin: 10px 20px 30px 40px;*/
/*三個參數 寬度 樣式 顏色*/
/*outline:5px solid red;*/
/*outline-color: aqua;
outline-style: solid;
outline-width: 20px;*/
/*四個參數 1->水平方向的偏移 2->垂直方向的偏移 3->模糊度 4->顏色*/
/*box-shadow:-5px -5px 10px blue;*/
/*五個參數 1->水平方向的偏移 2->垂直方向的偏移 3->模糊度 4->顏色 5->陰影的樣式*/
/*box-shadow:5px 5px 10px blue inset;*/
/*word-wrap:break-word;
-ms-word-wrap:break-word;
-webkit-word-wrap:break-word;*/
}
#ctn {
/*出現滾動條*/
/*overflow:auto;*/
/*隱藏超出范圍的部分*/
/*overflow:hidden;*/
/*出現滾動條*/
/*overflow:scroll;*/
/*默認*/
/*overflow:visible;*/
/*x 方向*/
overflow-x: scroll;
/*y 方向*/
overflow-y: scroll;
}
</style>
<script>
</script>
</head>
<body>
<div id="ctn" style="width:200px;height:200px;border:1px solid green">
One day I'll want to settle down and have family.One day I'll want to settle down and have a family.
<div id="cssss">divdiv</div>
</div>
</body>
</html>
```
\#示例2
### 效果
```
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>標題</title>
<style>
/*tag*/
div {
height: 100px;
width: 100px;
background-color: #97c6a8;
border: 1px solid blue;
margin: 20px;
cursor:pointer;
}
/*[屬性選擇器]*/
/*class===div1*/
/*=== ==*/
/*div[class=div1]{
height:100px;
width:100px;
background-color:#ff6a00;
}*/
/*class 包含 div1*/
/*div[class~=div1]{
height:100px;
width:100px;
background-color:#ff6a00;
}*/
/*屬性以div開頭-*/
[data-name|=div] {
height: 100px;
width: 100px;
background-color: #ff6a00;
}
/*偽選擇器*/
div#div1:hover{
background-color: #c8458d;
}
/*內聯>id >class>tag>* */
</style>
</head>
<body>
<div data-name="div-1" class="div1" id="div1">
div1
</div>
<div data-name="div-2" class="div1div2">
div2
</div>
<div data-name="div-3" class="div2">
div3
</div>
<script>
//do
</script>
</body>
</html>
```
示例3
### 效果
```
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
padding:0;
margin:0;
}
.dd {
width: 100px;
height: 100px;
background-color: aqua;
/*margin: 20px;*/
text-align: center;
line-height:50px;
/*q1 垂直居中*/
vertical-align:middle;
float: left;
border: 2px solid red;
top:10px;
/*right
bottom
left*/
position:relative;
}
body {
/*font-family:*/
/*font-size:*/
/*font-weight*/
/*q*/
/*why font-color*/
color:aquamarine;
/*font-style*/
/*background:url('2.jpg') no-repeat aqua;*/
background-image: url('2.jpg');
background-color: aqua;
background-repeat: no-repeat;
}
#dv1 {
/*q2*/
margin:100px;
width: 200px;
height: 200px;
background-color: #ff0000;
/*margin-left:100px;*/
/*q3*/
/*margin-left:10px;*/
/*q3 position 個屬性的區別*/
/*position:;*/
/*style="z-index:9999"*/
/*position:absolute;*/
position:relative;
top:100px;
}
/*list-style*/
/*list-style*/
/*list-style-image*/
/*list-style-type*/
</style>
</head>
<body>
<div id="dv1"><div class="dd">2</div></div>
<ul>
<li></li>
</ul>
</body>
</html>
```
布局
### 效果
```
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.header,.container,.footer{
width:1200px;
}
div {
border: 1px solid red;
}
.header {
height: 100px;
background-color: #0099FF;
}
.container > div {
height: 200px;
float: left;
}
.ctn_left {
width: 25%;
background-color: #4cff00;
}
.ctn_main {
width: 49%;
background-color: #ff6a00;
}
.ctn_right {
width: 25%;
background-color: #0094ff;
}
.footer {
clear: both;
height: 100px;
background-color: #9999FF;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="container">
<div class="ctn_left">ctn_left</div>
<div class="ctn_main">ctn_main</div>
<div class="ctn_right">ctn_right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
```
導航
### 效果
```
![](image/screenshot_1473823754816.png
<!doctype html>
<!--doc document-->
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.container {
margin: 0 auto;
width: 400px;
height: 40px;
border: 1px solid blue;
}
.nav {
}
.nav > li {
float: left;
margin: 0 10px;
list-style-type: none;
}
/*.nav > li > span:hover + ul {
background-color: darkgray;
}*/
.nav > li:hover {
background-color: darkgray;
}
.nav > li:hover ul {
display:block;
}
.nav > li:hover ul>li:hover {
background-color: #b6ff00;
}
/*.nav > li :hover span {
background-color: blue;
}*/
.nav > li > ul {
padding: 0;
display:none;
}
.nav > li > ul li {
list-style-type: none;
}
</style>
</head>
<body>
<div class="container">
<ul class="nav">
<li>
<span>欄目一</span>
<ul>
<li>item1</li>
<li>item1</li>
<li>item1</li>
<li>item1</li>
</ul>
</li>
<li>欄目二</li>
<li>欄目三</li>
<li>欄目四</li>
<li>欄目五</li>
</ul>
</div>
</body>
</html>
```
作業1
模仿學校官網主頁(<http://cwnu.edu.cn/>)
[西華師范大學](http://cwnu.edu.cn/)
# 代碼
```
<html>
<head>
<meta charset="utf-8">
<title>西華師范大學</title>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
div {
/* border: 1px solid #555*/
}
.header {
height: 130px;
width: 1200px;
margin: 0 auto;
background-image: url(/assets/img/background-header.jpg);
}
.quick {
height: 130px;
background: url(/assets/img/header.jpg) no-repeat;
}
.quick a {
color: white;
font-size: 12px;
margin: 0 5px;
top: 20px;
left: 900px;
position: relative;
}
/*導航*/
.naver {
width: 1200px;
margin: 0 auto;
height: 30px;
background-color: #488DF3;
}
.naver a {
color: white;
}
.naver>ul>li>ul {}
.naver li {
list-style: none;
height: 30px;
line-height: 30px;
width: 90px;
text-align: center;
}
.naver>ul>li:hover {
background-color: #2a65b7;
}
.naver>ul>li> ul {
display: none;
}
.naver>ul>li> ul>li {
background-color: #71a7f2;
margin-top: 1px;
}
.naver>ul>li:hover ul {
display: block;
position: absolute;
}
.naver>ul>li:hover ul li {
display: block;
}
.naver>ul>li:hover ul>li:hover {
background-color: #2f4666;
}
.naver>ul {
width: 900px;
min-width: 900px;
margin: 0 auto;
}
.naver>ul>li {
float: left;
}
.main {
margin: 0 auto;
height: 530px;
width: 1100px;
}
.main-silder {
float: left;
margin-top: 5px;
height: 250px;
width: 897px;
}
.main-silder>img {
height: 240px;
width: 897px;
}
.main-naver {
margin-top: 1px;
float: left;
margin-left: 3px;
height: 250px;
width: 200px;
}
.main-naver img {
width: 190px;
}
.main-container {
clear: left;
height: 205px;
margin: 0 auto;
}
.news-item {
height: 200px;
width: 362px;
float: left;
background-color: #F5F5F5;
box-shadow: 3px 3px 5px #909090;
}
.news-item-footer {
text-align: right;
}
.news-item-footer a {
color: black;
font-size: 12px;
line-height: 180%;
font-weight: normal;
margin-right: 4px;
}
.news-list {
font-size: 10px;
line-height: 180%;
font-weight: normal;
padding-left: 20px;
}
.news-list a {
color: black;
}
.news-list a:hover {
color: orange;
text-decoration: underline;
}
.news-item-sdyw {
border-bottom-left-radius: 20px;
border-right: 1px solid #a0959b;
}
.news-list-sdyw li {
list-style-image: url(/assets/img/article-list-type.gif);
color: black;
}
.news-item-tzgg {
border-right: 1px solid #a0959b;
}
.news-item-xsjz {
border-bottom-right-radius: 20px;
}
.main-footer {
height: 40px;
}
.main-footer-item {
height: 40px;
width: 117px;
}
/*尾部*/
.footer {
height: 83px;
width: 1200px;
margin: 0 auto;
background-image: url(/assets/img/background-footer.jpg);
text-align: center;
}
.footer p {
cursor: pointer;
padding-top: 40px;
color: aliceblue;
}
</style>
</head>
<body>
<div class="header">
<div class="quick">
<a href="javascript:;">在校學生</a>
<a href="javascript:;">教職員工</a>
<a href="javascript:;">畢業校友</a>
</div>
</div>
<div class="naver">
<ul>
<li>
<a href="javascript:;">學校概況</a>
<ul>
<li><a href="javascript:;">學校簡介</a></li>
<li><a href="javascript:;">歷史沿革</a></li>
<li><a href="javascript:;">現任領導</a></li>
<li><a href="javascript:;">歷任領導</a></li>
<li><a href="javascript:;">校園風光</a></li>
<li><a href="javascript:;">校徽校歌</a></li>
<li><a href="javascript:;">校園全景</a></li>
<li><a href="javascript:;">機構設置</a></li>
</ul>
</li>
<li>
<a href="javascript:;">機構設置</a>
<ul>
<li><a href="javascript:;">機關單位</a></li>
<li><a href="javascript:;">院系設置</a></li>
<li><a href="javascript:;">教輔部門</a></li>
</ul>
</li>
<li>
<a href="javascript:;">人才培養</a>
<ul>
<li><a href="javascript:;">本科生教育</a></li>
<li><a href="javascript:;">研究生教育</a></li>
<li><a href="javascript:;">高職教育</a></li>
<li><a href="javascript:;">繼續教育</a></li>
</ul>
</li>
<li>
<a href="javascript:;">科學研究</a>
<ul>
<li><a href="javascript:;">科研管理</a></li>
<li><a href="javascript:;">科研機構</a></li>
<li><a href="javascript:;">師大學報</a></li>
</ul>
</li>
<li>
<a href="javascript:;">招生就業</a>
<ul>
<li><a href="javascript:;">本科生招生</a></li>
<li><a href="javascript:;">研究生招生</a></li>
<li><a href="javascript:;">高職招生</a></li>
<li><a href="javascript:;">就業信息</a></li>
</ul>
</li>
<li>
<a href="javascript:;">師資隊伍</a>
</li>
<li>
<a href="javascript:;">校園生活</a></li>
<li>
<a href="javascript:;">校友總會</a></li>
<li>
<a href="javascript:;">校園媒體</a>
<ul>
<li><a href="javascript:;">新聞中心</a></li>
<li><a href="javascript:;">師大校報</a></li>
<li><a href="javascript:;">視頻新聞</a></li>
<li><a href="javascript:;">校園微博</a></li>
</ul>
</li>
<li>
<a href="javascript:;">ENGLISH</a>
</li>
</ul>
</div>
<div class="main">
<div class="main-header">
<div class="main-silder" id="silder" data-idx="0" data-max-idx="4">
<img src="/assets/img/c1.jpg" />
<img style="display:none" src="/assets/img/c2.jpg" />
<img style="display:none" src="/assets/img/c3.jpg" />
<img style="display:none" src="/assets/img/c4.jpg" />
<img style="display:none" src="/assets/img/c5.jpg" />
</div>
<div class="main-naver">
<a href="javascript:;">
<img src="/assets/img/n1.jpg" />
</a>
<a href="javascript:;">
<img src="/assets/img/n2.jpg" />
</a>
<a href="javascript:;">
<img src="/assets/img/n3.jpg" />
</a>
<a href="javascript:;">
<img src="/assets/img/n4.jpg" />
</a>
<a href="javascript:;">
<img src="/assets/img/n5.jpg" />
</a>
<a href="javascript:;">
<img src="/assets/img/n6.jpg" />
</a>
</div>
</div>
<div class="main-container">
<div class="news-item news-item-sdyw">
<div>
<img src="/assets/img/sdyw.jpg" />
</div>
<div class="news-list news-list-sdyw">
<ul>
<li>
<a href="/school/detail">中國工程院院士雷清泉教授來校考察交流</a>
</li>
<li>
<a href="javascript:;">校領導到教育部社科中心匯報川陜革命根據地研究進展</a>
</li>
<li>
<a href="javascript:;">學校召開教學督導意見反饋會</a>
</li>
<li>
<a href="javascript:;">學校召開外籍教師教學工作會</a>
</li>
<li>
<a href="javascript:;">文學院舉辦“漢語國際化與推廣普通話”活動引關注</a>
</li>
<li>
<a href="javascript:;">我校侯怡玲教授研究成果受科技廳官網報道</a>
</li>
</ul>
</div>
<div class="news-item-footer">
<a href="javascript:;">……更多</a>
</div>
</div>
<div class="news-item news-item-tzgg">
<div>
<img src="/assets/img/tzgg.jpg" />
</div>
<div class="news-list news-list-tzgg">
<ul>
<li>
<a href="javascript:;">學校第四周主要會議安排</a>
</li>
<li>
<a href="javascript:;">西華師范大學推薦2017屆優秀應屆本科免初試攻讀...</a>
</li>
<li><a href="javascript:;">關于2016年中秋節放假的通知</a>
</li>
<li>
<a href="javascript:;">關于在全校教職工中開展“教師節、中秋節、國慶節”...</a>
</li>
<li>
<a href="javascript:;">轉：關于征集“高校紅色文化資源育人成果”的通知</a>
</li>
<li><a href="javascript:;">轉發《關于申報2016年度國家語委語言文字科研項...</a>
</li>
</ul>
</div>
<div class="news-item-footer">
<a href="javascript:;">……更多</a>
</div>
</div>
<div class="news-item news-item-xsjz">
<div>
<img src="/assets/img/xsjz.jpg" />
</div>
<div class="news-list news-list-xsjz">
<ul>
<li>
<a href="javascript:;">[趙勇][超導技術在磁浮列車中的應用][9-14]</a>
</li>
<li>
<a href="javascript:;">[李明江][南海問題：法律、實力與政治][8-31]</a>
</li>
<li>
<a href="javascript:;">[唐燈][1-Resilient Boolean Funct...</a>
</li>
<li>
<a href="javascript:;">[Sihem Mesnager][Codes from be...</a>
</li>
<li>
<a href="javascript:;">[黃大衛][榕小蜂從基因到基因組的跨域研究:皆...</a>
</li>
<li>
<a href="javascript:;">[Tristan G. Brown][清代南部檔案中的風水糾...</a>
</li>
</ul>
</div>
<div class="news-item-footer">
<a href="javascript:;">……更多</a>
</div>
</div>
</div>
<div class="main-footer">
<div>
<img src="/assets/img/main-footer-left.gif">
<img class="main-footer-item" src="/assets/img/a1.jpg">
<img class="main-footer-item" src="/assets/img/a2.jpg">
<img class="main-footer-item" src="/assets/img/a4.jpg">
<img class="main-footer-item" src="/assets/img/a5.jpg">
<img class="main-footer-item" src="/assets/img/a6.jpg">
<img class="main-footer-item" src="/assets/img/a7.jpg">
<img class="main-footer-item" src="/assets/img/a8.jpg">
<img class="main-footer-item" src="/assets/img/a9.jpg">
<img src="/assets/img/main-footer-right.gif">
</div>
</div>
</div>
<div class="footer">
<p>版 權 所 有 ? z x y s i l e n t</p>
</div>
<script>
function silder() {
var silede = document.getElementById('silder');
var imgs = silede.getElementsByTagName('img');
var index = silede.getAttribute('data-idx');
var maxindex = silede.getAttribute('data-max-idx');
imgs[index].style.display = 'none';
index++;
if (index > maxindex) {
index = 0;
}
silede.setAttribute('data-idx', index);
imgs[index].style.display = 'block';
}
window.onload = function() {
setInterval(silder, 2000);
}
</script>
</body>
</html>
```
