1.目标网站分析及顶部布局完成

BUG之神 100

1.目标网站分析及顶部布局完成

 

顶部分为上中下三部分，其中中间的部分又分左右两部分

1.目标网站分析及顶部布局完成 

 

内容区分析

1.目标网站分析及顶部布局完成 

 

 

 

1.目标网站分析及顶部布局完成 

 

 

 

底部分析：直接使用一个div  上面部分颜色浅一点，下面部分颜色深一点

1.目标网站分析及顶部布局完成 

 

基本的页面结构：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>首页</title>
</head>
<body>
	<!-- 公共顶部 -->
	<div class="header">
		
	</div>
	<!-- 首页banner图 -->
	<div class="banner">
		
	</div>
	<!-- 产品列表 -->
	<div class="product">
		
	</div>
	<!-- 广告 夜视一体化摄像机那个图片 -->
	<div class="ads-image">
		
	</div>
	<!-- 我们是做什么的 -->
	<div class="make">
		
	</div>
	
	<!-- 公共底部 -->
	<div class="footer">
		
	</div>
	
</body>
</html>

 

创建css目录用于放置样式文件，我们会创建三个css文件

创建样式重置文件：reset.css，用于清除页面默认的样式

/* 样式重置文件 */
html{
	/* 只允许出现垂直滚动条,不允许出现水平滚动条 */
	overflow-y:auto;
	overflow-x:hidden;
}
/* 清除下面这些块元素的默认样式 */
body,h1,h2,h3,ul,li,p{
	/* 清除内外边距 */
	margin:0;
	padding:0;
	/* 设置字体:微软雅黑,以及后两个可选字体 */
	font-family:'microsoft yehei', Verdana, Arial;
	/* 文本基本颜色设置为灰色 */
	color:#505050;/*ps中三个值相等，是灰色*/
}
/* 设置下面这些标签默认的字体大小 */
p,li,a{
	font-size: 14px;
}
/*干掉列表的基本样式*/
ul,li{
	list-style:none;
}
/* 设置链接基本样式,访问过的样式,鼠标单击的样式 */
a:link,a:visited,a:active{
	color:#050505;
	/* 去除链接的下划线 */
	text-decoration: none;
}
/* a链接鼠标悬停效果*/
a:hover{
	text-decoration: none;
	color:red;
}

将样式导入到html文档中：

1.目标网站分析及顶部布局完成 

 

编写公共文件的样式，公共文件是对顶部和底部这样公用的部分设置css样式

1.目标网站分析及顶部布局完成 

1.目标网站分析及顶部布局完成 

创建公共样式文件common.css

/* 公共样式文件 */
.header{
	width:100%;
	height:170px;/*高度通过开发工具或者其他工具测量目标网站得出*/
}

引入公共样式文件

1.目标网站分析及顶部布局完成 

编写顶部上部内容

1.目标网站分析及顶部布局完成 

编写css样式

1.目标网站分析及顶部布局完成 

执行：

1.目标网站分析及顶部布局完成 

设置info宽度1140px(如下图测量得出)，div居中

1.目标网站分析及顶部布局完成 

设置两个p标签左右浮动

1.目标网站分析及顶部布局完成 

效果：

1.目标网站分析及顶部布局完成 

 

本文作者为BUG之神，转载请注明。

分享