用HTML+CSS编写一个计科院网站首页的静态网页

 

    
    
    


    
    

        
        

            
            

                
            
        
    
    
    

        

            
网站首页
            
学院概况
            
本科生教育
            
研究生教育
            
师资队伍
            
科学研究
            
学生工作
            
招生工作
            
实验中心
            
党建之窗
        
    
    
    

    
    

        
        

            

                
图片新闻
                
            
            
            

                

                

                    

                        

                            

                                
                            
                        
                    
                    

                        

                            

                                计算机科学学院隆重举行第八届“盛特杯”大学生课外...
                            
                        
                    
                
            
            
            
            

                

                    

                        
                            计算机科学学院举办2019年寒假留校学生新春
                            [02-01]
                        

                    
                    

                        
                            学院召开教职工大会学习传达中层干部大会精
                            [03-15]
                        
                    
                    

                        
                            计科院工会组织学院女教职工庆祝第109个“
                            [03-12]
                        
                    
                    

                        
                            学术讲座——人工智能改变我们的未来生活
                            [03-05]
                        
                    
                    

                        
                            计算机科学学院各年级辅导员集中走访学生寝
                            [01-21]
                        
                    
                    

                        
                            学院召开2018年度领导班子民主生活会
                            [02-14]
                        
                    
                
            
        
        
        

            

                
学术交流
                
            
            
            

                

                    

                        
                            人工智能改变我们的未来生活
                        
                    
                    

                        
                            计算时代的虚假信息传播
                        
                    
                    

                        
                            人工智能+：视界充满AI
                        
                    
                    

                        
                            零行列式策略及其网络演化动力学
                        
                    
                    

                        
                            视频遇上云服务
                        
                    
                    

                        
                            计科院关于举行2018年校庆论文报告会的通知
                        
                    
                
            
        
    
    
    

        
        

            

                
新闻速递
                
            
            

                

                    计算机科学学院举办2019年寒假留校学生新春团拜会
                
                
​在中华民族传统节日——春节即将到来之际，为让学院留校学生感受家的温暖，向他们传达学院的慰问和祝福。
                    2019年2月1日上午9时30分，计算机科学学院在明理楼B306会议室隆重举行2019年寒假留…[详细信息]
                

                    

                        
                            学院召开教职工大会学习传达中层干部大会精神 部署学院学期工作
                            03/15
                        
                    
                    

                        
                            计科院工会组织学院女教职工庆祝第109个“三八妇女节”
                            03/12
                        
                    
                    

                        
                            学术讲座——人工智能改变我们的未来生活
                            03/05
                        
                    
                    

                        
                            计算机科学学院各年级辅导员集中走访学生寝室
                            01/21
                        
                    
                    

                        
                            学院召开2018年度领导班子民主生活会
                            01/14
                        
                    
                    

                        
                            计科院与川庆安检院技术交流大会
                            01/10
                        
                    
                
            
        
        
        

            

                
党建动态
                
            
            
            

                

                    

                        
                            学院召开教职工大会学习传达中层干部大会精神 部署学院学期工作
                        
                    
                    

                        
                            学院召开2018年领导班子民主生活会
                        
                    
                    

                        
                            刘翔同志任计算机科学学院党委副书记、纪委书记
                        
                    
                    

                        
                            学院党委组织师生收看庆祝改革开放40周年大会
                        
                    
                    

                        
                            【审核评估】学院召开本科教学工作审核评估办学定位与目标宣讲大会
                        
                    
                    

                        
                            【聚焦评估】学院召开本科教学工作审核评估工作会
                        
                    
                    

                        
                            学院党委开展迎校庆主题党日活动
                        
                    
                    

                        
                            学院党委组织收看2018年全国科学道德和学风建设宣讲教育报告会
                        
                    
                
            
        
    
    
    

        
        

            

                
新闻速递
                
            
            

                

                    

                        
                            自组团出访前公示信息表（彭博）
                        
                    
                    

                        
                            计算机科学学院2019年春季学期开学教学准备及检查工作实施方案
                        
                    
                    

                        
                            西南石油大学计算机科学学院关于举行学院2019年春季田径运动会的通知
                        
                    
                    

                        
                            2018年秋季学期期末考试情况总结
                        
                    
                    

                        
                            计算机科学学院2018年度教职工考核优秀名单公示
                        
                    
                    

                        
                            国际学术会议（ICCIS2019）征稿通知
                        
                    
                    

                        
                            计算机科学学院领导班子2018年度民主生活会征求意见
                        
                    
                    

                        
                            关于表彰计算机科学学院2018-2019学年秋季学期“最美寝室”的通知
                        
                    
                
            
        
        
        

            

                
专题列表
                
            
            
            

                

                    

                        
                            中美联合高性能和大数据计算实验室
                        
                    
                    

                        
                            石油工程计算机模拟技术重点实验室
                        
                    
                    

                        
                            思科网络技术学院教师培训中心
                        
                    
                
            
        
    
    
    

        

            Copyright© 2018 All Rights Reserved. 西南石油大学计算机科学学院
        

    

　

