第十一、十二周：布局之路：（编辑静态网）：
01、运行结果
由于之前一直都是用谷歌运行网页，没运行过长的网页，而今天运行这个长的网页后，无法截取原图，百度上说edge
可以直接截取整个图，但是用edge运行后，发现很多地方并不兼容，所以我依旧用谷歌运行，然后分三段接下来了。
02、代码显示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>华东大学校友基金会</title>
<link rel="stylesheet" type="text/css" href="file:s">
<style type="text/css">
.header_top{
top:0px;
background:url(index_01_01_01.png);
width:100%;
}
.top_logo{
margin-top:0px;
}
.top_nav{
margin-top: 0px;
padding-left: 100px;
font-size:20px;
font-family: times;
}
.top_search{
width:150px;
height:15px;
}
#content_rigth{
}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a{
color: #000000;
}
.row{
width: 100%;
height: 60px;
}
</style>
<!--为了让div重叠我们需要使用position进行绝对定位,如还需要按顺序,
则需要在使用z-index进行排序,数字大的覆盖数字小的，但是谷歌好像无法运行z-index，
他以子元素覆盖父元素-->
</head>
<body>
<header class="header_top" style="bakeground-color:red;">
<img src="index_logo_01.png" class="top_logo">
<span style="left: 250px;position: absolute;top: 50px;font-size: 20px;">
<nav class="top_nav">
<a href="1">首页</a>
<a href="2" style="color:seagreen">新闻中心</a>|
<a href="3">校友会</a>|
<a href="4">基金会</a>|
<a href="5">年度销售</a>|
<a href="6">校友之窗</a>|
<a href="7">校友刊物</a>|
<a href="8">校友服务</a>
</nav>
</span>
<span style="right: 100px;position: absolute;top: 55px;font-size: 12px;">
<nav class="top_login">
<a href="1">登录</a>|
<a href="2">注册</a>
</nav>
</span>
<!--应注意nav为块状元素，应注意将其定义为行内元素，
否则两个nav将会分行，但是如果加了span则默认为行内元素，不定义需要-->
<form class="top_search" action="#" method="get">
<input type="text" name="search" style="top: 78px;right: 130px;position: absolute;">
<img src="index_02_04.png" style="top:78px;right: 110px;position: absolute;">
</form>
</header><!--网页头部-->
<br>
<div class="content"><!--网页主体-->
<!--交大背景图-->
<img src="News-flash_01_02.png" style="height:300px;width:100%;">
<table rules="cols" style="top:300px;left:120px;position:absolute;width:1000px;height: 40px;background-color: white;column-rule: #00FF00; text-align: center;">
<tr>
<td width="150px"><font color="#33CC66" size="5px";>新闻中心</font></td>
<td><font color="red">新闻快讯</font></td>
<td>母校热点</td>
<td>校友工作</td>
<td>校友活动</td>
<td>通知公告</td>
<td width="350px"></td>
</tr>
</table>
<img src="index1_37.png" style="top:339px;left: 271px;position: absolute;width: 100px;heigth:3px;">
<img src="News-flash_02_04_03.png" style="height: 300px;width: 640px;top:350px;left:121px;position: absolute;">
<img src="News-flash_01_03_03.png" style="height: 300px;width: 360px;top:350px;left:761px;position: absolute;">
<span style="top:410px;right:190px;position:absolute;font-size:21px;font-family:STSong;color:white;width:275px;">
<span style="white-space: pre-wrap;word-wrap: break-word;"><B>新闻标题全国创新创业总结宣传工作专家组来校实地调研</B></span>
</span>
<!--在使用white-space: pre-wrap;word-wrap: break-word;规定文字换行时，必须在该文字元素中规定文字的宽度width-->
<span style="top:510px;right: 190px;position: absolute;font-size: 14px;font-family: STSong;color:white;width:275px">
<span style="white-space: pre-wrap;word-wrap: break-word;"> 6月13日，以华北水利水电大学党委副书记石晶为组长的2016度全国高校创新创业总结宣传工作第十二专家小组一行四人，来到我校实地调研创新创业工作。</span>
</span>
<img src="index1_03.png" style="top: 480px;left: 765px;position: absolute;">
<img src="index1_05.png" style="top: 480px;left: 1070px;position: absolute;">
<!--分割的黑线-->
<img src="index1_27.png" style="top:650px;left:121px;position: absolute;width: 1000px;heigth: 2px;">
<!--新闻的第一个主题-->
<div class="news1_context" style="width: 660px;top: 680px;">
<img src="News-flash_08_07.png" style="top: 680px;left: 121px;width: 238px;position: absolute;">
<img src="News-flash_08_09.png" style="top: 680px;left: 370px;width: 30px;position: absolute;">
<img src="News-flash_02_05.png" style="top: 680px;left: 400px;width: 18px;position: absolute;">
<span class="news_date" style="top: 680px;left: 425px;position: absolute;">2016-6-06</span>
<span class="news_title" style="top: 700px;left: 400px;position: absolute;font-size: 19px;"><B>新闻大标题1</B></span>
<span class="news_text" style="top: 750px;left: 400px;width: 340px;font-size: 14px;position: absolute;white-space: pre-wrap;word-wrap: break-word;">6月13日，以华北水利水电大学党委副书记为组长的2016年度全国高校创新创业总结宣传工作第十二专家小组一行4人，来到我校实地调研创新创业工作。省委教育委委员、省教育厅厅长郭奕珊、省高等院。。。</span>
</div>
<!--经过多次调试，发现比较好的一个组合是第一张图：left：121px,图二：left：370px；图三：400px；时间：425PX；文字400PX-->
<!--新闻的第二个主题-->
<div class="news2_context" style="width: 660px;top: 860px;">
<img src="News-flash_08_13.png" style="top: 860px;left:121px;width: 238px;position: absolute;">
<img src="News-flash_08_09.png" style="top: 860px;left: 370px;width: 30px;position: absolute;">
<img src="News-flash_02_05.png" style="top: 860px;left: 400px;width: 18px;position: absolute;">
<span class="news_date" style="top:860px;left: 425px;position: absolute;">2016-6-06</span>
<span class="news_title" style="top: 880px;left: 400px;position: absolute;font-size: 19px;"><B>新闻大标题2</B></span>
<span class="news_text" style="top: 930px;left: 400px;width: 340px;font-size: 14px;position: absolute;white-space: pre-wrap;word-wrap: break-word;">6月13日，以华北水利水电大学党委副书记为组长的2016年度全国高校创新创业总结宣传工作第十二专家小组一行4人，来到我校实地调研创新创业工作。省委教育委委员、省教育厅厅长郭奕珊、省高等院。。。</span>
</div>
<!--新闻的第三个主题-->
<div class="news3_context" style="width: 660px;top: 1040px;">
<img src="News-flash_08_15.png" style="top: 1040px;left:121px;width: 238px;position: absolute;">
<img src="News-flash_08_09.png" style="top: 1040px;left: 370px;width: 30px;position: absolute;">
<img src="News-flash_02_05.png" style="top: 1040px;left: 400px;width: 18px;position: absolute;">
<span class="news_date" style="top:1040px;left: 425px;position: absolute;">2016-6-06</span>
<span class="news_title" style="top: 1060px;left: 400px;position: absolute;font-size: 19px;"><B>新闻大标题3</B></span>
<span class="news_text" style="top: 1110px;left: 400px;width: 340px;font-size: 14px;position: absolute;white-space: pre-wrap;word-wrap: break-word;">6月13日，以华北水利水电大学党委副书记为组长的2016年度全国高校创新创业总结宣传工作第十二专家小组一行4人，来到我校实地调研创新创业工作。省委教育委委员、省教育厅厅长郭奕珊、省高等院。。。</span>
</div>
<!--新闻的第四个主题-->
<div class="news4_context" style="width: 660px;top: 1220px;">
<img src="News-flash_08_17.png" style="top: 1220px;left:121px;width: 238px;position: absolute;">
<img src="News-flash_08_09.png" style="top: 1220px;left: 370px;width: 30px;position: absolute;">
<img src="News-flash_02_05.png" style="top: 1220px;left: 400px;width: 18px;position: absolute;">
<span class="news_date" style="top:1220px;left: 425px;position: absolute;">2016-6-06</span>
<span class="news_title" style="top: 1240px;left: 400px;position: absolute;font-size: 19px;"><B>新闻大标题4</B></span>
<span class="news_text" style="top: 1290px;left: 400px;width: 340px;font-size: 14px;position: absolute;white-space: pre-wrap;word-wrap: break-word;">6月13日，以华北水利水电大学党委副书记为组长的2016年度全国高校创新创业总结宣传工作第十二专家小组一行4人，来到我校实地调研创新创业工作。省委教育委委员、省教育厅厅长郭奕珊、省高等院。。。</span>
</div>
<!--新闻的第五个主题-->
<div class="news5_context" style="width: 660px;top: 1400px;">
<img src="News-flash_08_19.png" style="top: 1400px;left:121px;width: 238px;position: absolute;">
<img src="News-flash_08_09.png" style="top: 1400px;left: 370px;width: 30px;position: absolute;">
<img src="News-flash_02_05.png" style="top: 1400px;left: 400px;width: 18px;position: absolute;">
<span class="news_date" style="top:1400px;left: 425px;position: absolute;">2016-6-06</span>
<span class="news_title" style="top: 1420px;left: 400px;position: absolute;font-size: 19px;"><B>新闻大标题5</B></span>
<span class="news_text" style="top: 1470px;left: 400px;width: 340px;font-size: 14px;position: absolute;white-space: pre-wrap;word-wrap: break-word;">6月13日，以华北水利水电大学党委副书记为组长的2016年度全国高校创新创业总结宣传工作第十二专家小组一行4人，来到我校实地调研创新创业工作。省委教育委委员、省教育厅厅长郭奕珊、省高等院。。。</span>
</div>
<!--新闻的第六个主题-->
<div class="news6_context" style="width: 660px;top: 1580px;">
<img src="News-flash_08_21.png" style="top: 1580px;left:121px;width: 238px;position: absolute;">
<img src="News-flash_08_09.png" style="top: 1580px;left: 370px;width: 30px;position: absolute;">
<img src="News-flash_02_05.png" style="top: 1580px;left: 400px;width: 18px;position: absolute;">
<span class="news_date" style="top:1580px;left: 425px;position: absolute;">2016-6-06</span>
<span class="news_title" style="top: 1600px;left: 400px;position: absolute;font-size: 19px;"><B>新闻大标题6</B></span>
<span class="news_text" style="top: 1650px;left: 400px;width: 340px;font-size: 14px;position: absolute;white-space: pre-wrap;word-wrap: break-word;">6月13日，以华北水利水电大学党委副书记为组长的2016年度全国高校创新创业总结宣传工作第十二专家小组一行4人，来到我校实地调研创新创业工作。省委教育委委员、省教育厅厅长郭奕珊、省高等院。。。</span>
</div>
<div class="content_rigth" style="top: 680px; width= 340px;left: 780px;">
<img src="News-flash_02_07.png" style="top: 680px;left: 780px;width: 340px;heigth: 50px;position: absolute;">
<span style="top: 690px;left: 795px;font-size: 19px;color: white;position: absolute;">热点新闻</span>
<!--不知都为什么这边的文字无法浮动过去(解答：将top元素后面没有写：冒号，写的是等号)-->
<!--下面元素的将六行，每行50左右的高度，最后空出的部分将会有120-->
<img src="index1_31.png" style="top: 1100px;left: 780px;height: 3px;width: 340px;position: absolute;">
</div>
<img src="index1_27.png" style ="top: 1740px;left:121px;height: 3px;width: 1000px;position: absolute;">
<span style="top:1760px;left: 240px;position: absolute;font-size:14px;">共7460条记录</span>
<span style="top:1760px;left: 350px;position: absolute;font-size:14px;">首页</span>
<!--翻页部分-->
<div id="wp_page" style="display: inline;">
<span style="top:1760px;left: 400px;position: absolute;font-size:14px;">前一页</span>
<button style="top:1757px;left:450px;position:absolute;width:30px;height:30px;background-color:seagreen;">1</button>
<button style="top:1757px;left:490px;position:absolute;width:30px;height:30px;background-color:white;">2</button>
<button style=" top:1757px;left:530px;position:absolute;width:30px;height:30px;background-color:white;">3</button>
<button style=" top:1757px;left:570px;position:absolute;width:30px;height:30px;background-color:white;">4</button>
<button style=" top:1757px;left:610px;position:absolute;width:30px;height:30px;background-color:white;">5</button>
<button style=" top:1757px;left:650px;position:absolute;width:60px;height:30px;background-color:white;">后一页</button>
<button style=" top:1757px;left:720px;position:absoulte;width:50px;position:absolute;height:30px;background-color:white;">末页</button>
<span style="top: 1760px;left:800px;position:absolute;font-size:14px;">当前[1/746页]</span>
<span style="top: 1760px;left:900px;position:absolute;font-size:14px;">到第</span>
<select style="top: 1762px;left:930px;position:absolute;width:45px;height:20px;"> </select>
<span style="top: 1760px;left:985px;position:absolute;font-size:14px;">页</span>
</div>
</div><!--网页主体-->
<footer style="margin-bottom: 500px;padding-bottom: 500px;height: 1100px;">
<!--在这边比较奇怪，当margin或者padding删去时，网页后面的空白都无法显示，并且之前运行的可以显示的也无法显示-->
<img src="index_02.png" style="top: 1850px;width: 100%;heigth: 301px;left: 0px;position: absolute;">
<div class="footer_left" style="top: 1865px;left: 120px;width: 500px;position: absolute;color: white;font-size: 15px;">
<p style="font-size: 21px;">联系我们</p>
<table class="footer_context" style="border:1px;font-size: 13px;">
<tr style="font-size: 15px;">
<td width="150px">校友工作总会处+</td>
<td width="150px">校友工作总会处+</td>
<td width="150px">校友工作总会处+</td>
</tr>
<tr>
<td >联系电话：1234-567890</td>
<td>联系电话：1234-567890</td>
<td>联系电话：1234-567890</td>
</tr>
<tr>
<td>传 真：1234—567890</td>
<td>传 真：1234—567890</td>
<td>传 真：1234—567890</td>
</tr>
</table>
<br>
<p style="font-size: 18px;">校友企业</p>
<button style="top:1970px;width: 120px;height: 35px;color:darkgrey">企业logo</button>
<button style="top:1970px;width: 120px;height: 35px;color:darkgrey">企业logo</button>
<button style="top:1970px;width: 120px;height: 35px;color:darkgrey">企业logo</button>
<button style="top:1970px;width: 120px;height: 35px;color:darkgrey">企业logo</button>
</div>
<div class="footer_adress" style="width: 100%;text-align: center;">
<img src="index1_26.png" style="top:2250px;left:700px;width:80px;height: 80px;position:absolute;">
<img src="index1_26.png" style="top:2250px;left:600px;position:absolute;">
<img src="index1_26.png" style="top:2250px;left:500px;position:absolute;">
<span style="top:2330px;left:508px;position:absolute;font-size:13px;color:grey;">校友总会网</span>
<span style="top:2330px;left:620px;position:absolute;font-size:13px;color:grey;">二维码</span>
<span style="top:2330px;left:720px;position:absolute;font-size:13px;color:grey;">二维码</span>
<span style="top:2370px;left:580px;position:absolute;font-size:15px;color:black;"><B>系统设置/文章管理</B></span>
<p style="top:2390px;left:480px;position:absolute;font-size:12px;color:grey;">Copyright: 2002-2016 华东交通大学-校友工作办公室、校友总会</p>
<br>
<p style=" top:2410px;left:550px;position:absolute;font-size:12px;color:grey;">技术支持 南昌腾杰信息技术有限公司</p>
<br>
<p style="top:2430px;left:430px;position:absolute;font-size:12px;color:grey;">地址：江西南昌昌北经济技术开发区双港东大街808号南区3# 电话：0791-87046321</p>
</div>
</div>
</footer><!--页脚-->
</body>
</html>