• 静态网页练习


    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    *{
    margin: 0px;
    padding: 0px ;
    }
    .top-nav{
    100%;
    height: 40px;
    background-color: #808080;
    text-align: right;
    line-height: 40px;
    }
    .container{
    80%;
    height: 1200px;
    background-color:red;
    margin: 0px auto;
    }
    .logo-banner{
    width 100%;
    height: 169px;
    background-color: #808080;
    }
    .logo-left{
    20%;
    height: 170px;
    background-color: white;
    float: left;
    }
    .logo-right{
    80%;
    height: 170px;
    background-color: #FFD700;
    float: left;
    }
    .logo-right-1{
    100%;
    height: 80px;
    background-color: white;
    float:left;
    color: purple;
    text-align: right;
    line-height: 80px;
    font-size: 20px;
    font-weight: bold;
    }
    .logo-right-2{
    100%;
    height: 90px;
    background-color: white;
    float: left;
    text-align: right;
    color: black;
    line-height: 90px;
    font-size: 18px;
    font-weight: bold;
    }
    .logo-shop{
    100%;
    height: 300px;
    background-color: chocolate;

    }
    .btn{
    20%;
    height: 670px;
    background-color: white;
    float: left;
    }
    .list-1{
    50%;
    height: 670px;
    background-color: white;
    float: left;
    }
    .list-2{
    30%;
    height: 670px;
    background-color: white;
    float: left;
    }
    .footer-1{
    100%;
    height: 30px;
    background-color: blue;
    float: left;
    text-align: center;
    line-height: 30px;
    }
    .footer-2{
    100%;
    height: 30px;
    background-color: white;
    float: left;
    text-align: center;
    line-height: 30px;
    }
    .btn-1-1{
    float: left;
    100px;
    height: 65px;
    }
    .btn-2-1{
    float: left;
    100px;
    height: 65px;
    }
    .list-1-1{
    font-size: 18px;
    text-align: left;

    }
    .list-1-1-1{
    font-size: 12px;
    text-align: left;
    list-style: none;
    line-height: 40px;
    }
    a{
    text-decoration: none;
    color: black;

    }
    a:visited{
    text-decoration: none;

    }
    .list-1-2{
    font-size: 18px;
    text-align: left;
    overflow: hidden;
    }
    .list-1-2-1{
    font-size: 12px;
    text-align: left;
    list-style: none;
    line-height: 30px;
    overflow: hidden;
    }
    .list-2-1{
    font-size: 16px;
    text-align: left;
    }
    .list-2-1-1{
    font-size: 12px;
    text-align: left;
    list-style: none;
    line-height: 30px;
    overflow: hidden;
    }
    .list-2-2{
    font-size: 16px;
    text-align: left;
    }
    .list-2-2-1{
    font-size: 12px;
    text-align: left;
    list-style: none;
    line-height: 30px;
    }
    .list-2-3{
    font-size: 16px;
    text-align: left;
    }
    .list-2-3-1{
    font-size: 12px;
    text-align: left;
    list-style: none;
    line-height: 30px;
    }
    .list-2-4{
    font-size: 16px;
    text-align: left;
    }
    .list-2-4-1{
    font-size: 12px;
    text-align: left;
    list-style: none;
    line-height: 30px;
    }
    </style>
    </head>
    <body>
    <div class="top-nav">
    ·English New Vision Beta·English Vision
    </div><!--顶导航-->
    <div class="container">
    <div class="logo-banner"><!--校徽栏-->
    <div class="logo-left">
    <img src="SunboHBuilder/img/u=3802107903,1484631994&fm=117&gp=0.jpg" />
    </div><!--校徽-->
    <div class="logo-right ">
    <div class="logo-right-1">
    信息公开 | 学生 | 教工 | 考生 | 校友 | 访客
    <input type="text" placeholder="请输入关键字"/>
    <input type="image" src="img/1.gif" />
    </div><!--校徽右1-->
    <div class="logo-right-2">
    首页 &nbsp;南开概况&nbsp;院系机构 &nbsp; 南开新闻&nbsp; 人才师资&nbsp; 教育教学 &nbsp; 科学研究 &nbsp; 国际交流&nbsp; 招生就业 &nbsp;图书馆 &nbsp; 服务指南
    </div><!--校徽右2-->
    </div>
    </div>
    <div class="logo-shop">
    <img src="img/BGPyong.jpg" />
    </div><!--图片栏-->
    <div class="btn">
    <div class="btn-1-1">
    <img src="img/bangongwang.jpg" />
    </div>
    <div class="btn-1-1">
    <img src="img/xiaozhangxinxiang.gif"/>
    </div>
    <div class="btn-1-1">
    <img src="img/jiaoyujijinhui.gif" />
    </div>

    <div class="btn-2-1">
    <img src="img/nankaixiaoyouhui.gif" />
    </div>
    <div class="btn-2-1">
    <img src="img/xinximenhu.gif" />
    </div>
    <div class="btn-2-1">
    <img src="img/VPNfuwu.gif" />
    </div>
    <input type="text" placeholder="用户名" /><br />
    <input type="password" /><br />
    <select size="1"><br />
    <option >教工电子邮箱</option>
    <option >学生电子邮箱</option>
    </select><br />
    <a href="#">教工邮箱注册</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="submit" name="提 交" /><br />
    <a href="#">学生邮箱注册</a><br />
    <a href="#">VPN服务》》</a><br />

    </div><!--按钮栏-->
    <div class="list-1">
    <div class="list-1-1">
    最新动态&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更多-》
    </div>
    <ul type="circle" class="list-1-1-1">
    <li><a href="#">校党委常委会召开巡视整改民主生活会;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;07-18</a></li>
    <li><a href="#">学校召开2017年暑期工作会议;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;07-21</a></li>
    <li><a href="#">第九届全国MBA商业伦理与企业社会责任教学研讨会南开召开;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;07-21</a></li>
    <li><a href="#">商学院推行课程思政 全过程突显德育元素;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;07-21</a></li>
    <li><a href="#">我校教职工党支部书记示范班赴井冈山培训;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;07-20</a></li>
    <li><a href="#">南开学子苗春当选第五届天津市道德模范;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;07-20</a></li>
    <li><a href="#">我校2017年本科高招录取进程过半 生源质量稳中有升;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;07-20</a></li>
    <li><a href="#">学校召开新提任处级领导干部廉政谈话会;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;07-20</a></li>
    <li><a href="#">第七届“图书馆学实证研究”博士生学术会议南开举行;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;07-20</a></li>
    <li><a href="#">一名经济学博士的西部基层梦;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;07-20</a></li>
    <li><a href="#">学校党委要求组织师生收看《将改革进行到底》;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;07-19</a></li>
    <li><a href="#">南开大学团队研获新型生物荧光探针设计策略;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;07-18</a></li>
    </ul>
    <div class="list-1-2">
    校情通报&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更多-》
    </div>
    <span class="list-1-2-1"><a href="#">7月6日,天津市政协副主席、我校党委书记魏大鹏在昆明会见云南省委书记、省人大常委会主任陈豪,省委副书记、省长阮成发。省委常委、常务副省长宗国英,省委副秘书长、省委办公厅主任刘立志,省政府副秘书长赵瑞君,我校领导杨克欣、张亚、佟家栋等参加会见。
    南开大学办公室
    2017年7月10日 </a>
    </span>
    </div><!--多文本栏-->
    <div class="list-2">
    <div class="list-2-1">
    通告公告&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更多->
    </div>
    <ul type="circle" class="list-2-1-1">
    <li><a href="https://www.baidu.com" target="_blank">暑假期间教务处办理全日制本科毕...07-17</a></li>
    <li><a href="https://www.baidu.com" target="_blank">2017年暑期全校值班安排07-14</a></li>
    <li><a href="https://www.baidu.com" target="_blank">南开大学中层干部拟提拔任用人选...07-20</a></li>
    <li><a href="https://www.baidu.com" target="_blank">八里台校区大中路施工的通知07-20</a></li>
    <li><a href="https://www.baidu.com" target="_blank">2017年暑期职工医疗费报销和医保...07-17</a></li>

    </ul>
    <div class="list-2-2">
    干部选任&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更多->
    </div>
    <ul type="circle" class="list-2-2-1">
    <li><a href="https://www.baidu.com" target="_blank">关于推荐结对帮扶困难村驻村干部...07-20</a></li>
    <li><a href="https://www.baidu.com" target="_blank">关于考察党委组织部欧迎希的预告07-03</a></li>
    <li><a href="https://www.baidu.com" target="_blank">关于考察党委组织部张洋的预告07-03</a></li>
    </u>
    <div class="list-2-3">
    南开大学电视新闻&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更多->
    </div>
    <ul class="list-2-3-1">
    <li><a href="https://www.baidu.com" target="_blank">南开大学电视新闻2017年7月14日07-14</a></li>
    <li><a href="https://www.baidu.com" target="_blank">南开大学电视新闻2017年7月11日07-11</a></li>
    </ul>
    <div class="list-2-4">
    媒体南开&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更多->
    </div>
    <ul class="list-2-4-1">
    <li><a href="https://www.baidu.com" target="_blank">天津日报:一个问题的解决就是对...07-21</a></li>
    <li><a href="https://www.baidu.com" target="_blank">今晚报:启功笔下的溥佐07-21</a></li>
    <li><a href="https://www.baidu.com" target="_blank">辽宁卫视:锦州义勇军抗战遗址成...07-20</a></li>
    <li><a href="https://www.baidu.com" target="_blank">光明日报:史学研究的主旨在于求...07-20</a></li>
    <li><a href="https://www.baidu.com" target="_blank">天津广播网:恢弘重现改革历程 ...07-20</a></li>
    </ul>
    </div><!--少文本栏-->
    <div class="footer-1">
    南开招标网&nbsp;&nbsp;&nbsp;滨海学院&nbsp;&nbsp;&nbsp;附属小学&nbsp;&nbsp;&nbsp;学习网&nbsp;&nbsp;&nbsp;觉悟网&nbsp;&nbsp;&nbsp;校史网&nbsp;&nbsp;&nbsp;后勤保障部&nbsp;&nbsp;&nbsp;讲座网
    </div>
    <div class="footer-2">
    天津市卫津路94号&nbsp;&nbsp;&nbsp;&nbsp;[300071]&nbsp;&nbsp;&nbsp;&nbsp;津教备0061号&nbsp;&nbsp;&nbsp;&nbsp;津ICP号12003308号——1

    </div>

    </div><!--内容-->
    </body>
    </html>

  • 相关阅读:
    2017-7-17/18 背包dp cf round 417 div2
    poj3667-Hotel-线段树-区间合并
    STL 总结
    c++ 用freopen简单的重定向,再也不怕debug了~
    dynamic programming 从入门到放弃
    java 输入数据
    数位dp
    ECJTU 2018 Summer Training 5
    ECJTU 2018 Summer Training 2
    dfs和bfs专题
  • 原文地址:https://www.cnblogs.com/sunbo123/p/7220298.html
Copyright © 2020-2023  润新知