DIV+CSS+列表的使用

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代码:



	

	
		
		HOME
		
	

	
		

SYROS

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;
}

你可能感兴趣的:(java)