HTML写静态页面

时间:2022-09-29 21:03:16

一.HTML代码

  

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>

</head>
<body>
<div id="page">
    <div id="page_head">
        <div id="logo" align=center><img src="logo.png" /></div>
    </div>
    <div id="leader">
        <ul style="padding:0 0;">
        <li id="mainmenu">
            <a id="link" >网站首页</a>         
        </li>
        <li id="mainmenu">
            <a id="link" >学院概况</a>
        </li>
        <li id="mainmenu">
            <a id="link" >本科生教育</a>
        </li>
        <li id="mainmenu">
            <a id="link" >研究生教育</a>
        </li>
        <li id="mainmenu">
            <a id="link">师资队伍</a>
        </li>
        <li id="mainmenu">
            <a id="link">科学研究</a>
        </li>
        <li id="mainmenu">
            <a id="link">学生工作</a>
        </li>
        <li id="mainmenu">
            <a id="link">招生工作</a>
        </li>
        <li id="mainmenu">
            <a id="link">实验中心</a>
        <li id="mainmenu">
            <a id="link">党建之窗</a>
        </ul>
    </div>
    <div id="img_welcome"><img src="welcome.jpg" width="975" height="195" ></div>
    <div id="page_body">
        <div style="height:30%;blackground-color:grey">
            <div id="leftli">
                <div id="topli">
                    <div id="topli-leftpart"><b>图片新闻</b></div>
                    <div id="topli-rightpart"><img src="more.png" ></div>
                </div>
                <div id="downimg">
                <img src="abc.jpg" width="300" height="180">
                </div>
                <div id="leftfloat">
                <ul id="forul">
                <li>
                    <a>计算机科学学院举办2019年寒假留...[02-01]</a>
                </li>
                <li>
                    <a>学院召开党委中心组学习会暨党风廉...[03-18]</a>
                </li>
                <li>
                    <a>学院召开教职工大会学习传达中层干...[03-15]</a>
                </li>
                <li>
                    <a>计科院工会组织学院女教职工庆祝第...[03-12]</a>
                </li>
                <li>
                    <a>学术讲座——人工智能改变我们的未...[03-05]</a>
                </li>
                <li>
                    <a>计算机科学学院各年级辅导员集中走...[01-21]</a>
                </li>
                </ul>
                </div>
            </div>
            <div id="rightli">
                <div id="topli">
                    <div id="topli-leftpart"><b>学术交流</b></div>
                    <div id="topli-rightpart"><img src="more.png" ></div>
                </div>
                <ul type="square">
                <li>
                    <a>人工智能改变我们的未来生活</a>
                </li>
                <li>
                    <a>计算时代的虚假信息传播</a>
                </li>
                <li>
                    <a>人工智能+:视界充满AI</a>
                </li>
                <li>
                    <a>零行列式策略及其网络演化动力学</a>
                </li>
                <li>
                    <a>视频遇上云服务</a>
                </li>
                <li>
                    <a>计科院关于举行2018年校庆论文报告会的...</a>
                </li>
                </ul>
            </div>
        </div>
        <div style="height:35%;blackground-color:grey">
            <div id="leftli">
                <div id="topli">
                    <div id="topli-leftpart"><b>新闻速递</b></div>
                    <div id="topli-rightpart"><img src="more.png" ></div>
                </div>
                <div style="padding-top:10px">
                <a id="blue" style="font-weight:bold;padding-left:10px;font-size:16px;" >计算机科学学院举办2019年寒假留校学生新春团拜会</a>
                </div>
                <div>
                <p id="grey" style="font-size:12px;">&nbsp&nbsp&nbsp&nbsp在中华民族传统节日——春节即将到来之际,为让学院留校学生感受家的温暖,向他们传达学院的慰问和祝福。2019年2月1日上午9时30分,计算机科学学院在明理楼B306会议室隆重举行2019年寒假留…[<a herf=“”>详细信息</a>]</p>
                </div>
                <ul>
                <li>
                    <a>学院召开党委中心组学习会暨党风廉政建设专题会03/18</a>
                </li>
                <li>
                    <a>学院召开教职工大会学习传达中层*大会精神 部署学院学期工作03/15</a>
                </li>
                <li>
                    <a>计科院工会组织学院女教职工庆祝第109个“三八妇女节”03/12</a>
                </li>
                <li>
                    <a>学术讲座——人工智能改变我们的未来生活03/05</a>
                </li>
                <li>
                    <a>计算机科学学院各年级辅导员集中走访学生寝室01/21</a>
                </li>
                <li>
                    <a>学院召开2018年度领导班子*生活会01/14</a>
                </li>
                </ul>
            </div>
            <div id="rightli">
                <div id="topli">
                    <div id="topli-leftpart"><b>党建动态</b></div>
                    <div id="topli-rightpart"><img src="more.png" ></div>
                </div>
                <ul>
                <li>
                    <a>学院召开党委中心组学习会暨党风廉政建...</a>
                </li>
                <li>
                    <a>学院召开教职工大会学习传达中层*大...</a>
                </li>
                <li>
                    <a>学院召开2018年领导班子*生活会</a>
                </li>
                <li>
                    <a>刘翔同志任计算机科学学院党委副书记、...</a>
                </li>
                <li>
                    <a>学院党委组织师生收看庆祝改革开放40周...</a>
                </li>
                <li>
                    <a>【审核评估】学院召开本科教学工作审核...</a>
                </li>
                <li>
                    <a>【聚焦评估】学院召开本科教学工作审核...</a>
                </li>
                <li>
                    <a>学院党委开展迎校庆主题党日活动</a>
                </li>
                </ul>
            </div>
        </div>
        <div style="height:35%;blackground-color:grey">
            <div id="leftli">
                <div id="topli">
                    <div id="topli-leftpart"><b>通知公告</b></div>
                    <div id="topli-rightpart"><img src="more.png" ></div>
                </div>
                <ul>
                <li>
                    <a>自组团出访前公示信息表(彭博)</a>
                </li>
                <li>
                    <a>计算机科学学院2019年春季学期开学教学准备及检查工作实施方案</a>
                </li>
                <li>
                    <a>西南石油大学计算机科学学院关于举行学院2019年春季田径运动会的通知</a>
                </li>
                <li>
                    <a>2018年秋季学期期末考试情况总结</a>
                </li>
                <li>
                    <a>计算机科学学院2018年度教职工考核优秀名单公示</a>
                </li>
                <li>
                    <a>国际学术会议(ICCIS2019)征稿通知</a>
                </li>
                <li>
                    <a>计算机科学学院领导班子2018年度*生活会征求意见</a>
                </li>
                <li>
                    <a>关于表彰计算机科学学院2018-2019学年秋季学期“最美寝室”的通知</a>
                </li>
                </ul>
            </div>
            <div id="rightli">
                <div id="topli">
                    <div id="topli-leftpart"><b>专题列表</b></div>
                    <div id="topli-rightpart"><img src="more.png" ></div>
                </div>
                <ul>
                <li>
                    <a>中美联合高性能和大数据计算实验室</a>
                </li>
                <li>
                    <a>石油工程计算机模拟技术重点实验室</a>
                </li>
                <li>
                    <a>思科网络技术学院教师培训中心</a>
                </li>
                </ul>
            </div>
        </div>
    </div>
    <div id="pag_foot" align=center>
    <b>Copyright© 2018 All Rights Reserved. 西南石油大学计算机科学学院</b>
    </div>
