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

其他 2019-03-16 17:28:28 阅读次数: 0

先展示效果

单用html表格布局

源码如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>西南石油大学-计算机科学学院</title>
    </head>
    <body>
        <table width="100%">
            <tr width="1000px" align="center">
                <td><img src="logo与标题.png" alt="图片源不存在" width="1000px"/></td>
            </tr>
            
            <tr width="1000px" align="center">
                <td>
                    <table align="center" width="1000px" bgcolor="#0066CC" height="50px">
                        <tr>
                            <td><font color="white">网站首页</font></td>
                            <td><font color="white">学校概况</font></td>
                            <td><font color="white">本科生教育</font></td>
                            <td><font color="white">研究生教育</font></td>
                            <td><font color="white">师资队伍</font></td>
                            <td><font color="white">科学研究</font></td>
                            <td><font color="white">学生工作</font></td>
                            <td><font color="white">招生工作</font></td>
                            <td><font color="white">实验中心</font></td>
                            <td><font color="white">党建之窗</font></td>
                        </tr>
                    </table>
                </td>
            </tr>
            
            <tr width="1000px" align="center">
                <td>
                    <img src="展示图.png" width="1000px"/>
                </td>
            </tr>
            
            <tr width="1000px">
                <td>
                    <table align="center" width="1000px">
                        <tr><td colspan="3" height="10px"></td></tr>
                        
                        <tr>
                            <td width="700px">
                                <table height="300px">
                                    <tr height="40px">
                                        <td>
                                            <table width="700px" height="40px">
                                                <tr>
                                                <td bgcolor="#0066CC" align="center"><font color="white">图片新闻</font></td>
                                                <td align="right" bgcolor="#969696" width="600px"><font color="black" size="1">MORE&gt;&gt;</font></td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <table width="700px">
                                                <tr>
                                                    <td><img src="file:///C:/Users/tyx666/Pictures/QQ浏览器截图/QQ浏览器截图20190309214617.png"/></td>
                                                    <td>
                                                        <ul type="square">
                                                            <li>计算机科学学院举办2019年寒假留... [02-01]</li>
                                                            <li>学术讲座————人工智能... [03-05]</li>
                                                            <li>计算机科学学院辅导员... [01-21]</li>
                                                        </ul>
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            
                            <td width="30px"></td>
                            
                            <td width="290px">
                                <table height="300px" width="290px">
                                    <tr height="40px">
                                        <td>
                                            <table width="290px" height="40px">
                                                <tr>
                                                <td bgcolor="#0066CC" align="center"><font color="white">学术交流</font></td>
                                                <td align="right" bgcolor="#969696" width="180px"><font color="black" size="1px">MORE&gt;&gt;</font></td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <table width="290px">
                                                <tr>
                                                    <td>
                                                        <ul type="square">
                                                            <li>人工智能改变我们的未来生活</li>
                                                            <li>计算时代的虚假信息传播</li>
                                                            <li>人工智能+：视界充满AI</li>
                                                            <li>零行列式策略及其网络演化动力学</li>
                                                            <li>视频遇上云服务</li>
                                                            <li>计科院关于举行2018年校庆论文报告会的...</li>
                                                        </ul>
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        
                        <tr><td colspan="3" height="10px"></td></tr>
                        
                        <tr>
                            <td width="700px">
                                <table height="300px">
                                    <tr height="40px">
                                        <td>
                                            <table width="700px" height="40px">
                                                <tr>
                                                <td bgcolor="#0066CC" align="center"><font color="white">新闻速递</font></td>
                                                <td align="right" bgcolor="#969696" width="600px"><font color="black" size="1px">MORE&gt;&gt;</font></td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <table width="700px">
                                                <tr>
                                                    <td>
                                                        <p><font color="#0066CC" size="4">计算机科学学院举办2019年寒假留校学生新春团拜会</font></p>
                                                        <font color="#C0C0C0" size="1">在中华民族传统节日——春节即将到来之际，为让学院留校学生感受家的温暖，向他们传达学院的慰问和祝福。
                                                        2019年2月1日上午9时30分，计算机科学学院在明理楼B306会议室隆重举行2019年寒假留…</font>
                                                        <ul type="square">
                                                            <li>学术讲座——人工智能改变我们的未来生活 01/21</li>
                                                            <li>计算机科学学院各年级辅导员集中走访学生寝室 01/14</li>
                                                            <li>计科院与川庆安检院技术交流大会01/08</li>
                                                            <li>计算机科学学院分年级召开期末年级大会01/04</li>
                                                            <li>计算机科学学院隆重举行第八届“盛特杯”大学生课外科研立项活动成果展 01/14</li>
                                                        </ul>
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            
                            <td width="30px"></td>
                            
                            <td width="290px">
                                <table height="300px" width="290px">
                                    <tr height="40px">
                                        <td>
                                            <table width="290px" height="40px">
                                                <tr>
                                                <td bgcolor="#0066CC" align="center"><font color="white">党建动态</font></td>
                                                <td align="right" bgcolor="#969696" width="180px"><font color="black" size="1px">MORE&gt;&gt;</font></td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <table width="290px">
                                                <tr>
                                                    <td>
                                                        <ul type="square">
                                                            <li>学院召开2018年领导班子民主生活会</li>
                                                            <li>刘翔同志任计算机科学学院党委副书记、...</li>
                                                            <li>学院党委组织师生收看庆祝改革开放40周...</li>
                                                            <li>【审核评估】学院召开本科教学工作审核...</li>
                                                            <li>【聚焦评估】学院召开本科教学工作审核...</li>
                                                        </ul>
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        
                        <tr><td colspan="3" height="10px"></td></tr>
                        
                        <tr>
                            <td width="700px">
                                <table height="300px">
                                    <tr height="40px">
                                        <td>
                                            <table width="700px" height="40px">
                                                <tr>
                                                <td bgcolor="#0066CC" align="center"><font color="white">通知公告</font></td>
                                                <td align="right" bgcolor="#969696" width="600px"><font color="black" size="1px">MORE&gt;&gt;</font></td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <table width="700px">
                                                <tr>
                                                    <td>
                                                        <ul type="square">
                                                            <li>计算机科学学院2019年春季学期开学教学准备及检查工作实施方案</li>
                                                            <li>西南石油大学计算机科学学院关于举行学院2019年春季田径运动会的通知</li>
                                                            <li>2018年秋季学期期末考试情况总结</li>
                                                            <li>计算机科学学院2018年度教职工考核优秀名单公示</li>
                                                            <li>国际学术会议（ICCIS2019）征稿通知</li>
                                                        </ul>
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            
                            <td width="30px"></td>
                            
                            <td width="290px">
                                <table height="300px" width="290px">
                                    <tr height="40px">
                                        <td>
                                            <table width="290px" height="40px">
                                                <tr>
                                                <td bgcolor="#0066CC" align="center"><font color="white">专题列表</font></td>
                                                <td align="right" bgcolor="#969696" width="180px"><font color="black" size="1px">MORE&gt;&gt;</font></td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <table width="290px">
                                                <tr>
                                                    <td>
                                                        <ul type="square">
                                                            <li>中美联合高性能和大数据计算实验室</li>
                                                            <li>石油工程计算机模拟技术重点实验室</li>
                                                            <li>思科网络技术学院教师培训中心</li>
                                                        </ul>
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            
            <tr height="100px" bgcolor="#006699" align="center">
                <td>
                    <font size="3" color="white">Copyright© 2018 All Rights Reserved. 西南石油大学计算机科学学院</font>
                </td>
            </tr>
        </table>
    </body>
