使用html+css实现一个静态页面（含源码）
我使用的编辑器是Hbuilder，使用html+css实现一个静态页面。我选择的是联通官网的一个页面。
原本页面如下：
先对整个页面进行分块，分成顶部，链接区域，导航区域，内容区域，footer区域等部分，每部分分开写内容。
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>
<div class="banner">
<img src="images/banner/1news.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-03li>
<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>
<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="#">联通好员工2017a>
li>
<li>
<a href="#">企业文化手册a>
li>
<li>
<a href="#">联通劳模2018a>
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号-3a> | <a href="#">联系我们a> | <a href="#">法律声明a>
span>
<a class="ico chengxin" href="#" target="_blank"> <img src="./img/[email protected]">a>
<a class="ico kexin" href="#" target="_blank"> <img src="./img/[email protected]">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