body{
    margin: 0;
}
.top{
    width: 100%;
    height:112px;
    background:  no-repeat url("../img/top-bg.jpg") center;
}
.serach{
    width: 287px;
    height: 38px;
    background: url("../img/top_hunt_bg.png") no-repeat;
    margin-top: 32px;
    margin-right: 320px;
    float: right;
}
.serach_text{
    float: left;
    width: 195px;
    margin-top: 2px;
    margin-left: 15px;
    height: 30px;
    line-height: 30px;
    color: rgb(200,200,200);
    outline: none;
    border: medium none;
}
.serach_pic{
    height: 18px;
    float: right;
    margin-top: 6px;
}
.btnSubmit{
    width: 22px;
    height: 22px;
    margin-right: 10px;
    margin-top: 2px;
    outline:none;
    cursor: pointer;
    background: url("../img/top_hunt.png") no-repeat;
    border: medium none;
}
.navagator{
    background: #0b6cb8;
    height: 50px;
    line-height: 50px;
    margin: 0 auto;
    width: 974px;
}
ul{
   margin: 0;
}
.top_li{
    list-style: none;
    color: #fff;
    font-size: 15px;
    float: left;
    padding: 0 15px;
}
div{
    display: block;
}
.picNews{
    width: 974px;
    height: 195px;
    margin: 20px auto;
    background: url("../img/welcome.jpg") no-repeat center;
}
.contentOne{
    height: 268px;
    width: 974px;
    margin: 0 auto;
}
.news{
    height: 100%;
    width: 644px;
    float: left;
    padding: 0 10px 0 0;
}
.newsTitle{
    width: 100%;
    height: 34px;
    line-height: 34px;
    background: #ddd;
}
h2{
    width: 74px;
    background: #0b6cb8;
    color: #fff;
    font-size: 16px;
    padding: 0 5px;
    float: left;
    margin-top: 0;
    margin-bottom: 0;
    font-weight: normal;
}
.picSpan{
    float: right;
    display: block;
    padding: 0 5px;
}
table{
    width: 100%;
    height: 200px;
}
.news_pictuure{
    width: 310px;
    height: 174px;
    overflow: hidden;
}
.pic_text{
    line-height: 220%;
    color: #222222;
    font-size: 9pt;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}
.news_list{
    width: 334px;
    height: 180px;
    margin-top: 12px;
    float: right;
}
.item{
    overflow: hidden;
    font-size: 14px;
    line-height: 30px;
    height: 30px;
    width: 100%;
    background: url(../img/xdd.png) no-repeat 0px 14px;
    text-indent: 12px;
}
.item a{
    width: 314px;
    height: 30px;
    text-decoration: none;
    display: block;
}
.item em{
    overflow: hidden;
    color: #5c5c5c;
    width: 250px;
    float: left;
    height: 30px;
    font-style: normal;
    text-overflow:ellipsis
}
.item span{
    width: 60px;
    height: 30px;
    color: #5c5c5c;
}
.communicate{
    width: 320px;
    height: 226px;
    float: right;
}
.contentTwo{
    width: 996px;
    height: 324px;
    margin: 0 auto;
}
.newsPass{
    width: 644px;
    height: 304px;
    padding: 0 10px;
    float: left;
}
.news_list_2{
    width: 644px;
    height: 258px;
    margin-top: 12px;
    float: right;
}
.news_list_2 h3{
    margin: 0;
    padding: 0;
    text-indent: 12px;
}
.news_list_2 h3 a{
    width: 422px;
    height: 25px;
    color: #0b6cb8;
    font-size: 18px;
    cursor: pointer;

}
.news_list_2 p{
    margin-top: 4px;
    font-size: 12px;
    color: #999999;
    /*首行缩进两个字符*/
    text-indent: 2em;
    line-height: 22px;
    padding-bottom: 4px;
    /*下划线*/
    border-bottom: 1px dashed #eeeeee;
}
.item_2{
    overflow: hidden;
    font-size: 14px;
    line-height: 30px;
    height: 30px;
    width: 644px;
    background: url(../img/xdd.png) no-repeat 0px 14px;
    text-indent: 12px;
}
li.item_2 a{
    width: 644px;
    height: 30px;
    text-decoration: none;
    display: block;
}
.item_2 a em{
    color: #5c5c5c;
    width: 570px;
    float: left;
    height: 30px;
    font-style: normal;
    text-overflow:ellipsis
}
.item_2 a span{
    width: 66px;
    height: 30px;
    color: #c3c3c3;
    float: right;
}
.party{
    width: 332px;
    height: 286px;
    float: right;
}
.contentThree{
    width: 996px;
    height: 296px;
    margin: 0 auto;
}
.inform{
    width: 644px;
    height: 304px;
    padding: 0 10px;
    float: left;
}
.subject{
    width: 332px;
    height: 126px;
    float: right;
}
.footer{
    width: 100%;
    height: 60px;
    background: blue;
    color:black;
    font-size: 13px;
    line-height: 60px;
}
.footer p{
    text-align: center;
}

 

　

效果截图：