[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> 元素。 ~~~ # 示例 #### 效果 ![](https://box.kancloud.cn/847e2d65f7a929c747603207e7f38f77_930x592.png) ~~~ <!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 ### 效果 ![](https://box.kancloud.cn/94f6b197cd8910a4437c7f463a50b875_428x408.png) ~~~ <!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 ### 效果 ![](https://box.kancloud.cn/eead5f3e78b393cd490448b6359c0a28_839x679.png) ~~~ <!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> ~~~ # 布局 ### 效果 ![](https://box.kancloud.cn/5a42bfe8acafc56048b9948b21722e0a_979x342.png) ~~~ <!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> ~~~ # 导航 ### 效果 ![](https://box.kancloud.cn/96012f8b41534e04dae9859943a9ab5e_529x193.png) ~~~ ![](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/) ![](https://box.kancloud.cn/3132a0573d6aeece63f743ce431c0481_1271x822.jpg) [源码](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> ~~~