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

时间：2022-08-18 15:10:01
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>计算机科学学院</title>

    <link href="css/bgcss.css" rel="stylesheet">

</head>

<body>

    <!--顶部图片部分-->

    <div class="top">

        <!--搜索部分-->

        <div class="serach">

            <input type="text" value="请输入关键字搜索" class="serach_text">

            <div class="serach_pic">

                <input type="submit" class="btnSubmit" value style="cursor: hand">

            </div>

        </div>

    </div>

    <!-- 导航栏部分-->

    <div class="navagator">

        <ul>

            <li class="top_li">网站首页</li>

            <li class="top_li">学院概况</li>

            <li class="top_li">本科生教育</li>

            <li class="top_li">研究生教育</li>

            <li class="top_li">师资队伍</li>

            <li class="top_li">科学研究</li>

            <li class="top_li">学生工作</li>

            <li class="top_li">招生工作</li>

            <li class="top_li">实验中心</li>

            <li class="top_li">党建之窗</li>

        </ul>

    </div>

    <!--轮播图部分-->

    <div class="picNews"></div>

    <!--图片新闻与学术交流部分-->

    <div class="contentOne">

        <!--图片新闻-->

        <div class="news">

            <div class="newsTitle">

                <h2>图片新闻</h2>

                <span class="picSpan"><img src="img/more.png"></span>

            </div>

            <!--左边图片部分,实现方式为table标签-->

            <div class="" style="width: 310px;margin: 12px 0 0 0;display: block;float: left">

                <table class="">

                <tbody>

                    <tr>

                        <td>

                            <div class="news_pictuure">

                                <img src="img/news_pic2.jpg" style="width: 310px;height: 174px">

                            </div>

                        </td>

                    </tr>

                    <tr>

                        <td>

                            <div class="news_intro" align="center">

                                <a href="#" class="pic_text" target="_blank" style="text-decoration: none;">计算机科学学院隆重举行第八届“盛特杯”大学生课外...</a>

                            </div>

                        </td>

                    </tr>

                </tbody>

            </table>

            </div>

            <!--右边新闻列表部分-->

            <div class="news_list">

                <ul style="width: 314px;height: 180px;padding: 0 0 0 20px">

                    <li class="item">

                        <a target="_blank" href="#">

                            <em>计算机科学学院举办2019年寒假留校学生新春</em>

                            <span>[02-01]</span>

                        </a>

                    </li>

                    <li class="item">

                        <a target="_blank" href="#">

                            <em>学院召开教职工大会学习传达中层*大会精</em>

                            <span>[03-15]</span>

                        </a>

                    </li>

                    <li class="item">

                        <a target="_blank" href="#">

                            <em>计科院工会组织学院女教职工庆祝第109个“</em>

                            <span>[03-12]</span>

                        </a>

                    </li>

                    <li class="item">

                        <a target="_blank" href="#">

                            <em>学术讲座——人工智能改变我们的未来生活</em>

                            <span>[03-05]</span>

                        </a>

                    </li>

                    <li class="item">

                        <a target="_blank" href="#">

                            <em>计算机科学学院各年级辅导员集中走访学生寝</em>

                            <span>[01-21]</span>

                        </a>

                    </li>

                    <li class="item">

                        <a target="_blank" href="#">

                            <em>学院召开2018年度领导班子*生活会</em>

                            <span>[02-14]</span>

                        </a>

                    </li>

                </ul>

            </div>

        </div>

        <!--学术交流-->

        <div class="communicate">

            <div class="newsTitle">

                <h2>学术交流</h2>

                <span class="picSpan"><img src="img/more.png"></span>

            </div>

            <!--右边新闻列表部分-->

            <div class="news_list">

                <ul style="width: 314px;height: 180px;padding: 0 0 0 20px">

                    <li class="item">

                        <a target="_blank" href="#">

                            <em>人工智能改变我们的未来生活</em>

                        </a>

                    </li>

                    <li class="item">

                        <a target="_blank" href="#">

                            <em>计算时代的虚假信息传播</em>

                        </a>

                    </li>

                    <li class="item">

                        <a target="_blank" href="#">

                            <em>人工智能+：视界充满AI</em>

                        </a>

                    </li>

                    <li class="item">

                        <a target="_blank" href="#">

                            <em>零行列式策略及其网络演化动力学</em>

                        </a>

                    </li>

                    <li class="item">

                        <a target="_blank" href="#">

                            <em>视频遇上云服务</em>

                        </a>

                    </li>

                    <li class="item">

                        <a target="_blank" href="#">

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

                        </a>

                    </li>

                </ul>

            </div>

        </div>

    </div>

    <!--新闻速递与党建动态-->

    <div class="contentTwo">

        <!--新闻速递-->

        <div class="newsPass">

            <div class="newsTitle">

                <h2>新闻速递</h2>

                <span class="picSpan"><img src="img/more.png"></span>

            </div>

            <div class="news_list_2">

                <h3>

                    <a>计算机科学学院举办2019年寒假留校学生新春团拜会</a>

                </h3>

                <p>​在中华民族传统节日——春节即将到来之际，为让学院留校学生感受家的温暖，向他们传达学院的慰问和祝福。

                    2019年2月1日上午9时30分，计算机科学学院在明理楼B306会议室隆重举行2019年寒假留…<span style="color: #0b6cb8">[详细信息]</span></p>

                <ul style="width: 644px;height: 286px;padding-left: 0">

                    <li class="item_2">

                        <a target="_blank" href="#">

                            <em>学院召开教职工大会学习传达中层*大会精神 部署学院学期工作</em>

                            <span>03/15</span>

                        </a>

                    </li>

                    <li class="item_2">

                        <a target="_blank" href="#">

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

                            <span>03/12</span>

                        </a>

                    </li>

                    <li class="item_2">

                        <a target="_blank" href="#">

                            <em>学术讲座——人工智能改变我们的未来生活</em>

                            <span>03/05</span>

                        </a>

                    </li>

                    <li class="item_2">

                        <a target="_blank" href="#">

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

                            <span>01/21</span>

                        </a>

                    </li>

                    <li class="item_2">

                        <a target="_blank" href="#">

                            <em>学院召开2018年度领导班子*生活会</em>

                            <span>01/14</span>

                        </a>

                    </li>

                    <li class="item_2">

                        <a target="_blank" href="#">

                            <em>计科院与川庆安检院技术交流大会</em>

                            <span>01/10</span>

                        </a>

                    </li>

                </ul>

            </div>

        </div>

        <!--党建动态-->

        <div class="party">

            <div class="newsTitle" style="width: 320px">

                <h2>党建动态</h2>

                <span class="picSpan"><img src="img/more.png"></span>

            </div>

            <!--右边新闻列表部分-->

            <div class="news_list">

                <ul style="width: 314px;height: 180px;padding: 0 0 0 20px">

                    <li class="item">

                        <a target="_blank" href="#">

                            <em>学院召开教职工大会学习传达中层*大会精神 部署学院学期工作</em>

                        </a>

                    </li>

                    <li class="item">

                        <a target="_blank" href="#">

                            <em>学院召开2018年领导班子*生活会</em>

                        </a>

                    </li>

                    <li class="item">

                        <a target="_blank" href="#">

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

                        </a>

                    </li>

                    <li class="item">

                        <a target="_blank" href="#">

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

                        </a>

                    </li>

                    <li class="item">

                        <a target="_blank" href="#">

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

                        </a>

                    </li>

                    <li class="item">

                        <a target="_blank" href="#">

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

                        </a>

                    </li>

                    <li class="item">

                        <a target="_blank" href="#">

                            <em>学院党委开展迎校庆主题党日活动</em>

                        </a>

                    </li>

                    <li class="item">

                        <a target="_blank" href="#">

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

                        </a>

                    </li>

                </ul>

            </div>

        </div>

    </div>

    <!--通知公告与专题列表-->

    <div class="contentThree">

        <!--通知公告-->

        <div class="inform">

            <div class="newsTitle">

                <h2>新闻速递</h2>

                <span class="picSpan"><img src="img/more.png"></span>

            </div>

            <div class="news_list_2">

                <ul style="width: 644px;height: 280px;padding-left: 0">

                    <li class="item_2">

                        <a target="_blank" href="#">

                            <em>自组团出访前公示信息表（彭博）</em>

                        </a>

                    </li>

                    <li class="item_2">

                        <a target="_blank" href="#">

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

                        </a>

                    </li>

                    <li class="item_2">

                        <a target="_blank" href="#">

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

                        </a>

                    </li>

                    <li class="item_2">

                        <a target="_blank" href="#">

                            <em>2018年秋季学期期末考试情况总结</em>

                        </a>

                    </li>

                    <li class="item_2">

                        <a target="_blank" href="#">

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

                        </a>

                    </li>

                    <li class="item_2">

                        <a target="_blank" href="#">

                            <em>国际学术会议（ICCIS2019）征稿通知</em>

                        </a>

                    </li>

                    <li class="item_2">

                        <a target="_blank" href="#">

                            <em>计算机科学学院领导班子2018年度*生活会征求意见</em>

                        </a>

                    </li>

                    <li class="item_2">

                        <a target="_blank" href="#">

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

                        </a>

                    </li>

                </ul>

            </div>

        </div>

        <!--专题列表-->

        <div class="subject">

            <div class="newsTitle" style="width: 320px">

                <h2>专题列表</h2>

                <span class="picSpan"><img src="img/more.png"></span>

            </div>

            <!--右边新闻列表部分-->

            <div class="news_list">

                <ul style="width: 314px;height: 180px;padding: 0 0 0 20px">

                    <li class="item">

                        <a target="_blank" href="#">

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

                        </a>

                    </li>

                    <li class="item">

                        <a target="_blank" href="#">

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

                        </a>

                    </li>

                    <li class="item">

                        <a target="_blank" href="#">

                            <em>思科网络技术学院教师培训中心</em>

                        </a>

                    </li>

                </ul>

            </div>

        </div>

    </div>

    <!--底部信息-->

    <div class="footer">

        <p>

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

        </p>

    </div>

</body>

</html>

　

body{

    margin:;

}

.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:;

}

.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:;

    margin-bottom:;

    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:;

    padding:;

    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;

}

　

效果截图：

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

相关文章