DIV+CSS+列表的使用

最新推荐文章于 2023-01-03 10:55:02 发布

xxz2645746142

最新推荐文章于 2023-01-03 10:55:02 发布

阅读量2.1k

点赞数 1

分类专栏： java

本文链接：https://blog.csdn.net/xxz2645746142/article/details/82971844

版权

java 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

<!DOCTYPE html>
<html>
	<!---->

	<head>
		<meta charset="UTF-8">
		<title>HOME</title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
	</head>

	<body>
		<div class="header">
			<h2 class="name">SYROS</h2>
			<ul class="menu">
				<li>
					<a href="">HOME</a>
					<ul class="home_ul">
						<li>Home Default
							<ul class="home_default">
								<li>Home Default1</li>
								<li>Home Default2</li>
								<li>Home Default3</li>
								<li>Home Default4</li>
								<li>Home Default5</li>
							</ul>
						</li>
						<li>Home Onepage</li>
						<li>Home Business</li>
						<li>Home Agency</li>
						<li>Home Landing</li>
						<li>Home Shop</li>
					</ul>
				</li>
				<li>
					<a href="">PAGES</a>
					<ul class="home_ul">
						<li>Home Default

						</li>
						<li>Home Onepage</li>
						<li>Home Business</li>
						<li>Home Agency</li>
						<li>Home Landing</li>
						<li>Home Shop</li>
					</ul>
				</li>
				<li>
					<a href="">PORTFOLIO</a>
					<ul class="home_ul">
						<li>Home Default

						</li>
						<li>Home Onepage</li>
						<li>Home Business</li>
						<li>Home Agency</li>
						<li>Home Landing</li>
						<li>Home Shop</li>
					</ul>
				</li>
				<li>
					<a href="">BLOG</a>
					<ul class="home_ul">
						<li>Home Default

						</li>
						<li>Home Onepage</li>
						<li>Home Business</li>
						<li>Home Agency</li>
						<li>Home Landing</li>
						<li>Home Shop</li>
					</ul>
				</li>
				<li>
					<a href="">SHOP</a>
					<ul class="home_ul">
						<li>Home Default

						</li>
						<li>Home Onepage</li>
						<li>Home Business</li>
						<li>Home Agency</li>
						<li>Home Landing</li>
						<li>Home Shop</li>
					</ul>
				</li>
				<li>
					<a href="">FEATURES</a>
					<ul class="home_ul">
						<li>Home Default

						</li>
						<li>Home Onepage</li>
						<li>Home Business</li>
						<li>Home Agency</li>
						<li>Home Landing</li>
						<li>Home Shop</li>
					</ul>
				</li>
			</ul>

		</div>
		<div class="br">

		</div>
		<div class="banner">

		</div>
	</body>

</html>

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

xxz2645746142

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
DIV+CSS+列表的使用

DIV+CSS+列表的使用HTML4到HTML5的区别：1.新标签2.&lt;！DOCTPE html&gt;节点标签head：头元素meta：编码方式title：标题标签css：外部样式表 link rel引入内嵌样式表em:响应式设计，手机上的标准字体 px注释：CTRL+/加id class 给相同标签的区分类选择器.p元素选择器：p行内元素：...
复制链接

扫一扫

专栏目录