</html>

下面是css+html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>西南石油大学-计算机科学学院</title>
        <link href="style.css" type="text/css" rel="stylesheet">
    </head>
    <body>
        <div class="wrapper">
            <div class="heading">
                <img src="logo与标题.png" alt="logo与标题"/>
            </div>
            <div class="nav">
                <ul>
                    <li><a href="#">网站首页</a></li>
                    <li><a href="#">学校概况</a></li>
                    <li><a href="#">本科生教育</a></li>
                    <li><a href="#">研究生教育</a></li>
                    <li><a href="#">师资队伍</a></li>
                    <li><a href="#">科学研究</a></li>
                    <li><a href="#">学生工作</a></li>
                    <li><a href="#">招生工作</a></li>
                    <li><a href="#">实验中心</a></li>
                    <li><a href="#">党建之窗</a></li>
                </ul>
            </div>
            <div class="body">
                <div class="body_img">
                    <img src="展示图.png" alt="展示图"/>
                </div>
                <div class="body_content">
                    <div class="content1">
                        <div class="content1_head">
                            <div class="content1_head1">
                                图片新闻
                            </div>
                            <a href="#"><img src="more.png"/></a>
                        </div>
                        <div class="content1_body">
                            <div class="content1_left">
                                <img src="content1.png" alt="展示图片"/>
                            </div>
                            <div class="content1_right">
                                <ul>
                                    <li><a href="#">计算机科学学院举办2019年寒假留校学生新春[02-01]</a></li>
                                    <li><a href="#">计科院工会组织学院女教职工庆祝第109个“[03-12]</a></li>
                                    <li><a href="#">学术讲座——人工智能改变我们的未来生活[03-05]</a></li>
                                    <li><a href="#">计算机科学学院各年级辅导员集中走访学生寝[01-21]</a></li>
                                    <li><a href="#">学院召开2018年度领导班子民主生活会[01-14]</a></li>
                                    <li><a href="#">计科院与川庆安检院技术交流大会[01-10]</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="content2">
                        <div class="content2_head">
                            <div class="content2_head1">
                                学术交流
                            </div>
                            <a href="#"><img src="more.png" alt="more"/></a>
                        </div>
                        <div class="content2_body">
                                <ul type="square">
                                    <li><a href="#">人工智能改变我们的未来生活</a></li>
                                    <li><a href="#">计算时代的虚假信息传播</a></li>
                                    <li><a href="#">零行列式策略及其网络演化动力学</a></li>
                                    <li><a href="#">人工智能+：视界充满AI</a></li>
                                    <li><a href="#">计科院关于举行2018年校庆论文报告会的...</a></li>
                                    <li><a href="#">视频遇上云服务</a></li>
                                </ul>        
                        </div>
                    </div>
                    <div class="content3">
                        <div class="content3_head">
                            <div class="content3_head1">
                                新闻速递
                            </div>
                            <a href="#"><img src="more.png" alt="more"/></a>
                        </div>
                        <div class="content3_body">
                            <p><font color="#0066CC" size="4">计算机科学学院举办2019年寒假留校学生新春团拜会</font></p>
                            <font color="#C0C0C0" size="1">在中华民族传统节日——春节即将到来之际，为让学院留校学生感受家的温暖，向他们传达学院的慰问和祝福。
                            2019年2月1日上午9时30分，计算机科学学院在明理楼B306会议室隆重举行2019年寒假留…</font>
                            <br/>
                            <ul type="square">
                                <li><a href="#">学术讲座——人工智能改变我们的未来生活 01/21</a></li>
                                <li><a href="#">计算机科学学院各年级辅导员集中走访学生寝室 01/14</a></li>
                                <li><a href="#">计科院与川庆安检院技术交流大会01/08</a></li>
                                <li><a href="#">计算机科学学院分年级召开期末年级大会01/04</a></li>
                                <li><a href="#">计算机科学学院隆重举行第八届“盛特杯”大学生课外科研立项活动成果展 01/14</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="content4">
                        <div class="content4_head">
                            <div class="content4_head1">
                                党建动态
                            </div>
                            <a href="#"><img src="more.png" alt="more"/></a>
                        </div>
                        <div class="content4_body">
                                <ul type="square">
                                    <li><a href="#">&nbsp;&nbsp;学院召开2018年领导班子民主生活会</a></li>
                                    <li><a href="#">&nbsp;&nbsp;刘翔同志任计算机科学学院党委副书记、...</a></li>
                                    <li><a href="#">&nbsp;&nbsp;学院党委组织师生庆祝改革开放40周...</a></li>
                                    <li><a href="#">【审核评估】学院召开本科教学工作审核...</a></li>
                                    <li><a href="#">【聚焦评估】学院召开本科教学工作审核...</a></li>
                                </ul>        
                        </div>
                    </div>
                    <div class="content5">
                        <div class="content5_head">
                            <div class="content5_head1">
                                通知公告
                            </div>
                            <a href="#"><img src="more.png" alt="more"/></a>
                        </div>
                        <div class="content5_body">
                            <ul type="square">
                                <li><a href="#">计算机科学学院2019年春季学期开学教学准备及检查工作实施方案</a></li>
                                <li><a href="#">西南石油大学计算机科学学院关于举行学院2019年春季田径运动会的通知</a></li>
                                <li><a href="#">2018年秋季学期期末考试情况总结</a></li>
                                <li><a href="#">计算机科学学院2018年度教职工考核优秀名单公示</a></li>
                                <li><a href="#">国际学术会议（ICCIS2019）征稿通知</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="content6">
                        <div class="content4_head">
                            <div class="content4_head1">
                                专题列表
                            </div>
                            <a href="#"><img src="more.png" alt="more"/></a>
                        </div>
                        <div class="content4_body">
                                <ul type="square">
                                    <li><a href="#">中美联合高性能和大数据计算实验室</a></li>
                                    <li><a href="#">石油工程计算机模拟技术重点实验室</a></li>
                                    <li><a href="#">思科网络技术学院教师培训中心</a></li>
                                </ul>        
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footing">
            <br/>
            <br/>
            <font>Copyright© 2018 All Rights Reserved. 西南石油大学计算机科学学院</font>
        </div>
    </body>
