1. 编程号首页

使用html+css实现一个静态页面（含源码）

编程小号 • • 未分类

使用html+css实现一个静态页面（含源码）我使用的编辑器是Hbuilder，使用html+css实现一个静态页面。我选择的是联通官网的一个页面。原本页面如下：先对整个页面进行分块，分成顶部，链接区域，导航区域，内容区域，footer区域等部分，每部分分开写内容。html代码如下：<!DOCTYPEhtml><html> <head> <metacharset=”utf-8″> <title></title> <linkrel=”styles

我使用的编辑器是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.中国联合网络通信集团有限公司&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.miibeian.gov.cn" target="_blank">京ICP备11000964号-3</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">联系我们</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<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

今天的文章使用html+css实现一个静态页面（含源码）分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/32669.html

赞 (0)
编程小号编程小号
0

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注