前端工业类主页：学习前端的第一个静态页面。

于 2018-09-13 17:39:50 发布
阅读量444 收藏 1
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36657788/article/details/82691172
版权

首先给大家看一下效果，工业类主页到底是个什么鬼？

好啦，跟大家看到的一样这个就是我要跟大家讲的工业类主页，也是今天给大家分享的代码的形成图。这是一个静态的网页，大家以后也可以放一些轮播图啊之类的，只要你感兴趣，相信你就可以做出非常漂亮的网页。

回到正题，如图所示，这个就是一个工业类主页的样板。大家仔细看，每一部分内容之间都有一条空白的地方，所以整个网页即由四部分组成：

  1. header(导航栏、logo等等)
  2. banner(静态图、轮播图等等)
  3. content(资讯、新闻等等)
  4. footer(版权声明等等）

和人的肢体构造很相似，头部header、脖子部位一般都放一些banner图、胸腰腿部都为：content 、脚为footer一般放一些版权声明之类的，当然这些都不是固定的，你可以根据自己的想法来设置这些东西。

在发布代码之前先跟大家说一点也就是网页塌陷的问题。在下面正式的代码中你会发现如下的代码：

#header,#banner,#content,#footer{
			background: #900;
			width: 1176px;
			margin: 0 auto;

		}



#logo{
			width: 222px;
			height: 84px;
			float: left;
		}


#nav{
				width: 954px;
				height: 84px;
				float: left;
				background: #111111;
		}

这三处代码是对header头部的css设置，但是设置完这些你有没有想过这样一个问题，头部导航栏的高度是多少？高度是0！为什么是0？我明明给nav、logo设置了同样的高度84px，对吧，为什么是0呢？

这是因为你设置了浮动 float : left ; 当你设置完浮动之后，你设置的header部分就会脱离整个网页，浮动起来，这样就造成了导航栏部分出现了塌陷的情况，也就是导航栏下面的内容会涌进导航栏的部分当中，这个时候就造成了重叠。就会出现很难看的现象。那怎么去消除这种现象呢？

#header{
			overflow: hidden;
		}

overflow:hidden；就解决了这样一种情况。也就是是说你给header设置完overflow：hidden之后，导航栏的部分会自适应一个高度，这个高度是根据你所需要的高度而进行设置的。也就是相当于你把浮动的东西又给它按会了网页当中，使得网页的导航栏的部分有了它应该有的一个高度，同时让之前涌入到导航栏部分的其他部分的内容回到原本的位置当中去，这样就解决了塌陷这样一个问题。

接下来给大家分享工业类主页的代码：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Practice  of  工业类主页</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;

			font-family: 微软雅黑,verdana,sans-serif; 
		}
		#header,#banner,#content,#footer{
			background: #900;
			width: 1176px;
			margin: 0 auto;

		}
		#header{
			overflow: hidden;
		}
		#logo{
			width: 222px;
			height: 84px;
			float: left;
		}
		#logo a{
			display: block;
			width: 222px;
			height: 84px;
		}
		#logo a img{
			display: block;
		}
		#nav{
				width: 954px;
				height: 84px;
				float: left;
				background: #111111;
		}
		#nav li{
			list-style: none;
			float: left;
			
		}
		#nav li a{

			display: block;
			padding: 0 20px;
			height: 84px;
			text-align: center;
			line-height: 84px;
			text-decoration: none;
			font-size: 23px;
			color: #EEEEEE;

		}
		#nav  li a:hover{
			color: #111111;
			font-size: 24px;
			background: #EEEEEE;
		}
		#nav  li .active{
					background: linear-gradient(to bottom,#EEEEEE,#555555);
		}

		#banner{
			margin: 10px auto;
			height: 580px;
		}
		#banner a ,#banner a img{
			display: block;
			width: 1176px;
			height: 580px;
		
		}
		#content{
			overflow: hidden;
			background: #EAEAEA;
			font-size: 12px;
			line-height: 24px;
		}
		#content #LiftArticle h1{
			margin: 20px 0;
		}

		h1{
			font-size: 100%;
		}
		#content #LiftArticle h1 a{
			 color: #900;
			 text-decoration: none;
		}

		#content #LiftArticle h1 a:hover{
			text-decoration: underline;
		}

		#content #LiftArticle{
			float: left;
			margin: 10px;
			margin-right: 0px;
			width: 765px;
			font-size: 18px;

		}
		 #LiftArticle #artid,#content #LiftArticle #artid img{
			display: block;
			width: 765px;
			height: 467px;
		}

		 #LiftArticle p{
			color: #333;
			text-indent: 2em;
		}
		 #rightInfo{
			float: left;
			width: 381px;
			height: 800px;
			margin: 10px;
		}
		#rightInfo dl{
			margin-bottom: 10px;
		}
		#rightInfo dl dt{
			font-size: 14px;
			font-weight: bold;
			text-indent: 16px;
			background: #900;
			height: 32px;
			line-height: 32px;
		}
		#rightInfo dl dt a{
			color: #FFF;
		}
		#rightInfo dl dd{
			height: 24px;
			line-height: 24px;
			color: #333;
			text-indent: 3em;
			background: #FFF;
			font-size: 13px;
		}
		#rightInfo dl dd:last-child{
			margin-bottom: 18px;
		}
		#rightInfo dl dd a{
			color: #333;
			text-decoration: none;
		}
		#rightInfo dl dd a:hover{
			color: #900;
			text-decoration: underline;

		}
		#footer{
			background: #393838;
			margin-top: 10px;
			padding-top: 18px;
			height: 52px;
			line-height: 18px;
			color: #ccc;
			font-size: 12px;
			text-align: center;
			margin-bottom: 40px;
		}
		#footer a{
			text-decoration: none;
			color: #CCC; 
		}
		#footer a:hover{
			text-decoration: underline;
		}
	</style>
