• 学习笔记之08试用div做网页(滨院)-小作业


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>

    <link href="外部div网页.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
    <div>
    <div id="y1">
    <div id="y2"><!--y3 4 5同一层级。在y2里面-->
    <div id="y3">
    <ul id="y3-1" class="a1">
    <li class="a2">考生</li>
    <li class="a2">学生</li>
    <li class="a2">教工</li>
    <li class="a2">校友</li>
    </ul>
    <ul id="y3-2" class="a1">
    <li class="a3">校内门户</li>
    <li class="a3">学校邮箱</li>
    <li class="a3">VPN登录</li>
    <li class="a3">校长信箱</li>
    <li style=" 54px; height:24px;" class="a3">English</li>
    </ul>
    </div>
    <div id="y4">
    <img src="滨院.png">
    <input type="text" name="t1" id="y4211">
    <input type="text" name="t2" value="请输入关键字" id="y4212">
    <input type="image" src="bd_logo1.png" id="y4213">
    </div>
    <div id="y5">
    <ul id="y5-1">
    <li class="a4">学校概况</li>
    <li class="a4">机构设置</li>
    <li class="a4">特色办学</li>
    <li class="a4">师资队伍</li>
    <li class="a4">人才培养</li>
    <li class="a4">科学研究</li>
    <li class="a4">招生就业</li>
    <li class="a4">合作发展</li>
    <li class="a4">国际交流</li>
    <li class="a4">校园服务</li>
    </ul>
    </div>
    </div>
    </div>
    <div id="e1">
    <ul>
    <li class="a5"><img src="第二张图.jpg"></li>
    </ul>
    </div>
    <div id="san1">
    <div id="san11">
    <div id="san11-1">
    <span class="san11-12">学校新闻</span>
    <div class="san11-11"><img src="more.png" width="28" height="6"></div>
    </div>
    <div id="san11-2" class="a6">
    <div class="san11-20">
    <div class="san11-21">我校安排部署2017年“全民终身学习...</div>
    <div class="san11-22">为贯彻落实《山东省教育厅办公室关于举办2017年全民终身学习活动周的通知》精神和要求,10月10日,我校在办公楼北楼209会议室召开会议,对2017年“全民终身学习活动周”有关工作进行安排部署。党委委员、副校长张业赏出席会议,继续教育学院、办公室、宣传部、工会、团委、图书馆、人文学院负责人参加了会议。张业赏指出,要统一思想,提高认识,结合学校实际,积极开展主题突出、特色鲜明、形式多样、内容丰富的学习活动,进一步激发全体师生员工终身学习的热情;要加强领导,精心组织,强化工...</div>
    </div>
    </div>
    <div id="san11-3" class="a6">
    <div class="san11-20">
    <div class="san11-21">我校编制的3个旅游发展总体规划全部通...</div>
    <div class="san11-22">近日,我校城乡规划设计研究院负责编制的《惠民县魏集镇旅游发展总体规划》《惠民县清河镇旅游发展总体规划》《惠民县淄角镇旅游发展总体规划》全部通过专家评审。  评审会在惠民县召开,惠民县常务副县长张传礼、县旅游局局长刘志杰,魏集镇、清河镇、淄角镇相关领导和负责同志以及我校建筑工程学院、城乡规划设计研究院有关负责人参加会议。会上,来自山东大学、山东财经大学、济南大学等高校的专家组成评审委员会,听取了我校关于3个旅游发展总体规划的编制情况汇报并进行了认真评议和审查...</div>
    </div>
    </div>
    <div id="san11-4" class="a6">
    <img src="31.jpg">
    <div id="san11-42" class="san11-21">校党委理论学习中心组开展第13次集体学...</div>
    <div id="san11-43" class="san11-22">10月10日,校党委理论学习中心组在办公楼南楼210会议室开展集体学习。党委书记罗公利,党委副书记、校长刘春华,党委副书记杨洪章,党委委员、副校长张业</div>
    </div>
    <div id="san11-5" class="a6">
    <div class="san11-20">
    <div class="san11-21">我校山东省黄河三角洲生态环境重...</div>
    <div class="san11-22">近日,我校山东省黄河三角洲生态环境重点实验室学术委员会2017年度会议在北京召开。学术委员会主任委员、中国工程院院士李文华,副主任委员、中国生态学学会理事长刘世荣,我校副校长、山东省黄河三角洲生态环境重点实验室主任陆兆华等13名委员以及重点实验室主要科研骨干参加了会议。会上,陆兆华从办学历史、发展定位、学科专业建设、人才培养等方面介绍了我校建设发展情况,希望与会专家进一步关注并大力支持重点实验室和我校的发展。重点实验室相关负责人从科学研究、队伍建设与人才培养、开...</div>
    </div>
    </div>
    </div>
    <div id="san12">
    <div id="san12-1">
    <div class="a7">
    <span class="san11-12">学术交流</span>
    <div class="san11-11"><img src="more.png" width="28" height="6"></div>
    </div>
    <div class="a10">
    <div class="a11">
    Oct<br />
    10
    </div>
    <span style=" margin:25px; ">
    <a href="" style="text-decoration:none; font-size:15px; line-height:24px;
    color:#000">
    1项课题立项全国统计科学研究项目
    </a>
    </span>
    <div class="a12">
    近日,2017-2018年度全国统计科学研究项目评审结果公布,
    我校经济管理学院周江涛教授等申报的“我国产业结构升级的就业效应研究”
    获准立项。(科研处供稿)
    </div>
    </div>
    <div>
    <div class="a11">
    Oct<br />
    10
    </div>
    <span style=" margin:25px; ">
    <a href="" style="text-decoration:none; font-size:15px; line-height:24px;
    color:#000">
    1项课题立项全国统计科学研究项目
    </a>
    </span>
    <div class="a12">
    近日,2017-2018年度全国统计科学研究项目评审结果公布,
    我校经济管理学院周江涛教授等申报的“我国产业结构升级的就业效应研究”
    获准立项。(科研处供稿)
    </div>
    </div>
    <div>
    <div class="a11">
    Oct<br />
    10
    </div>
    <span style=" margin:25px; ">
    <a href="" style="text-decoration:none; font-size:15px; line-height:24px;
    color:#000">
    1项课题立项全国统计科学研究项目
    </a>
    </span>
    <div class="a12">
    近日,2017-2018年度全国统计科学研究项目评审结果公布,
    我校经济管理学院周江涛教授等申报的“我国产业结构升级的就业效应研究”
    获准立项。(科研处供稿)
    </div>
    </div>
    </div>
    <div id="san12-2">
    <div class="a7" style="margin-bottom:7px;">
    <span class="san11-12">通知公告</span>
    <div class="san11-11"><img src="more.png" width="28" height="6"></div>
    </div>
    <div id="san12-3">
    <ul id="san12-31">
    <li>滨州学院新建工程场地土方工程竞争性谈判公告
    <span style="float:right">10-12</span></li>
    <li>滨州学院新建工程场地土方工程竞争性谈判公告
    <span style="float:right">10-12</span></li>
    <li>滨州学院新建工程场地土方工程竞争性谈判公告
    <span style="float:right">10-12</span></li>
    <li>滨州学院新建工程场地土方工程竞争性谈判公告
    <span style="float:right">10-12</span></li>
    <li>滨州学院新建工程场地土方工程竞争性谈判公告
    <span style="float:right">10-12</span></li>
    <li>滨州学院新建工程场地土方工程竞争性谈判公告
    <span style="float:right">10-12</span></li>
    </ul>
    </div>
    </div>
    </div>
    </div>
    <div id="si1">
    <div id="si11">
    <img src="21.jpg" class="a8">
    <img src="22.jpg" class="a8">
    <img src="23.jpg" class="a8">
    <img src="21.jpg" class="a8">
    <img src="22.jpg" class="a8">
    <img src="23.jpg" class="a8">
    <img src="22.jpg" class="a8">
    </div>
    </div>
    <div id="wu1">
    <div id="wu21">
    <div id="wu11">
    <div id="wu111">
    <p>版权所有 © 滨州学院 宣传部新闻中心维护制作</p>

    <p>地址:山东省滨州市黄河五路391号&nbsp;&nbsp;&nbsp;&nbsp;邮编:256600</p>

    <p>电话:0543-3190016(校办)0543-3190201 3194990(招办) &nbsp;鲁ICP备07012503号</p>

    </div>
    <div id="wu12">
    <img src="51.png" class="a9">
    <img src="52.jpg" class="a9">
    <img src="52.jpg" class="a9">
    <img src="52.jpg" class="a9">
    <img src="53.jpg" class="a9">
    </div>
    </div>

    </div>
    </div>

    </div>

    </body>
    </html>

    附:外部样式表

    <style type="text/css">

    *{ margin:0px auto; padding:0px;}
    #y1{ 100%; height:177px; background:url(%E8%83%8C%E6%99%AF%E4%B8%80.jpg); color:#FFF;}
    #y2{ 1100px; height:177px;}
    #y3{ 1100px; height:37px; border:0px solid #FFF; padding-top:-10px; font-size:12px;}
    .a2{ float:left; 37px; height:24px;
    text-align:center; vertical-align:middle; line-height:24px;
    border-right:1px solid #475a9b;}
    .a2:hover{color:#FF0}
    #y3-1{ 162px; height:24px; float:left; margin:15px 0px 0px 4px; list-style:none}
    #y3-2 { float:right;315px; height:24px; margin:15px 4px 0px 0px; list-style:none}
    .a3{ float:left;60px; height:24px; border-right:1px solid #475a9b;
    text-align:center; vertical-align:middle; line-height:24px;}
    .a3:hover{color:#FF0}
    .a1{ border:1px solid transparent;margin:15px 0px 0px 0px;}
    #y4{ 1100px; height:63px;}
    #y4 img{ position:absolute; left:130px; top:50px}
    #y4211{ position:absolute; right:145px; top:70px; 241px; height:32px;
    background:none; border:1px solid #59588b;}
    #y4212{ position:absolute; right:170px; top:70px; 197px; height:32px;
    background:none; border:0px solid transparent; color:#FFF;}
    #y4213{ position:absolute; right:145px; top:70px; 44px; height:32px;}
    #y5-1{ 1199px; height:24px; float:left; list-style:none;
    position:absolute; left:130px; top:150px}
    .a4{float:left; 109px; height:24px;
    text-align:center; vertical-align:middle; line-height:24px;
    border-right:1px solid #475a9b;}
    #e1{
    1100px;
    height: 387px;
    border-bottom: 7px solid #003184;}
    .a5{ 1100px; float:left; display:inline-block;}
    #san1{ 1100px; height:693px;
    padding:30px 0px 15px 0px; }
    #san11{ 663px; height:615px; float:left;}
    #san11-1{ 663px; height:50px; vertical-align:middle; line-height:50px;}
    .san11-12{font-size:20px;}
    .san11-11{ float:right;font-size:38px; color:#999;
    margin-top:20px;}
    .a6{ 304px; height:276px;}
    #san11-2{ float:left; border-top: 2px solid #003184;}
    .san11-20{ 304px; height:264px; margin-top:15px; overflow:hidden}
    .san11-21{ font-size:15px; color:#1d1d1d; overflow:hidden;}
    .san11-22{ 304px; height:240px; margin-top:9px; color:#525252; overflow:hidden;
    font-size:12px; line-height:22px; text-indent:2em;}
    #san11-3{ float:right; border-top: 2px solid #bcac5f; overflow:hidden;}
    #san11-4{ float:left; border-top: 2px solid #bcac5f;}
    #san11-4 img{ 307px; height:150px; margin-top:15px;}
    #san11-42{ margin-top:15px;}
    #san11-5{ float:right; border-top: 2px solid #003184;}

    #san12{ 356px; height:648px; float:right;}
    #san12-1{ 356px; height:439px;}
    .a7{ 356px; height:40px; border-bottom:2px solid #003184;}
    #san12-2{ 356px; height:209px;}
    #san12-3{ 356px; height:162px;}
    #san12-31{ list-style:none; font-size:12px; color:#525252; line-height:24px;}
    #si1{ 100%; height:133px; background-color:#ececec;
    text-align:center; vertical-align:middle; line-height:133px;}
    #si11{ 1100px; height:133px; }
    .a8{ 140px; height:92px; margin:20px 10px 10px 0px;}
    #wu21{1100px; height:134px;}
    #wu1{ 100%; height:134px; background-color:#234ca4; color:#a3aabc;
    font-family:微软雅黑; font-size:12px;}
    #wu11{ 1100px; height:134px; position:absolute; }
    #wu111{ 471.86px; height:90px; padding-top:22px; line-height:30px; margin:0px;}
    #wu12{ 460px; height:92px; position:absolute; top:20px; right:5px}
    .a9{ 72px; height:72px; margin:8px;}
    .a10{ 356px; height:133px; margin-top:20px;}
    .a11{ 55px; height:55px;
    margin:20px 0px 0px 0px;
    background:#bcac5f;
    font-size:16px;
    color:#FFF;
    text-align:center;
    vertical-align:middle;
    line-height:25px;
    float:left;}
    .a12{ 276px; height:96px;
    float:left;
    margin-left:25px;
    font-size:12px;
    line-height:24px;
    color:#525252;}
    .a13{float:right;font-size:12px; color:#999;
    }
    </style>

  • 相关阅读:
    Scrum 冲刺博客第五篇
    Scrum 冲刺博客第四篇
    Scrum 冲刺博客第三篇
    ajax send()
    form action中get post传递参数的问题
    struts2 iterator中if标签的使用
    表格内容自动换行
    从js向Action传中文参数出现乱码问题的解决方法
    java开发环境搭建
    Can not find the tag library descriptor for "http://java.sun.com/jsp/jstl/
  • 原文地址:https://www.cnblogs.com/ziyanxiaozhu/p/7665631.html
Copyright © 2020-2023  润新知