h5作业2

最新推荐文章于 2022-06-26 09:44:29 发布

保持可爱forever

最新推荐文章于 2022-06-26 09:44:29 发布

阅读量650

点赞数

分类专栏： H5作业集合文章标签： H5

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/W_C_X/article/details/87856449

版权

H5作业集合专栏收录该内容

15 篇文章

订阅专栏

2月20日

今日学习内容：

1，css：Cascading Style Sheets层叠样式表

2，css三大选择器：

标签选择器：p，tr，td等标签

id选择器：id属性（唯一属性）

类选择器：class属性

3， css属性：

font-family:定义字体的类型

font-size：字体的大小

font-style:字体的样式

text-align:字体对齐

color：字体颜色

font-weight：字体粗细 
background-color:设置背景颜色
background-image:背景图像，none（没有）或者run（图像路径以及图像名）
background-position:背景图像位置（top,center,bottom）、水平位置：（left，center，right）
background-repeat:背景图像重复的方式：no-repeat不重复，repeat重复，repeat-x水平方向重复，y的话是垂直方向重复
background-size：背景的大小
background：综合应用：background-color，background-image，background-repeat，background-position
padding：内边距
margin：外边距，两者结合是消除所有编剧，都为0
list-style：none 默认去掉小点和lo的序号
display：none 隐藏不占位置，block显示子菜单
text-decoration：none 取消a标签的下划线
line-height：行高，垂直居中
hover鼠标

4，作业代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>wcx's homework'</title>
		<h1>我的家庭作业2月20日</h1>
		<style type="text/css">
			ul{
				padding: 0px;
				margin: 0px;/*死亡组合，实现清楚所有的边框*/
				background-color: #CC99CC;
				width: 150px;
				text-align: center;/*文字居中*/
				font-family: "微软雅黑";
				font-size: 25px;/*字体大小*/
				font-weight: bold;/*字体加粗*/
			}
			.hide{
				display: none;/*列表隐藏*/
				background-color: blanchedalmond;
			}
			li:hover ul
			{
				display: block;/*鼠标经过悬浮*/
			}
			a
			{
				text-decoration: none;/*去掉下划线*/
			}
			
		</style>
	</head>
	<body>
		<ul id="menu">
			<li>
				美女1
				<ul class="hide">
					<li><a href="">性别</a></li>
					<li><a href="">爱好</a></li>
					<li><a href="">地址</a></li>
				</ul>
			</li>
			<li>
				美女2
				<ul class="hide">
					<li><a href="">性别</a></li>
					<li><a href="">爱好</a></li>
					<li><a href="">地址</a></li>
				</ul>
			</li>
			<li>
				美女3
				<ul class="hide">
					<li><a href="">性别</a></li>
					<li><a href="">爱好</a></li>
					<li><a href="">地址</a></li>
				</ul>
			</li>
		</ul>
	</body>
</html>

5，效果展示：