2.4学习

Posted on 2020-02-04 22:28 九天龙凤阅读(125) 评论(0) 收藏举报

Div 它是一个 html 标签，一个块级元素(单独显示一行)。它单独使用没有任何意义，必须结合 CSS 来使用。它主要用于页面的布局。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>div效果演示</title>
		<style>
			div{
				border: 1px solid red;
				width: 400px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div id="">
			传智播客
		</div>
		传智博客AAA
	</body>
</html>

Span 它是一个 html 标签，一个内联元素(显示一行)。它单独使用没有任何意义，必须结合 CSS 来使用。它主要用于对括起来的内容进行样式的修饰。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>span演示</title>
		<style>
			span{
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<span>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！
		</span>
		AAAAA
	</body>
</html>

CSS概述：
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

CSS 的作用？
HTML：它是整个网站的骨架。
CSS：它是对整个网站骨架的内容进行美化(修饰)

CSS 如何使用？
语法和规范
选择器{
属性名 1:属性值 1;
属性名 2:属性值 2;
属性名 3:属性值 3;
}
style：设置样式
color：颜色
font-size：字体大小
pink：粉红色
gold：金黄色
gray：灰色
blue：蓝色
red：红色
yellow：黄色
black：黑色
white：白色
background-color：背景颜色
元素选择器（全部）

元素名{

属性名 1:属性值 1;

属性名 2:属性值 2;

属性名 3:属性值 3;

}

如果多个相同的元素设置相同的样式，使用此种方式最为合适。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>元素选择器</title>
		<style>
			div{
				font-size: 30px;
				color: pink;
			}
		</style>
	</head>
	<body>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！22
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！33
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！44
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！55
		</div>
	</body>
</html>

类选择器（部分）

类名{

属性名 1:属性值 1;

属性名 2:属性值 2;

属性名 3:属性值 3;

}

对多个元素设置相同的样式，此时使用类选择器比较合适。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>类选择器</title>
		<style>
			.div2{
				font-size: 30px;
				color: gold;
			}
		</style>
	</head>
	<body>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11
		</div>
		<div class="div2">
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！22
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！33
		</div>
		<div class="div2">
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！44
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！55
		</div>
	</body>
</html>

id选择器（一个）

#id 属性名{

属性名 1:属性值 1;

属性名 2:属性值 2;

属性名 3:属性值 3;

}

Id 保证唯一。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>id选择器</title>
		<style>
			#div5{
				font-size: 30px;
				color: yellow;
			}
		</style>
	</head>
	<body>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11
		</div>
		<div class="div2">
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！22
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！33
		</div>
		<div class="div2">
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！44
		</div>
		<div id="div5">
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！55
		</div>
	</body>
</html>

层级选择器

元素名子元素名{

属性名 1:属性值 1;

属性名 2:属性值 2;

属性名 3:属性值 3;

}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>层级选择器</title>
		<style>
			div p{
				font-size: 30px;
				color: green;
			}
		</style>
	</head>
	<body>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！22
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！33
		</div>
		<div>
			<p>
				逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！44
			</p>
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！55
		</div>
		<p>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！44
		</p>
	</body>
</html>

属性选择器

元素名[属性名=”属性值”]{

属性名 1:属性值 1;

属性名 2:属性值 2;

属性名 3:属性值 3;

}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>属性选择器</title>
		<style>
			input[type="text"]{
				background-color: red;
			}
			input[type="password"]{
				background-color: blue;
			}
		</style>
	</head>
	<body>
		用户名：<input type="text" name="username" /><br />
		密码：<input type="password" name="password" />
	</body>
</html>

内部引入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>内部引入</title>
		<style type="text/css">
			div{
				font-size: 30px;
				color: pink;
			}
		</style>
	</head>
	<body>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！22
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！33
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！44
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！55
		</div>
	</body>
</html>

行内引入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>行内引入</title>
		<style type="text/css">
			div{
				font-size: 30px;
				color: pink;
			}
		</style>
	</head>
	<body>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！22
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！33
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！44
		</div>
		<div style="font-size: 20px;color: blue;">
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！55
		</div>
	</body>
</html>

外部引入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>外部引入</title>
		<link rel="stylesheet" href="style.css" type="text/css" />
	</head>
	<body>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！22
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！33
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！44
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！55
		</div>
	</body>
</html>

div{
	font-size: 30px;
	color: pink;
}

css浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css浮动</title>
		<style>
			#one{
				border: 1px solid red;
				width: 300px;
				height: 150px;
				float: left;
			}
			#two{
				border: 1px solid black;
				width: 300px;
				height: 150px;
			}
			#three{
				border: 1px solid blue;
				width: 300px;
				height: 150px;
			}
			/*清除浮动*/
			#clear{
				clear: both;
			}
		</style>
	</head>
	<body>
		<div id="one">
			
		</div>
		<div id="clear">
			
		</div>
		<div id="two">
			
		</div>
		<div id="three">
			
		</div>
	</body>
</html>

盒子模型：

在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。而默认情况下，内边距、边框和外边距的值均为 0.

占据页面大小的区域是整个元素框的总尺寸！默认情况，padding、margin、border均为 0，假如我们设定了区域内容的 width 和 height，那么此时整个元素框的总尺寸就是该区域内容的宽高了，此时，如果设定了 margin 值，那么整个元素框的总尺寸会发生变化(变大了)，但是我们希望它的整体布局不发生变化！所有我们可以修改区域内容的尺寸(原有大小减去设定的 margin 值)。

display属性