</html>

css样式

*{
    margin: 0px;
    padding: 0px;
}

.heading{
    
    margin: 0px auto;
}

.heading img{
    width: 100%;
    margin: 0px auto;
}
.wrapper{
    width: 984px;
    margin: 0px auto;
}

.nav{
    width:984px;
    height:50px;
    margin: 0 auto;
}
.nav ul{
    width: 100%;
}
.nav li{
    float:left;
    height:50px;
    line-height:50px;
    font-size:16px;
    position:relative; 
    list-style-type: none;
    background-color: #0066CC;
}
.nav li a{
    color:#FFF;
    display:block;
    padding: 0 15.6px; 
    text-decoration: none;
}
.nav ul li a:hover{
    display:block;
    color: #fff;
    background:#0a5894;
    text-decoration: none;
}
.body_img img{
    width: 100%;
    margin: 0px auto;
}
.body{
    width: 100%;
    margin: 0 auto;
}
.body_content{
    width: 100%;
    height: 800px;
    margin: 10px auto;
}
.content1{
    height: 280px;
    width: 685px;
    float: left;
}
.content1_head{
    margin-top: 0px;
    width: 685px;
    height: 40px;
    background-color: #969696;
}
.content1_head1{
    font-size: 18px;
    width: 80px;
    height: 35px;
    background-color: #0066CC;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    float: left;
    color: white;
    padding: 2px;
    text-align: center;
}
.content1_head img{
    margin: 15px auto;
    float: right;
    border: none;
}
.content1_body{
    width: 685px;
    margin:0px auto;
    float: left;
}
.content1_left img{
    margin: 20px auto;
    float: left;
}
.content1_right ul{
    text-align: right;
    list-style-type: none;
    margin:20px auto;
    font-size: 14px;
    padding: 10px;
}
.content1_right ul li{
    padding: 5px;
}
a:link,a:visited{
    text-decoration: none;
    color: darkgray;
}
a:hover{
    text-decoration: none;
    color: black;
}
.content2{
    height: 260px;
    float: right;
    width: 280px;
}
.content2_head{
    margin-top: 0px;
    width: 280px;
    height: 40px;
    background-color: #969696;
    
}
.content2_head1{
    font-size: 18px;
    width: 90px;
    height: 35px;
    background-color: #0066CC;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    float: left;
    color: white;
    padding: 2px;
    text-align: center;
}
.content2_head img{
    margin: 15px auto;
    float: right;
    border: none;
}
.content2_body{
    height: 220px;
}
.content2_body ul{
    text-align: left;
    list-style-type: none;
    font-size: 14px;
    margin-top: 25px;
}
.content2_body ul li{
    padding: 5px;
}
.content3{
    height: 280px;
    width: 685px;
    float: left;
}

