CSS样式
1.一般样式：文字，字体，背景
2.布局样式：定位，浮动，显示
3.动画样式：渐变，过度，动画
布局：display 修改标签特性
display：none 不站位
盒子模型
从内到外：内容，内边距，边距，外边距。（容：html、内边距：padding 、边框：border、外边框：magin）
第一个子标签设margin时，会影响到父标签
浮动
<float> 先定义一个宽高确定的区域（要浮动的标签用div包起来，给div设宽高，设行高垂直居中）
扫描二维码关注公众号，回复：
3307538 查看本文章
页面布局顺序
页面布局时，先设置宽高，颜色等，再写内容
定位
1.position 正确格式 position：定位 （加 top、left、right、buttom）
2. fixed 绝对定位（相对窗口定位） 自身位置没有了
3.absolute 绝对定位 （相对body）
他会相对于最近的有position属性的父标签定位 最上层就是body
4. relative 相对定位 有自身位置，用来微调
<!doctype html> <html> <head> <meta charset="utf-8"> <title>理工大学</title> <link rel="stylesheet" href="daxue.css"> </head> <body> <div style="width: 1050px; height: auto; margin:auto"> <!--头部--> <div id="head"> <img src="../新建文件夹/山山东理工大学.png" height="150px"> <img src="../新建文件夹/english-bg.jpg" id="english"> </div> <div id="right"> <div id="shang"> <ul> <li>在校生</li> <li>+</li> <li>教职工</li> <li>+</li> <li>考生</li> <li>+</li> <li>校友</li> <li>+</li> <li>访客</li> <li>+</li> </ul> </div> <div id="xia"> <input type="text"> <img src="../新建文件夹/sous-bg.jpg" height="30px"> </div> </div> <!--导航--> <div id="navigation"> <ul> <li>首页</li> <li>新闻网</li> <li>学校概况</li> <li>机构设置</li> <li>师资队伍</li> <li>科学研究</li> <li>人才培养</li> <li>招生就业</li> <li>大学文化</li> <li>国际交流</li> <li>校友联谊</li> </ul> </div> </div> <!--滚动图片--> <div id="gundong"> <img src="../新建文件夹/nanwangshien.jpg"> </div> <!--模块--> <div id="zero" style="margin:20px auto 0; height: auto" class="clearfix"> <div id="one"> </div> <div id="two"> <div id="a1"> <div class="qianzhi">学校要闻</div> <div class="houzhi">[更多]</div> <div class="xiahuaxian"> <img src="../新建文件夹/border-1.jpg"> </div> <h4 class="biaoti">学校举办2018年暑期工作研讨班</h4> <p>                                  --</p> <p class="wenben">        本网讯8月31日至9月1日上午，学校在杏园北楼二层会议室举办2018年暑期工作研讨班，认真学习贯彻上级有关会议精神，准确把握新时代高等教育...[详细] </p> <div id="juli"> <ul> <li> <div class="neirong">纪念改革开放40周年作品征集启事</div> <div class="shijian">0504</div> </li> <li> <div class="neirong">争做五有人才 开创美好未来</div> <div class="shijian">0910</div> </li> <li> <div class="neirong">学校召开内部控制领导小组会议</div> <div class="shijian">0910</div> </li> <li> <div class="neirong">智能电网实验室被认定为山东省工程实验室</div> <div class="shijian">0906</div> </li> <li> <div class="neirong">学校召开迎新工作协调会</div> <div class="shijian">0905</div> </li> <li> <div class="neirong">学校召开迎新工作协调会</div> <div class="shijian">0904</div> </li> </ul> </div> </div> <div id="a2"> <div class="qianzhi">媒体报道</div> <div class="houzhi">[更多]</div> <div class="xiahuaxian"></div> <img src="../新建文件夹/border-1.jpg"> <div id="julia2"> <ul> <li> <div class="neirong"> <span class="redbiaoti">【领导科学报】</span>吕传毅：明规矩 细分工 多沟通 ...</div> </li> <li> <div class="neirong"><span class="redbiaoti">【山东高校思政】 </span>全面开创新时代高校工作的新局... </div> </li> <li> <div class="neirong"><span class="redbiaoti">【凤凰网】</span>山东理工大学稷上星火实践团献歌... .</div> </li> <li> <div class="neirong"><span class="redbiaoti">【鲁中网】</span>新生报到 山东理工大学花样迎新 </div> </li> </ul> </div> </div> </div> <div id="three"> <div id="b1"> <div class="qianzhi">图说理工</div> <div class="xiahuaxian"></div> <img src="../新建文件夹/border-1.jpg"> <img src="../新建文件夹/xinwen.jpg" height="240px" width="100%"> </div> <div id="b2"> <div class="qianzhi">综合新闻</div> <div class="houzhi">[更多]</div> <div class="xiahuaxian"></div> <img src="../新建文件夹/border-1.jpg"> <div id="julib2"> <ul> <li> <div class="neirong">2018年“清廉如水”文化作品评选揭晓</div> </li> <li> <div class="neirong">稷下学宫与柏拉图学园高峰论坛筹备协调会举行</div> </li> <li> <div class="neirong">我校学子在第六届全国大学生农建竞赛中获佳绩</div> </li> <li> <div class="neirong">我校272名师范生踏上实习支教征程</div> </li> <li> <div class="neirong">水利部县域节水检查组来校检查节水工作</div> </li> <li> <div class="neirong">“理工青年”网获中国大学生寒假社会实践金奖</div> </li> <li> <div class="neirong">第九期“青年先锋”学生骨干培训班启动</div> </li> <li> <div class="neirong">学校部署教育服务新旧动能转换申报工作</div> </li> </ul> </div> </div> </div> <div id="four"> <div id="c1"> <div class="qianzhi">学术报道</div> <div class="houzhi">[更多]</div> <div class="xiahuaxian"></div> <img src="../新建文件夹/border-1.jpg"> <div class="c1juli"> <div> <img src= "../新建文件夹/sj20180914.png"> <div class="c1neirong"> 台湾诉愿制度及未来的发展...<br> <span class="blackzi">主讲:刘建宏教授<br> 地点:2号教学楼323 <br></span> </div> </div> </div> <div class="c1juli"> <div> <img src= "../新建文件夹/sj20180913.png"> <div class="c1neirong"> 过渡金属氧化物电子配置环...<br> <span class="blackzi">主讲:李文献教授 <br> 地点:13号教学楼404 <br></span> </div> </div> </div> <div class="c1juli"> <div> <img src= "../新建文件夹/sj20180913.png"> <div class="c1neirong"> 强磁场在功能材料制备中的...<br> <span class="blackzi">主讲:李瑛教授 <br> 地点:13号教学楼404 <br></span> </div> </div> </div> <div class="c1juli"> <div> <img src= "../新建文件夹/sj201809012.png"> <div class="c1neirong"> 基于离子液体的新能源材料<br> <span class="blackzi">主讲:张世国教授 <br> 地点:13号教学楼404<br></span> </div> </div> </div> </div> <div id="c2"> <div class="qianzhi">专题·公告 </div> <div class="houzhi">[更多]</div> <div class="xiahuaxian"></div> <img src="../新建文件夹/border-1.jpg"> <div id="julic2"> <ul> <li> <div class="neirong">首届国际青年学者泰山论坛邀请函</div> </li> <li> <div class="neirong">山东理工大学“两学一做”学习教育网站</div> </li> <li> <div class="neirong">诚聘海内外高层次人才启事</div> </li> <li> <div class="neirong">山东理工大学“一精神”“一规划”专题</div> </li> </ul> </div> </div> </div> <div id="five"> </div> </div> <!--底部--> <div id="bottom"> <ul> <li>图书馆 ■</li> <li>信息公开 ■</li> <li>招标采购 ■</li> <li>办公系统 ■</li> <li>邮件系统 ■</li> <li>校园VPN ■</li> <li>在线学习 ■</li> <li>站点导航 ■</li> </ul> </div> <div> <img src="../新建文件夹/bottomtu.png"> </div> </body> </html>
*{ margin: 0px; padding: 0px; } .clearfix:before, .clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } #head{ width: 100%; height: 120px; position: relative; border-bottom: 32px solid #D1CECE } #english{ position: absolute; top: 82px; left: 425px; } #right{ width: 1000px; height: 120px; position: absolute; top: 0; right: 0; } #shang li{ list-style: none; margin-right: 3px; float: left; font-size: 15px; } #shang ul{ position: absolute; top: 39px; right: 177px; } #xia{ position: absolute; top: 61px; right: 177px; } #xia input{ height: 28px; } #xia img{ position: relative; top: 10px; right: 10px; } #navigation{ width: 100%; height: 50px; } #navigation li{ float: left; list-style: none; margin-right: 10px; padding-left: 21px; } #gundong img{ height: 280px; width: 100%; } #zero{ width: 100%; height: 2000px; } #one{ width: 12.5%; height: 600px; background-color: white; float: left; } #two{ width: 25%; height: 600px; background-color:red; float: left; } #three{ width: 25%; height: 600px; background-color: yellow; float: left; } #four{ width: 25%; height: 600px; background-color: blue; float: left; } #five{ width: 12.5%; height: 600px; float: left; } #a1{ width: 100%; height: 420px; background-color: white; position: relative } #a2{ width: 100%; height: 180px; background-color: white; } #b1{ width: 100%; height: 300px; background-color: white; } #b2{ width: 100%; height: 300px; background-color: white; } #c1{ width: 100%; height: 420px; background-color: white; } #c2{ width: 100%; height: 180px; background-color: white; } .qianzhi{ float: left } .houzhi{ float: right; margin-right: 50px; font-size:13px; color: red; } .biaoti{ text-align: center; color: skyblue; } .wenben{ font-size: 12px; } .neirong{ font-size: 12px; float: left; line-height: 21px; } .shijian{ font-size: 12px; float: right; } #juli li{ padding-top: 20px; padding-right: 10px; } #julia2{ padding-top: 10px; line-height: 33px; } #julib2{ padding-left: 25px; line-height:32px; } #julic2{ line-height: 35px; padding-left: 30px; } .c1neirong{ float: right; font-size: 12px; padding-right: 110px; line-height: 20px; } .c1juli{ line-height: 88px; padding-left: 18px; } .redbiaoti{ color: red } .blackzi{ font-weight: 900 } #bottom{ width: 100%; height: 60px; border-top: 3px solid #D1CECE; } #bottom li{ float: left; list-style: none; margin-top: 25px; margin-right: -153px; margin-left: 175px; }
<index> 调整层级