效果图：
html：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" >
<title>商务部机关服务局</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="wrap">
<header class="top">
<img src="images/banner.jpg" alt="商务部机关服务局">
<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">工作动态</a></li>
<li><a href="#">图片新闻</a></li>
<li><a href="/article/h/">后勤企业</a></li>
<li><a href="/article/o/">服务保障</a></li>
<li><a href="/article/s/">后勤人风采</a></li>
<li><a href="#">公众留言</a></li>
<li><a href="/article/u/">关于我们</a></li>
</ul>
</header>
<main class="content clearfix">
<aside class="main-left">
<section class="leftside-section">
<h2>服务保障</h2>
<div>
<ul>
<li><a href="#">社会工作</a></li>
<li><a href="#">机关服务</a></li>
<li><a href="#">交通服务</a></li>
<li><a href="#">餐饮服务</a></li>
<li><a href="#">文印服务</a></li>
<li><a href="#">医疗服务</a></li>
<li><a href="#">幼儿园</a></li>
<li><a href="#">宾馆</a></li>
<li><a href="#">培训基地</a></li>
<li class="more"><a href="/article/u/" target="_blank">更多>></a></li>
</ul>
</div>
</section>
</aside>
<div class="main-center">
<section class="center-section clearfix">
<header class="clearfix">
<h2 class="fl">图片新闻</h2>
<a href="#" class="fr">更多>></a>
</header>
<a class="images-news fl" title="钟山部长赴部机关幼儿园调研" target="_blank" href="#">
<img style="width: 100%" src="http://images.mofcom.gov.cn/jgfwj/201806/20180604155034922m.jpg" alt="钟山部长赴部机关幼儿园调研">
<p>钟山部长赴部机关幼儿园调研</p>
</a>
<div class="clearfix">
<ul class="images-news-list fr">
<li><a title="钟山部长赴部机关幼儿园调研" href="#">钟山部长赴部机关幼儿园调研</a><span>2018-06-04</span></li>
<li><a title="2018年机关服务局举办离退休人员新春茶话会" href="#">2018年机关服务局举办离退休人员新春茶话会</a><span>2018-01-30</span></li>
<li><a title="北京医院商务部医疗站正式投入运行" href="#">北京医院商务部医疗站正式投入运行</a><span>2017-10-30</span></li>
<li><a title="李成钢同志到部机关幼儿园调研" href="#">李成钢同志到部机关幼儿园调研</a><span>2017-10-30</span></li>
<li><a title="我部2017年度无偿献血活动圆满完成" href="#">我部2017年度无偿献血活动圆满完成</a><span>2017-06-08</span></li>
</ul>
</div>
</section>
<section class="center-section clearfix">
<header class="clearfix">
<h2 class="fl">工作动态</h2>
<a href="#" class="fr">更多>></a>
</header>
<ul>
<li><a title="商务部幼儿园公开招聘工作人员面试公告" target="_blank" href="/article/v/201905/20190502860542.shtml">商务部幼儿园公开招聘工作人员面试公告</a><span>2019-05-07</span></li>
<li><a title="商务部幼儿园公开招聘工作人员笔试公告" target="_blank" href="/article/v/201904/20190402856151.shtml">商务部幼儿园公开招聘工作人员笔试公告</a><span>2019-04-24</span></li>
<li><a title="商务部幼儿园公开招聘公告" target="_blank" href="/article/v/201904/20190402850618.shtml">商务部幼儿园公开招聘公告</a><span>2019-04-08</span></li>
<li><a title="机关服务局举办专题讲座暨第二期中青年干部培训班总结颁奖会" target="_blank" href="/article/v/201809/20180902792166.shtml">机关服务局举办专题讲座暨第二期中青年干部培训班总结颁奖会</a><span>2018-09-30</span></li>
<li><a title="机关服务局举办“阅读与人生”专题报告会暨第二期中青年干部培训辅导讲座" target="_blank" href="/article/v/201807/20180702762277.shtml">机关服务局举办“阅读与人生”专题报告会暨第二期中青年干部培训辅导讲座</a><span>2018-07-04</span></li>
</ul>
</section>
</div>
<aside class="main-right">
<section class="leftside-section">
<h2>关于我们</h2>
<div>
<ul>
<li><a href="#">局长致辞</a></li>
<li><a href="#">职能</a></li>
<li><a href="#">机构设置</a></li>
<li><a href="#">局领导</a></li>
<li class="more"><a href="/article/u/" target="_blank">更多>></a></li>
</ul>
</div>
</section>
<section>
<h2>公众留言</h2>
<div>
<form action="#">
<div>
<label for="tbName">姓名：</label>
<input type="text" id="tbName" placeholder="姓名">
<p> </p>
</div>
<div>
<label for="tbEmail">邮箱：</label>
<input type="email" id="tbEmail" placeholder="邮箱">
<p> </p>
</div>
<div>
<label for="slCategory">留言类型：</label>
<select id="slCategory">
<option value="" selected disabled>请选择留言类型</option>
<option value="">意见与建议</option>
<option value="">问题与咨询</option>
</select>
<p> </p>
</div>
<div>
<label for="tbMessage">留言内容：</label>
<textarea name="" id="tbMessage" cols="20" rows="6"></textarea>
<p> </p>
</div>
<div class="text-center">
<button type="submit">提交留言</button>
</div>
</form>
</div>
</section>
</aside>
</main>
<footer id="bottom" class="text-center">
©<a href="http://www.mofcom.gov.cn/" target="_blank">中华人民共和国商务部</a><br>
地址：中国北京东长安街2号<br>
邮编：100731<br>
邮箱：<a href="mailto:abc@abc.com" class="b" target="_blank">商务部邮箱</a><br>
<p>学号：2017XXXXXXXXX 姓名：XXX 班级：XXX</p>
</footer>
</div>
</body>
</html>
css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.fl {
float: left;
}
.fr {
float: right;
}
.text-center {
text-align: center;
}
ul {
list-style: none;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.wrap {
width: 950px;
margin: 0 auto;
}
.top img {display: block;}
.nav {
background: url(../images/bg_nav.png) repeat-x;
height: 33px;
}
.nav li {
float: left;
padding: 0 18px;
text-align: center;
}
.nav li:not(:first-child) {
background: url(../images/bg_navline.png) no-repeat left;
}
.nav li a {
font-size :14px;
color: #fff;
font-weight: bold;
line-height: 33px;
text-decoration: none;
}
.nav li a:hover{
color: #ffd200;
text-decoration: underline;
}
.content {
margin: 10px 0;
}
.main-left {
width: 200px;
float: left;
padding-right: 10px;
}
.main-center {
width: 550px;
float: left;
}
.main-right {
width: 200px;
float: right;
padding-left: 10px;
}
aside > section:not(:last-child) {
margin-bottom: 15px;
}
aside section h2{
font-weight: normal;
color: #462a02;
font-size: 14px;
height: 26px;
line-height: 24px;
padding-left: 14px;
border: 1px solid #9c957a;
background-image: url(../images/side_section_header_bg.gif);
}
aside section h2::before {
content: ' ';
overflow: hidden;
display: inline-block;
background-color: #c00;
width: 6px;
height: 6px;
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
margin-right: 8px;
vertical-align: 4%
}
aside section > div {
padding: 15px;
background-color: #f8f7ee;
border-left: 1px solid #e1d9c1;
border-right: 1px solid #e1d9c1;
border-bottom: 1px solid #e1d9c1;
}
.leftside-section ul li.more {
text-align: right;
}
.leftside-section ul li.more a {
font-size: 10px;
color: #333;
}
.leftside-section ul a {
font-size: 12px;
line-height: 16px;
color: black;
text-decoration: none;
}
.leftside-section ul li:not(.more) a::before {
content: " ";
overflow: hidden;
display: inline-block;
background-color:#333;
width: 4px;
height: 4px;
margin-right: 4px;
vertical-align: 15%;
}
.leftside-section ul a:hover {
color: #BA0000;;
text-decoration: underline;
}
.images-news {
width: 35%;
}
.images-news img {
display: block;
}
.images-news {
display: block;
font-size: 12px;
color: black;
text-align: center;
text-decoration: none;
}
.images-news-list {
width: 65%;
padding-left: 15px;
}
.center-section:not(:last-child) {
margin-bottom: 10px;
}
.center-section header {
padding: 0 10px;
margin-bottom: 10px;
height: 31px;
line-height: 28px;
border-top: #6b2e08 2px solid;
background-color: #f3f7fa;
}
.center-section header h2 {
font-weight: normal;
font-size: 16px;
}
.center-section header a {
display: block;
color: #333;
text-decoration: none;
font-size: 12px;
}
.center-section ul li::before {
content: ' ';
display: inline-block;
overflow: hidden;
width: 5px;
height: 5px;
line-height: 28px;
background-color: #666;
margin-right:5px;
vertical-align: 40%;
}
.center-section ul li a {
width: calc(100% - 85px);
font-size: 14px;
line-height: 28px;
color: #333;
text-decoration: none;
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.center-section ul li a:hover {
color: #c00;
text-decoration: underline;
}
.center-section ul li span {
font-size: 9px;
line-height: 30px;
color: #ccc;
float: right;
width: 75px;
}
.main-right form {
font-size: 10px;
}
.main-right form label {
float: left;
line-height: 19px;
}
form > div > p {
color: red;
font-size: 9px;
line-height: 12px;
}
form input, form select, form textarea {
padding: 2px;
font-size: 10px;
width: 100%;
display: block;
}
form button {
font-size: 10px;
padding: 3px 6px;
}
footer {
border-top: 3px solid #684907;
padding-top: 20px;
font-size: 12px;
color: #333;
}
footer p {
font: 12px/1.5em '楷体';
color: red;
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
