文档章节

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

o
 osc_fmg49rzg
发布于 2019/03/20 08:39
字数 2397
阅读 7
收藏 0

精选30+云产品,助力企业轻松上云!>>>

 

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

 

 

效果截图:

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
用HTML+CSS编写一个计科院网站首页的静态网页

用HTML+CSS编写一个计科院网站首页的静态网页 学号:201631062509 姓名:杨菓 1.观察计科院主页 网站所有图片可以从开发者工具中审查找到。 计科院静态网站并没有占满整个网页,而是在中间,...

osc_y8yehimr
2019/03/20
1
0
用HTML+CSS编写一个计科院网站首页的静态网页

用HTML+CSS编写一个计科院网站首页的静态网页 利用浏览器查看网页源代码,并将一些图片分门别类的下载到本地,然后删除javascript脚本。项目的文件目录 最终效果 百度云 链接: https://pan.b...

osc_y8yehimr
2019/03/20
2
0
用HTML+CSS实现一个计科院网站首页静态页面

思路: 首先观察我校计科院网站首页,按F12观察它的各个板块的布局。 然后用<div>从上到下从左到右一块一块仿照着来实现。 需要用到的图片全都从原本网站上保存下来使用。 效果: HTML代码(...

osc_tvqwfyak
2019/03/19
4
0
用HTML+CSS编写一个计科院网站首页的静态网页

先展示效果 单用html表格布局 源码如下 <!DOCTYPE html><html> </html> 下面是css+html <!DOCTYPE html><html> </html> css样式 *{ } .heading{ } .heading img{ }.wrapper{ } .nav{ }.nav ......

osc_giiz8kdh
2019/03/16
0
0
用HTML+CSS编写一个计科院网站首页的静态网页

由于能力的不足,这个网页还有很多功能未完善,比如图片的滚动,在学习了javascript后我会将其完善。 以下是几张成品和工程的截图: 以下是完整的HTML和CSS代码: 1 <!DOCTYPE html> 2 <htm...

osc_fmg49rzg
2019/03/20
2
0

没有更多内容

加载失败,请刷新页面

加载更多

dict.items()和dict.iteritems()有什么区别?

问题: Are there any applicable differences between dict.items() and dict.iteritems() ? dict.items()和dict.iteritems()之间是否有适用的区别? From the Python docs: 从Python文档中......

法国红酒甜
今天
20
0
R中“ =”和“ <-”赋值运算符有什么区别?

问题: What are the differences between the assignment operators = and <- in R? R中赋值运算符=和<-之间有什么区别? I know that operators are slightly different, as this example ......

fyin1314
今天
20
0
之间的区别 和

问题: I'm learning Spring 3 and I don't seem to grasp the functionality behind <context:annotation-config> and <context:component-scan> . 我正在学习Spring 3,并且似乎不太了解<......

javail
今天
15
0
业内首款,百度工业视觉智能平台全新亮相

本文作者:y****n 业内首款全国产化工业视觉智能平台——百度工业视觉智能平台亮相中国机器视觉展(Vision China),该平台所具有的核心AI能力完全自主可控,在质检、巡检等场景中具有高效、...

百度开发者中心
昨天
7
0
我们如何制作xkcd样式图? - How can we make xkcd style graphs?

问题: Apparently, folk have figured out how to make xkcd style graphs in Mathematica and in LaTeX . 显然,民间已经想出了如何在Mathematica和LaTeX中制作xkcd风格的图形。 Can we d......

富含淀粉
今天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部