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

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

学习笔记之08试用div做网页（滨院）-小作业的更多相关文章

  1. 前端学习笔记2017.6.12 DIV布局网页

    DIV的功能就是把网页划分成逻辑块的. 看下豆瓣东西页面的布局,我们来分析下. 按照先从上到下的原则,把这个页面分成几个块: 首先是最顶端的这个条,这是一个DIV,我们给它起个名字,叫banner 然 ...

  2. Muduo学习笔记(一) 什么都不做的EventLoop

    Muduo学习笔记(一) 什么都不做的EventLoop EventLoop EventLoop的基本接口包括构造.析构.loop(). One Loop Per Thread 一个线程只有一个Eve ...

  3. 【学】CSS3基础实例1 - 用CSS3做网页中的小三角，以及transition的用法

    自开了博客园已经有2周了吧,虽然转载了一些觉得比较有用的文章之外还没有开始写自己的一些学习记录,那就从今天开始. 目前看了妙味的不少视频,有css+html,js的基础和中级也都看完了,作业也都做了, ...

  4. VS2013中Python学习笔记[Django Web的第一个网页]

    前言 前面我简单介绍了Python的Hello World.看到有人问我搞搞Python的Web,一时兴起,就来试试看. 第一篇 VS2013中Python学习笔记[环境搭建] 简单介绍Python环 ...

  5. Dreamweaver学习笔记---2016.08.17

    静态网页:不访问数据库,直接写入HTML. 动态网页:在网上发布好的,我们可以通过网页预览到的,具有访问数据库的过程. HTML:Hyper Text Markup Language,超文本语音标记. ...

  6. 学习笔记1－－响应式网页＋Bootstrap起步＋全局CSS样式

    一.学习之前要了解一些背景知识: 在2g时代,3g时代,4g时代,早期的网页浏览设备,功能机,智能机.(本人最喜欢的透明肌,和古典黑莓机) 1.什么是响应式网页? Responsive Web Pag ...

  7. 自然语言处理NLP学习笔记三：使用Django做一个NLP的Web站点

    前言: 前面我们已经能初步实现一个中文自然处理语言的模型了,但交互界面是命令行的,不太友好. 如果想做一个类似http://xiaosi.trs.cn/demo/rs/demo的界面,那就还需要继续往 ...

  8. cURL 学习笔记与总结（2）网页爬虫、天气预报

    例1.一个简单的 curl 获取百度 html 的爬虫程序(crawler): spider.php <?php /* 获取百度html的简单网页爬虫 */ $curl = curl_init( ...

  9. Java学习笔记--HashMap中使用object做key的问题【转】

    在HashMap中,如果需要使用多个属性组合作为key,可以将这几个属性组合成一个对象作为key.但是存在的问题是,要做get时,往往没办法保存当初put操作时的key object的referenc ...

随机推荐

  1. 团队作业8——Beta 阶段冲刺2rd day

    一.今日站立式会议照片 二.每个人的工作 (1) 昨天已完成的工作: 今天是冲刺阶段的第二天,冲刺第一天我们完成了对于前端界面的改进与完善工作. (2) 今天计划完成的工作: 成员 昨天已完成的工作 ...

  2. 微信小程序view标签以及display:flex的测试

    一:testview.wxml,testview.js自动生成示例代码 //testview.wxml <view class="section"> <view ...

  3. 201521123081《Java程序设计》 第6周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...

  4. 201521123089 《Java程序设计》第12周学习总结

    1. 本周学习总结 1. Input Stream -- 数据提供者可从其中读数据输出流:Output Stream -- 数据接收者可往其中写数据: 2. 字符流底层具体读写操作还是使用字节流: 3 ...

  5. POJ--3258 River Hopscotch (最小值最大化C++)

    River Hopscotch Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 15273   Accepted: 6465 ...

  6. Class类与Java反射

    1反射机制是什么 反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性:这种动态获取的信息以及动态调用对象的方法的功能称为jav ...

  7. 框架应用：Spring framework (一) - IoC技术

    IoC概念以及目标 IoC就是让原本你自己管理的对象交由容器来进行管理,其主要的目的是松耦合. IoC发展史 既然IoC的目标是为了松耦合,那它怎么做到的? 最后目标:降低对象之间的耦合度,IoC技术 ...

  8. const在c和c++中的不同

    最近开始由学习c转到c++:从面向过程到面向对象的转变中,总是以面向过程的思路思考,发现有很多的不同,今天就稍微发表一下我的见解,如果那里出错,希望大神可以帮忙指出来. 首先是const : 在C语法 ...

  9. STM32获取DHT11温度传感器数据

    准备物件 STM32F103C8T6核心板 ST-LINK V2 DHT11 杜邦线若干 连接线 STM32F103C8T6芯片管脚图 管脚说明 连接仿真器 STM32 ST-LINKV2 VCC V ...

  10. GitHub使用（四） - 关于分支Branch

    1. 什么是分支Branch? 我初步的理解为:GitHub仓库默认有一个master的分支,当我们在master分支开发过程中接到一个新的功能需求,我们就可以新建一个分支同步开发而互不影响,开发完成 ...