[TOC]
* * * * *
## 用例源码
[点击下载](http://pan.baidu.com/s/1bp1eGxD)
# 选择器
~~~
选择器 示例 描述
.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> 元素。
~~~
# 示例
#### 效果
~~~
<!DOCTYPE html>
<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
~~~
<!DOCTYPE html>
<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
### 效果
~~~
<!DOCTYPE html>
<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/)
[源码](http://pan.baidu.com/s/1o8k1qum)
## 代码
~~~
<!DOCTYPE html>
<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>
~~~
