HTML学习笔记

最新推荐文章于 2024-09-28 16:29:52 发布

斯人已远，尤赖余温

最新推荐文章于 2024-09-28 16:29:52 发布

阅读量137

点赞数

分类专栏： HTML基础文章标签： html

本文链接：https://blog.csdn.net/qq_20901663/article/details/80232363

版权

HTML基础专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
	<head>
		<title class="htitle">小米商城</title>
		<meta charset="utf-8" />
		<link href="css/main.css" rel="stylesheet" type="text/css"/>
	</head>
	<body>
		<!--导航栏-->
		<div class="nav">
			<!--顶头一级导航-->
			<div class="top">
				<div class="container">
					<ul class="left">
						<li><a href="#">小米商城</a></li>
						<li><a href="#">MIUI</a></li>
						<li><a href="#">loT</a></li>
						<li><a href="#">云服务</a></li>
						<li><a href="#">水滴</a></li>
						<li><a href="#">金融</a></li>
						<li><a href="#">有品</a></li>
						<li><a href="#">SelectRegion</a></li>
					</ul>
					<div class="shoppingbar right">
						<a href="#">购物车</a>
					</div>
					<ul class="right">
						<li><a href="#">登入</a></li>
						<li><a href="#">注册</a></li>
						<li><a href="#">消息通知</a></li>
					</ul>
				</div>
			</div>
			<!--二级导航-->
			<div class="snav">
				二级导航
			</div>
			<!--分类导航-->
			<div class="thnav">
				三级导航
			</div>
		</div>
			
		<!--内容-->
		<div class="container">
			<!--顶头广告-->
			
			<!--小米闪购-->
			
			<!--阶段过渡广告-->
			
			<!--小米手机-->
			
			<!--阶段过渡广告-->
			
			<!--小米家电-->
			
			<!--阶段过渡广告-->
			
			<!--小米智能-->
			
			<!--阶段过渡广告-->
			
			<!--小米搭配-->
			
			<!--阶段过渡广告-->
			
			<!--小米配件-->
			
			<!--阶段过渡广告-->
			
			<!--小米周边-->
			
			<!--阶段过渡广告-->
			
			<!--为你推荐-->
			
			<!--热评产品-->
			
			<!--内容-->
			
			<!--视频-->
			
		</div>
		<div class="footer">
		<!--页脚-->
			<!--底端导航-->
			<div class="footernav">
			底端导航
			</div>
			
			<!--常见底端-->
			<div class="footernava">
			常见底端
			</div>
			
			<!--更常见的底端-->
			<div class="footernavb">
			更常见的底端
			</div>
			
		</div>
	</body>
</html>

CSS元素的三要素

1、继承性

继承性说的是CSS元素具有继承性，但不是所用的属性都能继承，一般的text-、border-、font-、是可以继承的

2、优先性

优先性有的选择器的谁权重高就是用谁的属性去装饰HTML元素，还有就是important的权重最高，内联样式次之（1000）、 ID选择器再次之（0100），然后是类选择器（0010）、最后是标签选择器（0,0,0，1）.他们之间进行组合使用时是不会发生进位操作的，意思就是（0.0.0.10）不会变成（0.0.1.0），不存在进位

3、叠层性

叠层性说的是当两个选择器权重一样的时候，谁靠标签元素近谁就用谁的样式。这里尤为需要注意的是权重的计算方式

*{
	margin:0;
	padding:0;
}
body{
	
}
.left{
	float:left;
}
.right{
	float:right;
}
.top{
	height:40px;
	background:#333;
}
.container{
	width:1226px;
	margin:0 auto;
}
.container:before,.container:after{
	content:" ";
	display:block;
	clear:both;
}
.top ul{
	list-style:none;
}
.top ul li{
	display:inline-block;
}
.top a{
	text-decoration:none;
	font-size:12px;
	display:inline-block;
	height:40px;
	line-height:40px;
	color:#b0b0b0;
	margin-left:11px;
}
li a:hover{
	color:#fff;
}
.shoppingbar{
	padding-left:20px;
	padding-right:20px;
	margin-left:25px;
	background:url(../img/bh.jpg) no-repeat ;
	background-position:20px center;
	
}
.shoppingbar a{
	margin-left:14px;
}
.shoppingbar:hover{
	
	background:#fff url(../img/ht.jpeg) no-repeat;
	background-position:20px center;	
	
}
.shoppingbar a:hover{
	background-color:#fff;
	color:#ff6700;
}