我使用的编辑器是Hbuilder，使用html+css实现一个静态页面。我选择的是联通官网的一个页面。
原本页面如下：
先对整个页面进行分块，分成顶部，链接区域，导航区域，内容区域，footer区域等部分，每部分分开写内容。
html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/news_header.css"/>
<link rel="stylesheet" type="text/css" href="css/news_base.css"/>
<link rel="stylesheet" type="text/css" href="css/news_content.css"/>
<link rel="stylesheet" type="text/css" href="./css/news_footer.css"/>
</head>
<body>
<div class="header">
<!-- 顶部 -->
<div class="welcome">
<p>欢迎来到中国联通官方网站</p>
</div>
<!-- 链接区域 -->
<div class="link">
<div class="link-box">
<div class="logo">
<a href="#"><img src="img/logo.png"/></a>
</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>
</ul>
</div>
</div>
<!-- 导航区域 -->
<div class="menu">
<ul class="menu">
<li><a href="#">首页</a></li>
<li><a href="#">党的建设</a></li>
<li class="active-menu"><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>
</ul>
</div>
</div>
<!-- banner图 -->
<div class="banner">
<img src="images/banner/1news.png">
<!-- <img src="img/footer-meiti.png"> -->
</div>
<!-- 内容区域 -->
<div class="content">
<!-- 左侧导航区域 -->
<div class="left_nav">
<!-- 导航标题 -->
<div class="title">
<h1>新闻中心</h1>
</div>
<!-- 导航列表 -->
<ul>
<li class="active">公司要闻</li>
<li>一线新闻</li>
<li>行业动态</li>
<li>通知公告</li>
<li>国资动态</li>
<li>专题专栏</li>
</ul>
</div>
<!-- 右侧文章区 -->
<div class="right_text">
<!-- 右侧文章 -->
<h2>全力争做中小企业数字化转型的使能者 中国联通以创新驱动中小企业迸发新活力</h2>
<!-- 副标题 -->
<ul class="sub_title">
<li>发布时间：2020-09-03</li>
<li>发布人：新闻宣传中心</li>
</ul>
<!--文章内容 -->
<div class="article">
<p>
近日，工业和信息化部相继印发了《中小企业数字化赋能服务产品及活动推荐目录》第一期和第二期的通知。中国联通凭借多项成果成功入选推荐目录，成为工信部推荐的中小企业上云用云首选服务商。
</p>
<p>
<img src="http://www.chinaunicom.com.cn/resource/group1/M00/00/20/wKjcA19QvAaASKgQACLNrxHff10148.png" >
</p>
<p>
<strong>中国联通凭借多项成果入选</strong>
</p>
<p>
<strong>工业和信息化部《中小企业数字化赋能服务产品及活动推荐目录》</strong>
</p>
<p>
中小企业是国民经济和社会发展的生力军。为充分激发中小企业发展活力，中国联通积极发挥国有大型企业的主力军作用，在抓好常态化疫情防控的前提下，践行使命担当，加大惠企力度，引领技术创新，推出一系列政策“组合拳”为中小企业减压释负，助力中小企业增强内生动力，真正实现数字化转型。
</p>
<!-- 分享列表 -->
<ul class="share_list">
<li>分享到：</li>
<li><img src="images/weixin_icon.png">微信好友</li>
<li><img src="images/weixin_penyou_icon.png">朋友圈</li>
<li><img src="images/qq_icon.png">QQ好友</li>
<li><img src="images/qq_kongjian_icon.png">QQ空间</li>
<li><img src="images/weibo_icon.png">新浪微博</li>
</ul>
</div>
</div>
</div>
<!-- footer区域 -->
<div class="footer">
<!--底部连接-->
<div class="f-box">
<div class="f-list">
<span>党的建设</span>
<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>
</ul>
</div>
<div class="f-list">
<span>新闻中心</span>
<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>
</ul>
</div>
<div class="f-list">
<span>品牌专区</span>
<ul>
<li>
<a href="#">企业品牌</a>
</li>
<li>
<a href="#">沃品牌</a>
</li>
</ul>
</div>
<div class="f-list">
<span>业务介绍</span>
<ul>
<li>
<a href="#">公众业务</a>
</li>
<li>
<a href="#">政企客户业务</a>
</li>
<li>
<a href="#">国际业务</a>
</li>
<li>
<a href="#">创新业务</a>
</li>
</ul>
</div>
<div class="f-list">
<span>人力资源</span>
<ul>
<li>
<a href="#">校园招聘</a>
</li>
<li>
<a href="#">社会招聘</a>
</li>
</ul>
</div>
<div class="f-list">
<span>社会责任</span>
<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>
</ul>
</div>
<div class="f-list">
<span>企业文化</span>
<ul>
<li>
<a href="#">企业愿景</a>
</li>
<li>
<a href="#">企业使命</a>
</li>
<li>
<a href="#">企业价值观</a>
</li>
<li>
<a href="#">联通司歌</a>
</li>
<li>
<a href="#">联通好员工2017</a>
</li>
<li>
<a href="#">企业文化手册</a>
</li>
<li>
<a href="#">联通劳模2018</a>
</li>
</ul>
</div>
<div class="f-list">
<span>客户服务</span>
<ul>
<li>
<a href="#">客户服务</a>
</li>
</ul>
</div>
<div class="f-list">
<span>信息公开</span>
<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>
</ul>
</div>
<div class="f-list f-last">
<span>期刊杂志</span>
<ul>
<li><a href="#" target="_blank"><img src="./img/xxtxjs.png"></a></li>
<li style="margin-top:10px;"><a href="#" target="_blank"><img src="./img/ydsjjs.png"></a></li>
</ul>
</div>
</div>
<!--版权信息-->
<div class="copy">
<span>
Copyright ©1999-2018 ChinaUnicom All Rights Reserved.中国联合网络通信集团有限公司 | <a href="http://www.miibeian.gov.cn" target="_blank">京ICP备11000964号-3</a> | <a href="#">联系我们</a> | <a href="#">法律声明</a>
</span>
<a class="ico chengxin" href="#" target="_blank"> <img src="./img/chengxin@2x.png"></a>
<a class="ico kexin" href="#" target="_blank"> <img src="./img/kexin@2x.png"></a>
</div>
</div>
</body>
</html>
css代码，分成四个部分来写，代码如下：
首先是new_base.css来定一个总体格式。
html,body{
min-width:1004px;
height:100%;
width:100%;
}
*{
margin:0;
padding: 0;
font:13px "microsoft yahei","微软雅黑";
box-sizing: border-box;
-moz-box-sizing: border-box; /* -moz-Firefox */
-webkit-box-sizing:border-box; /* -webkit-Chrome Safari */
/* -o-:针对Opera内核的CSS写法 */
/* -ms-:针对IE内核的CSS写法 */
}
a{
text-decoration: none;
cursor: pointer;
}
li{
list-style:none;
}
.banner{
width: 1004px;
margin: 10px auto;
}
.banner img{
width:100%;
border-radius: 6px;
}
头部区域格式，header_css
.header{
background-color: #fff;
width: 100%;
top: 0px;
left:0px;
}
.welcome{
width:100%;
min-width:1004px;
height:36px;
background-color: #f9fafa;
/* border:1px solid red; */
}
.welcome p{
width:1004px;
/* border: 1px solid blue; */
margin: 0 auto;
line-height: 36px;
text-align: left;
color:#c4c4c5;
border-bottom: 1px solid #dedede;
}
.link{
/* border:1px solid red; */
width:100%;
min-width:1004px;
height:60px;
}
.link-box{
width:1004px;
/* border:1px solid blue; */
margin: 0 auto;
height:57px;
position: relative;
overflow: hidden;
}
/* logo */
.link-box .logo{
/* display:block; */
height:57px;
position: absolute;
/* position: absolute; */
/* width:365px; */
}
.link-box .logo a{
/* display:block; */
display: block;
/* border:100px solid blue; */
height: 57px;
width: 365px;
/* position: absolute; */
/* width:365px; */
}
.link-box .logo a img{
/* width:100%; */
height:100%;
}
.link-box ul{
position:absolute;
height: 57px;
line-height: 57px;
width:548px;
/* float:right; */
padding: 0;
right: -18px;
/* border: 1px solid red; */
}
.link-box ul li{
height: 57px;
line-height: 57px;
float: left;
display: inline-block;
}
.link-box ul li a{
line-height: 57px;
border-right:1px solid #b2b2b2;
padding: 0 18px;
color:#999;
font-weight: 600;
}
/* menu导航区域 */
.menu{
width: 1004px;
height: 43px;
margin: 0 auto;
overflow:hidden;
background: url(../img/header.png);
background-repeat: repeat-x;
border-top: 3px solid #b30000;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.menu li{
width: 10%;
float: left;
border-left:1px solid red;
/* list-style: none; */
}
.menu li a{
display: block;
font-size:16px;
line-height: 40px;
line-width:600;
text-align: center;
color:#fff;
}
.menu li a:hover{
background:#9a001d;
}
.active-menu{
background:#9a001d;
}
内容区域格式news_content.css
/* 左右布局 */
.content{
width: 1004px;
margin: auto;
/* border:1px solid red; */
font-size: 16px;
}
.content .left_nav{
float:left;
/* border:1px solid red; */
border-radius: 6px;
width:200px;
}
.content .right_text{
/* border:1px solid red; */
width: 790px;
float:right;
border-radius: 6px;
}
.content .left_nav .title{
height: 50px;
background: #da251c;
}
.content .left_nav .title h1{
color:#fff;
font-size: 18px;
font-weight: 600;
line-height: 50px;
padding-left: 15px;
}
.content .left_nav ul{
width: 100px;
color: #666;
margin: 20px 0;
}
.content .left_nav ul li{
font-size: 15px;
margin: 10px 15px;
cursor:pointer;
width: 170px;
}
.content .left_nav ul li.active{
color: #DA251C;
background-image: url(../img/left-arrow-red.png);
background-repeat: no-repeat;
background-position: right;
background-size: 8px;
}
/* 右侧新闻详情样式 */
.right_text h2{
/* border: 1px solid; */
width: 100%;
text-align: center;
font-size: 18px;
font-weight: 600;
line-height: 30px;
margin: 30px auto;
}
.right_text .sub_title{
width: 80%;
/* border: 1px solid; */
margin: 0 auto;
}
.right_text .sub_title li{
float:left;
font-size: 16px;
text-align: center;
width: 50%;
}
.right_text .sub_title::after{
content: "";
display: block;
clear:both;
visibility: hidden;
}
/* 正文样式 */
.right_text p{
/* border: 1px solid #999999; */
font-size: 15px;
text-align: justify;
text-indent: 2em;
line-height: 2em;
}
.right_text p img{
display: block;
max-width: 100%;
margin: 0 auto;
/* text-align: center; */
}
.right_text p strong{
display: block;
width: 100%;
margin: 10px auto;
text-align: center;
font-size: 15px;
}
/* 分享列表 */
.share_list{
/* border: 1px solid; */
height: 32px;
margin-top: 40px;
}
.share_list li{
float: left;
font-size: 14px;
height: 32px;
line-height: 32px;
text-align: left;
margin-left: 20px;
color: #999;
}
.share_list li img{
vertical-align: middle;
margin-right: 4px;
}
最后实现页面如下，因为网页文字部分太多，我只选择了其中一部分，最后显示结果如下：
代码已经上传到github上，有兴趣的同学可以自己去下载：https://github.com/dongxiaoshi/StaticWebPage.git
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
