web前端第二次作业

shayell

于 2024-07-22 13:55:58 发布

阅读量574

点赞数 13

文章标签：前端 css css3

本文链接：https://blog.csdn.net/shayell/article/details/140607742

版权

代码：

<html style="
    margin-top: 20px;
    margin-left: 20px;
    margin-bottom: 20px;
    margin-right: 20px;
    border-top-width: 10px;
"><head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="导航栏.css">
		<title></title>
        <style>
            #nav{/*设置最外面的div属性*/
    width: 960px;/*宽*/
    height: 35px;/*高*/
    background-color: #e74141;/*背景颜色*/
    margin: 0 auto;/*div对齐方式居中*/
    margin-top: 30px;/*上边距*/
    border: 20px 30px 40px ;
   
}
 
body,ul,li{
	margin:0;
	padding:0;
	list-style: none;
}
 
#navbar{
	width:100%;
	height:42px;
	background:rgb(28, 75, 169);
	
}
#navbar ul{
	background:rgb(28, 75, 169);
	width:1500px;
	margin: 0 auto;/* 水平居中 */
}
#navbar ul li{/* 父子选择器.这里设置的是ul里的li （一级菜单），如 网站首页、学院概况*/
	width:150px;
	height:42px;
	padding-left: 0;
	display: inline-block;
	text-align: center;
}
#navbar>ul>li{/* 子代选择器，这里的li就是一级菜单，只让一级菜单水平，二级菜单垂直 */
	float:left;/* 浮动:让元素依次水平 */
}
#navbar a{
	text-decoration: none;/* 去掉下划线 */
	/* text-decoration: underline; 下划线*/
	/* text-decoration: overline;线在上面 */
	color: #fff;/* 字体颜色为白色 */
	text-align: center;
	line-height: 42px;/*行高*/
	font-size: 14px;
	
}
#navbar a:hover{/* 伪类选择器 ，设置鼠标悬停时的样式*/
	text-decoration: underline;
	color:orange;
}
#navbar li ul{/* 父子选择器,设置的是li里的ul（二级菜单），如学校要闻、系统概述 */
	display: none;/* 隐藏元素 */
	 width: 120px;
	 text-align: center;
	 float: left;
	/* text-align: left; */
}
#navbar>ul>li:hover ul{/*hover的不是li，而是li的孩子ul （通过li选择到孩子里的ul） */
	display:block;
	width: 160px;
	font-size: 6px;
	/* 显示元素 */
}
        </style>
	</head>
	<body>
		
		<nav id="navbar">
			<ul>
				<li><a href="#">游戏1</a></li>
				<li>
					<a href="#">游戏2</a>
					<ul>
						<li><a href="#">英雄联盟</a></li>
						<li><a href="#">300英雄</a></li>
					
			         
					</ul>
					</li>
				<li>
					<a href="#">游戏3</a>
					<ul>
						<li><a href="#">cf</a></li>
						<li><a href="#">csgo</a></li>
						<li><a href="#">apex</a></li>
					</ul>
					</li>
				<li><a href="#">游戏4</a>
				<ul>
					<li><a href="#">永劫无间</a></li>
				</ul></li>
				<li>
					<a href="#">游戏5</a>
					
					</li>
				<li><a href="#">游戏6</a></li>
				<li>
					<a href="#">游戏7</a>
				</li>	
			</ul>
		</nav>
</body>
</html>

结果：

盒子模型

盒子模型之外边距实现盒子居中

盒子实现居中，需要满足以下两个条件

必须是块级元素
必须指定了宽度（width）

给左右的外边距都设置为auto，就可以实现块级

.nav { width: 500px; margin: 0 auto; }

文字盒子居中图片和背景区别

文字水平居中是 text-align: center

盒子水平居中左右margin改为 auto

text-align: center; /* 文字居中水平 */
margin: 10px auto; /* 盒子水平居中 左右margin改为auto*/

插入图片
背景图片一般用于小图标背景或者超大背景图片
```
.img {
	width: 200px;
	height: 210px; /* 插入图片更改大小 */
	margin-top: 30px; /* 插入图片更改位置 可以使用margin或padding */
	margin-left: 50px; /* 插入当图片也是一个盒子 */
}

.back {
	width: 400px;
	height: 400px;
	border: 1px solid pink;
	background: #fff url(images/br.jpg) no-repeat;
	background-size: 200px 210px; /* 背景图片更改大小只能用 background-size */
	background-position: 30px 50px; /* 背景图片更改位置用background-position */
}
```
清楚元素的默认内外边距

为了更方便的控制网页中的元素，制作网页时，可清楚元素的默认内外边距（格式化）
```
* {
	padding: 0;
	margin: 0;
}
```
外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

1.相邻块元素垂直外边距的合并
当上下相邻的两个块级元素相遇时，如果上面的元素有下外边距margin-bottom,下面元素有上外边距margin-top，则他们之间的垂直距离不是margin-bottom和margin-top的之和，而是他们两者之间距离较大的那个，这种现象被称为相邻块元素垂直外边距的合并（外边距塌陷）。
解决方案