.content3_head{
    margin-top: 0px;
    width: 685px;
    height: 40px;
    background-color: #969696;
}
.content3_head1{
    font-size: 18px;
    width: 80px;
    height: 35px;
    background-color: #0066CC;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    float: left;
    color: white;
    padding: 2px;
    text-align: center;
}
.content3_head img{
    margin: 15px auto;
    float: right;
    border: none;
}

.conten3_body{
    height: 240px;
}
.content3_body ul{
    text-align: left;
    list-style-type: none;
    font-size: 14px;
    margin-top: 15px;
    line-height: 30px;
}
.conten3_body ul li{
    padding: 5px;
}

.content4{
    height: 280px;
    float: right;
    width: 280px;
}
.content4_head{
    margin-top: 0px;
    width: 280px;
    height: 40px;
    background-color: #969696;
}
.content4_head1{
    font-size: 18px;
    width: 80px;
    height: 35px;
    background-color: #0066CC;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    float: left;
    color: white;
    padding: 2px;
    text-align: center;
}
.content4_head img{
    margin: 15px auto;
    float: right;
    border: none;
}
.content4_body ul{
    text-align: left;
    list-style-type: none;
    font-size: 14px;
    margin-top: 10px;
}
.content4_body ul li{
    padding: 5px;
}

