DIV+CSS+列表的使用

HTML4到HTML5的区别：
1.新标签
2.<！DOCTPE html>
节点标签
head：头元素
meta：编码方式
title：标题标签
css：
外部样式表 link rel引入
内嵌样式表
em:响应式设计，手机上的标准字体 px
注释：CTRL+/

加id class 给相同标签的区分 类选择器 .p 元素选择器： p 行内元素： 布局 添加背景图片：background_img background repeat:no repeat background:url() no repeat background size:cover;图片整个显示

DIV:盒子模型

DIV标签，称为区隔标记。作用是设定字、画、表格等的摆放位置。我们把它称作“层次”。
DIV元素，是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。

CSS的使用：
css是样式表
1.css的分类：
内嵌式CSS样式：在HTML中的header标签中通过style标签设置，但是会显得代码过于冗 长，一般是不予推荐。
外链式CSS样式：将CSS代码写到css的文件夹下 ，通过link标签引入。一般比较推荐这种将css样式和HTML代码分开会显得代码更整齐

列表的使用
1.列表的分类：
无序列表ul 用type属性设置小点的形状有circle,disc,square
有序列表ol 列表项以数字默认从1开始 想要修改用 start修改列表项的数字

SYROS第一个页面的制作就是将div和css和列表的使用实现的

1.在HTML中放两个div盒子，第一个盒子放置头部的导航栏，第二个盒子放置整个大的布局背景图片。
2.在CSS样式中，通过background：url设置背景图片，因为整个背景图片会充满，所以要对导航栏的盒子和背景的盒子给一个相对位置

.header {
	position: absolute;
	z-index: 1000;
	width: 100%;
	height: 80px;
	background: #ggff44;
	
}

.banner {
	position: absolute;
	background: url(../img/slide_1.jpg) no-repeat;
	background-size: cover;
	width: 100%;
	height: 800px;
}

将导航栏横着显示就直接对整个ul设置一个浮动
下面是HTML的代码和CSS的样式：
HTML代码：

	

	
		
		
		
	

	
		

			
SYROS
			

				

					HOME
					

						
Home Default
							

								
Home Default1
								
Home Default2
								
Home Default3
								
Home Default4
								
Home Default5
							
						
						
Home Onepage
						
Home Business
						
Home Agency
						
Home Landing
						
Home Shop
					
				
				

					PAGES
					

						
Home Default

						
						
Home Onepage
						
Home Business
						
Home Agency
						
Home Landing
						
Home Shop
					
				
				

					PORTFOLIO
					

						
Home Default

						
						
Home Onepage
						
Home Business
						
Home Agency
						
Home Landing
						
Home Shop
					
				
				

					BLOG
					

						
Home Default

						
						
Home Onepage
						
Home Business
						
Home Agency
						
Home Landing
						
Home Shop
					
				
				

					SHOP
					

						
Home Default

						
						
Home Onepage
						
Home Business
						
Home Agency
						
Home Landing
						
Home Shop
					
				
				

					FEATURES
					

						
Home Default

						
						
Home Onepage
						
Home Business
						
Home Agency
						
Home Landing
						
Home Shop
					
				
			

		
		


		
		


		
	

CSS样式：设置CSS样式主要是要弄清楚每个名字

body {
	margin: 0px;
}

.header {
	position: absolute;
	z-index: 1000;
	width: 100%;
	height: 80px;
	background: #ggff44;
	
}

.name {
	margin-left: 30px;
	margin-right: 400px;
	float: left;
	color: white;
}

.menu li {
	
	padding: 15px 15px 40px 15px;
	margin-top: 3px;
	float: left;
	list-style: none; //去掉导航栏的默认小点
}

.menu li a {
	color: white;
	text-decoration: none; //去掉链接标签的下划线
}
/*链接伪类*/
.menu li a:hover{
	color: yellowgreen;
}
.home_ul{
	margin-right: -15px;
	margin-top: 50px;
	background: whitesmoke;
	position: absolute;
	display: none;
	font-size: 16px;
}
.menu li:hover .home_ul{
	display: block;
}
.home_ul li{
	padding-right: 80px;
	float: none;
}
.home_default{
	position: absolute;
	margin-left: 100px;
	margin-top: -20px;
	
	display: none;
	background: yellowgreen;
}
.home_ul:hover .home_default{
	display: block;
}
.br{
	
	position: absolute;
	z-index: 1;
	margin-top: 100px;
	width: 100%;
	height: 2px;
	background:#fffFFF;
}
.banner {
	position: absolute;
	background: url(../img/slide_1.jpg) no-repeat;
	background-size: cover;
	width: 100%;
	height: 800px;
}