静态网页制作

在后续学习中主要有布局与样式设置两个问题

1、布局

网页制作最终目的是展示给客户，服务的对象以客户为主，所以网页制作中布局结构非常重要，通常我们使用<div>划分网页，使其形成基础的上下与左右布局，浏览器默认情况下使用<div>上下自动排版，所以主要设置左右布局,左右布局在设置时需要使这两个板块浮动，通过float这个属性创造我们需要的样式。

.youhh_left{
	width: 590px;
	height: auto;
	background-color: white;
	float: left;
}

.youhh_right{
	margin-left: 10px;
	width: 590px;
	height: auto;
	background-color: white;
	float: left;
}

结合网页的尺寸合理使用margin设置宽度间距，完成基础的左右排布

2、样式设置

布局之后需要填充内容，内容的选取以需求为主，使用css样式对静态网页内容属性进行设置，使其排布样式合理，观看效果舒适

2.1、内容对父容器撑开

由于板块的高度需要根据内容高度自适应，所以不能设置固定高度，但是其子元素浮动时不能使其撑开，所以使用 overflow:hidden;属性使其撑开，这个属性在这个样式试用下必须固定搭配子元素的浮动，构造出超过其本身定义下的样式

.youhh{
	margin-top: 10px;
	height: auto;
	overflow: hidden;
}
.youhh_left{
	width: 590px;
	height: auto;
	background-color: white;
	float: left;
}
.youhh_right{
	margin-left: 10px;
	width: 590px;
	height: auto;
	background-color: white;
	float: left;
}

2.2、子元素属性设置问题

通常情况下某一div划分的版块内需要继续排版，通过div划分结构。对这些内容属性设置可以直接使用class属性，添加类名称，每一个元素可以有多个类名，同一个类名也可以赋给很多个元素。

例：<div class =“demo”></div>

.demo {  
    background-color: red;  
    width: 100px;  
    height: 100px;  
} 

div下通常包含很多子元素，子元素标签可以是各类标签，选取子元素时需要选择器

例：div p {}； div, p, span,a {} ； div>p  ...

div p {}  ;  div>p{} 这两个样式在使用中需要区别的是div p{}是直接选择div下边的所有p, div>p{}是作用于div下直接子元素的p,不是直接子元素的p不受影响

div, p, span,a {}  使用逗号连接时，给这些标签下的元素设置同样的样式

2.3、“层”的概念

根据课程学习中所发现使用较多的效果为悬浮时出现某一个颜色一定程度的透明层与边框，这个效果来加强表示我们悬浮此项的效果，所以层是我们人为定义的概念，可以有不同的表示。

悬浮某个子元素时使其出现这个“层”，这种效果可以直接给其添加统计div元素，对这个同级的div进行样式设置，来达到鼠标悬停时显示“层”。

2.3.1、悬浮显示“层”

设置“层”时需要使其隐藏在该元素下方，使用display对鼠标悬停时显示和正常情况下“层”的隐藏进行设置。如下左右对比图：

.youhh_ceng{
	display: none;
	position: absolute;
	float: left;
	width: 181px;
	height: 181px;
	z-index: 1;
	background-color: rgb(255,255,255,0.3);
	
}

.youhh_left_bottom:hover .youhh_ceng{
	display: block;
}

悬浮只能让子集显示，所以选择“层”的位置对于显示效果有影响，例如当“层”与img同级时，悬浮img显示“层”的效果不能出现，使用div包裹img不留间隙,然后设置img同级层，实际上悬浮img出现“层”效果在设置时还是悬浮的他的父元素，当img与其父元素div同样大小时出现想要的效果

2.3.2、悬浮显示异色边框

与悬浮显示“层”同样的会有显示异色边框的效果，直接给div设置其边框属性，在页面上相邻的div会出现边框相邻显示的线条较粗，看起来比较突兀。也可以给其设置对称位置单边框颜色，但是就会在边框接连处出现断点，如果直接只设置一个边框，那么悬浮时要出现全边框就会出现晃动，增大了间距，悬浮时，某一边位置固定，就会向另一边挤来放下悬浮边框，所以会出现晃动。

与“层”的概念相同，“层”是设置一个div，对其背景进行颜色与透明度进行设置，异色边框与其类似，设置div边框即可，其他属性与“层”相似。

“层”是设置div之后的效果，所以这个div内部可以添加并设置子元素，如下左右效果对比显示，上部分出现透明层，下方为带文字描述的非透明层。

.cx_ceng{
	display: none;
	width: 236px;
	height: 377px;
	border: 1px solid orangered;
	position: absolute;
	float: left;
}
.cx_ceng_top{
	width: 237px;
	height: 260px;
	background-color: rgba(255,255,255,0.3);
}
.cx_ceng_bottom{
	margin-top: 5px;
	padding-top: 31px;
	padding-bottom: 20px;
	text-align: center;
	color: white;
	background-color: orangered;
	
}
.cx_ceng_bottom>div:nth-child(1){
	font-size: 18px;
}
.cx_ceng_bottom>div:nth-child(2){
	margin-top: 6px;
	margin-left: 50px;
	padding-top: 10px;
	width: 130px;
	border-top: 1px solid orange;
	font-size: 14px;
}

.cx_bottom_list:hover .cx_ceng{
	display: block;
}

上述为浏览时发现较多出现的样式，使用常用的css样式完成的效果。