6. CSS样式

CSS样式

　　1.一般样式：文字，字体，背景

　　2.布局样式：定位，浮动，显示

　　3.动画样式：渐变，过度，动画

布局：display   修改标签特性

　　　display：none   不站位

盒子模型

　　从内到外：内容，内边距，边距，外边距。（容：html、内边距：padding 、边框：border、外边框：magin）

　　　　　　   第一个子标签设margin时，会影响到父标签

浮动

　　<float>   先定义一个宽高确定的区域（要浮动的标签用div包起来，给div设宽高，设行高垂直居中）

页面布局顺序

　　页面布局时，先设置宽高，颜色等，再写内容

定位

　　 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>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp--</p>
                    <p class="wenben"> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp    本网讯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>图书馆&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;■</li>
            <li>信息公开&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;■</li>
            <li>招标采购&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;■</li>
            <li>办公系统&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;■</li>
            <li>邮件系统&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;■</li>
            <li>校园VPN&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;■</li>
            <li>在线学习&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;■</li>
            <li>站点导航&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;■</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>   调整层级

 

 

posted @ 2018-09-23 16:05  李训峰  阅读(117)  评论(0)  编辑  收藏  举报