border：边框
width：宽度
height：高度
margin：外边距
padding：内边距
float：浮动
clear：清除
none：无(元素不浮动)
left：左边
right：右边
both：都(同时)
display：显示方式
block：显示的(显示为块级元素)
inline：在一行(显示为内联元素)
div：块级元素的区域
span：内联元素的区域
element：元素
top：顶部
bottom：底部
product：产品，商品
header：头部信息
menu：菜单
show：显示
father：父亲
big：大的
small：小的

使用DIV+CSS首页重新布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>首页</title>
		<style>
			#father{
				border: 1px solid red;
				width: 1300px;
				height: 2170px;
				margin: auto;
			}
			/*#logo{
				border: 1px solid black;
				width: 1300px;
				height: 50px;
			}*/
			.top{
				border: 1px solid blue;
				width: 431px;
				height: 50px;
				float: left;
			}
			#top{
				padding-top: 12px;
				height: 38px;
			}
			#menu{
				border: 1px solid red;
				width: 1300px;
				height: 50px;
				background-color: black;
			}
			ul li{
				display: inline;
				color: white;
			}
			#clear{
				clear: both;
			}
			#product{
				border: 1px solid red;
				width: 1300px;
				height: 558px;
			}
			#product_top{
				border: 1px solid blue;
				width: 100%;
				height: 45px;
				padding-top: 8px;
			}
			#product_bottom{
				border: 1px solid green;
				width: 100%;
				height: 500px;
			}
			#product_bottom_left{
				border: 1px solid red;
				width: 200px;
				height: 500px;
				float: left;
			}
			#product_bottom_right{
				border: 1px solid blue;
				width: 1094px;
				height: 500px;
				float: left;
			}
			#big{
				border: 1px solid red;
				width: 544px;
				height: 248px;
				float: left;
			}
			#small{
				border: 1px solid blue;
				width: 180px;
				height: 248px;
				float: left;
				/*让里面的内容居中*/
				text-align: center;
			}
			#bottom{
				text-align: center;
			}
			a{
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<div id="father">
			<!--1.logo部分-->
			<div id="logo">
				<div class="top">
					<img src="../img/logo2.png" height="46px" />
				</div>
				<div class="top">
					<img src="../img/header.png" height="46px" />
				</div>
				<div class="top" id="top">
					<a href="#">登录</a>
					<a href="#">注册</a>
					<a href="#">购物车</a>
				</div>
			</div>
			<div id="clear">
				
			</div>
			<!--2.导航栏部分-->
			<div id="menu">
				<ul>
					<a href="#"><li style="font-size: 20px;">首页</li></a>    
					<a href="#"><li>手机数码</li></a>    
					<a href="#"><li>家用电器</li></a>    
					<a href="#"><li>鞋靴箱包</li></a>    
					<a href="#"><li>孕婴保健</li></a>    
					<a href="#"><li>奢侈品</li></a>
				</ul>
			</div>
			<!--3.轮播图部分-->
			<div id="">
				<img src="../img/1.jpg" width="100%" />
			</div>
			<!--4.最新商品-->
			<div id="product">
				<div id="product_top">
					   
					<span style="font-size: 25px;padding-top: 8px;">最新商品</span>   
					<img src="../img/title2.jpg" />
				</div>
				<div id="product_bottom">
					<div id="product_bottom_left">
						<img src="../img/big01.jpg" width="100%" height="100%" />
					</div>
					<div id="product_bottom_right">
						<div id="big">
							<a href="#"><img src="../img/middle01.jpg" width="100%" height="100%" /></a>
						</div>
						<div id="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">￥399.00</p>
						</div>
						<div id="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">￥399.00</p>
						</div>
						<div id="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">￥399.00</p>
						</div>
						<div id="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">￥399.00</p>
						</div>
						<div id="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">￥399.00</p>
						</div>
						<div id="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">￥399.00</p>
						</div>
						<div id="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">￥399.00</p>
						</div>
						<div id="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">￥399.00</p>
						</div>
						<div id="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">￥399.00</p>
						</div>
					</div>
				</div>
			</div>
			<!--5.广告图片-->
			<div id="">
				<img src="../img/ad.jpg" width="100%" />
			</div>
			<!--6.热门商品-->
			<div id="product">
				<div id="product_top">
					   
					<span style="font-size: 25px;padding-top: 8px;">最新商品</span>   
					<img src="../img/title2.jpg" />
				</div>
				<div id="product_bottom">
					<div id="product_bottom_left">
						<img src="../img/big01.jpg" width="100%" height="100%" />
					</div>
					<div id="product_bottom_right">
						<div id="big">
							<a href="#"><img src="../img/middle01.jpg" width="100%" height="100%" /></a>
						</div>
						<div id="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">￥399.00</p>
						</div>
						<div id="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">￥399.00</p>
						</div>
						<div id="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">￥399.00</p>
						</div>
						<div id="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">￥399.00</p>
						</div>
						<div id="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">￥399.00</p>
						</div>
						<div id="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">￥399.00</p>
						</div>
						<div id="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">￥399.00</p>
						</div>
						<div id="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">￥399.00</p>
						</div>
						<div id="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">￥399.00</p>
						</div>
					</div>
				</div>
			</div>
			<!--7.广告图片-->
			<div id="">
				<img src="../img/footer.jpg" width="100%" />
			</div>
			<!--8.友情链接和版权信息-->
			<div id="bottom">
				<a href="#">1234</a>
				<a href="#">2234</a>
				<a href="#">3234</a>
				<a href="#">4234</a>
				<a href="#">5234</a>
				<a href="#">6234</a>
				<a href="#">7234</a>
				<a href="#">8234</a>
				<p>
					123456789
				</p>
			</div>
		</div>
	</body>
</html>

刷新页面返回顶部