.content5{
    height: 280px;
    width: 685px;
    float: left;
}

.content5_head{
    margin-top: 0px;
    width: 685px;
    height: 40px;
    background-color: #969696;
}
.content5_head1{
    font-size: 18px;
    width: 80px;
    height: 35px;
    background-color: #0066CC;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    float: left;
    color: white;
    padding: 2px;
    text-align: center;
}
.content5_head img{
    margin: 15px auto;
    float: right;
    border: none;
}

.content5_body ul{
    text-align: left;
    list-style-type: none;
    font-size: 14px;
    padding-top: 10px;
    line-height: 30px;
}
.conten5_body ul li{
    padding: 5px;
}

.content6{
    height: 280px;
    float: right;
    width: 280px;
}
.content6_head{
    margin-top: 0px;
    width: 280px;
    height: 40px;
    background-color: #969696;
}
.content6_head1{
    font-size: 18px;
    width: 80px;
    height: 35px;
    background-color: #0066CC;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    float: left;
    color: white;
    padding: 2px;
    text-align: center;
}
.content6_head img{
    margin: 15px auto;
    float: right;
    border: none;
}
.content6_body ul{
    text-align: left;
    margin:20px auto;
    font-size: 14px;
    padding: 10px;
}
.content6_body ul li{
    padding: 5px;
}

.footing{
    width: 100%;
    background-color: #006699;
    height: 100px;
    text-align: center;
}

.footing font{
    color: white;
    font-size: 4;
}

html+css实现的效果更舒服更好看，表格布局的局限性很大

下一步学完js会添加动态效果

努力中......

猜你喜欢

转载自www.cnblogs.com/tyx666/p/10543167.html
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022