</head>
<body>
	<div id="header">
		<div id="logo">
			<a href="#"><img src="img/logo.jpg"></a>
		</div>

		<div id="nav">
			<ul>
			<li ><a class="active" href="#" >菜单1</a></li>
			<li><a href="#">菜单2</a></li>
			<li><a href="#">菜单3</a></li>
			<li><a href="#">菜单4</a></li>
			<li><a href="#">菜单5</a></li>
			<li><a href="#">菜单6</a></li>
			<li><a href="#">菜单7</a></li>
		</ul>
		</div>
	</div>

	<div id="banner">
		<a href="#"><img src="img\banner.jpg"></a>
	</div>

	<div id="content">
		<div id="LiftArticle">
			<a id="artid" href="#"><img src="img\a5.jpg"></a>
			<h1><a href="#">文章标题</a></h1>
			<p>
				白芳礼同志生于1913年5月，故于2005年9月，享年93岁。白芳礼同志祖籍河北沧县，1944年逃难到天津，解放后靠蹬三轮车成了人民服务的劳动模范，也靠两条腿扯大了自己的4个孩子，其中3个上了大学。1982年，满头白发的白芳礼开始从事个体三轮客运。1987年，已经74岁的他决定靠自己蹬三轮的收入帮助贫困的孩子实现上学的梦想。可这一蹬就是十多年，直到他将近90岁。
			</p>
			<p>
				白芳礼同志生于1913年5月，故于2005年9月，享年93岁。白芳礼同志祖籍河北沧县，1944年逃难到天津，解放后靠蹬三轮车成了人民服务的劳动模范，也靠两条腿扯大了自己的4个孩子，其中3个上了大学。1982年，满头白发的白芳礼开始从事个体三轮客运。1987年，已经74岁的他决定靠自己蹬三轮的收入帮助贫困的孩子实现上学的梦想。可这一蹬就是十多年，直到他将近90岁。
			</p>
			<p>
				白芳礼同志生于1913年5月，故于2005年9月，享年93岁。白芳礼同志祖籍河北沧县，1944年逃难到天津，解放后靠蹬三轮车成了人民服务的劳动模范，也靠两条腿扯大了自己的4个孩子，其中3个上了大学。1982年，满头白发的白芳礼开始从事个体三轮客运。1987年，已经74岁的他决定靠自己蹬三轮的收入帮助贫困的孩子实现上学的梦想。可这一蹬就是十多年，直到他将近90岁。
			</p>
			<p>
				白芳礼同志生于1913年5月，故于2005年9月，享年93岁。白芳礼同志祖籍河北沧县，1944年逃难到天津，解放后靠蹬三轮车成了人民服务的劳动模范，也靠两条腿扯大了自己的4个孩子，其中3个上了大学。1982年，满头白发的白芳礼开始从事个体三轮客运。1987年，已经74岁的他决定靠自己蹬三轮的收入帮助贫困的孩子实现上学的梦想。可这一蹬就是十多年，直到他将近90岁。
			</p>
		
		</div>
		<div id="rightInfo">
			<dl>
				<div>
					<dt><a href="#">标题1：我不是药神</a></dt>
					<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
					<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
					<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
					<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
				</div>
				<div>
					<dt><a href="#">标题2：我不是药神</a></dt>
					<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
					<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
					<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
					<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
				</div>
				<div>
					<dt><a href="#">标题3：我不是药神</a></dt>
					<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
					<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
					<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
					<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
				</div>
				<div>
					<dt><a href="#">标题4：我不是药神</a></dt>
					<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
					<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
					<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
					<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
				</div>
				<div>
					<dt><a href="#">标题5：我不是药神</a></dt>
					<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
					<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
					<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
					<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
				</div>
				<div>
					<dt><a href="#">标题6：我不是药神</a></dt>
					<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
					<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
					<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
					<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
				</div>
				<div>
					<dt><a href="#">标题7：我不是药神</a></dt>
					<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
					<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
					<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
					<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
				</div>
			</dl>
		
			
		</div>
	</div>
	<div id="footer">
		<p>
			<a href="#">关于我们&nbsp;|&nbsp;</a>
			<a href="#">广告服务&nbsp;|&nbsp;</a>
			<a href="#">联系我们&nbsp;|&nbsp;</a>
			<a href="#">版权声明&nbsp;|&nbsp;</a>
			<a href="#">合作对象</a>
			<p>Copyright©2018 Nick All Rights Reserved.</p>
		</p>
	
	</div>
</body>
</html>

 

Nick-Yin
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值