</div>

</body>
</html>

  

二、CSS代码

  

#page{
        margin:0px;padding:0px
    }
    #page_head{
        background-color:white;
        height:113px;width:100%;
        margin:auto;
    }
    #page_body{
        height:900px;width:975px;
        margin:auto;margin-top:10px;
    }
    #pag_foot{
        background-color:#224b77;
        height:60px;
        margin:auto;line-height:60px;
        text-align:center;font-size:13px;color:#fff;
    }
    #logo{
    
    }
    #leader{
        background-color:#0b6cb8;
        height:50px;width:975px;
        margin:auto;
    }
    #img_welcome{
    margin:auto;text-align:center;padding-top:0px;
    }
    #link{
        padding-left:28px;
        padding-top:0px;
        font-size:16px;color:#fff;
    }
    #mainmenu{
        list-style-type:none;
        float:left;
        height:50px;margin:    0px;
        text-align:center;
        line-height:30px;
    }
    #leftli{
        width:64%;float:left;height:100%;
        background-color:white;
    }
    #rightli{
        width:34%;float:right;height:100%;
        background-color:white;
    }
    #topli{
    height:35px;
    background-color:#dddddd;
    }
    #topli-leftpart{
    float:left;line-height:35px;
    width:80px;height:100%;
    background-color:#0b6cb8;
    text-align:center;color:#fff;
    }
    #topli-rightpart{
    float:right;line-height:30px;
    width:40px;height:100%;
    }
    #downimg{
    float:left;
    width:50%;
    padding-top:10px
    }
    #leftfloat{
    float:left;
    }
    #grey{
    color:grey;
    }
    #blue{
    color:blue;
    }
    ul {list-style-type:square;color:grey;font-size:13px;padding-left:15px}

 

三.效果如下

  HTML写静态页面

 

 

四、网盘连接

  链接: https://pan.baidu.com/s/1got-kqJkmgyob7ytKs4RlQ

  提取码: mg8g