第三课常用的选择器、元素的显示及内外边框、浮动的相关知识 2019年3月13日 22点 - 作业

Home > List of blog posts > 第三课常用的选择器、元素的显示及内外边框、浮动的相关知识 2019年3月13日 22点

Blogger Information

Blog 5

fans 0

comment 0

visits 4259

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="icon" type="image/x-icon" href="static/images/favicon.ico">
	<!-- 外部样式表，可以共享 -->
	<link rel="stylesheet" type="text/css" href="static/css/class.css">
	<title>常用选择器</title>
	<!-- 内部样式 -->
	<style type="text/css">
		/*基础选择器*/
		/*标记选择器*/
		body{}
		/*  *是选择器中的通配符，所有标签都有的属性，表示所有标签都遵循统一样式；*/
		*{margin: 0;padding: 0;}
		/*id选择器 “#”来定义 唯一性；*/
		#box{
			width: 200px;
			height: 200px;
			background: blue;
		}
		/*类选择器class “.”来定义，用于描述一组元素的样式 class可以在多个元素中使用*/
		.main{border: 1px solid;}
		p.main{width: 300px;}
		.l{box-shadow: 2px 2px 1px pink}
		/*多类(元素的calss属性可能不止包含一个单词而是一串单词，各个单词之间用空格隔开)*/

		/*选择器的分组：选择器就可以分享相同的声明 写法:用逗号将分组中的选择器分开*/
		h1,h2,h3{color: yellow;}
		/*后代选择器*/
		div span{color: green;}
		 /*子元素选择器 子选择器使用了大于号（子结合符）*/ 
		p span{color: rgba(188,188,188,0.8);}
	</style>
</head>
<body>
	<div id="box" >123</div>
<!--   使元素同时拥有多个class的样式 -->
	<p class="main l ">123</p>
	<h1>1</h1>
	<h2>2</h2>
	<h3>3</h3>
	<span>span</span>
	<div>
  	<span>欢迎来到中文网!</span>
 	</div>

 	<p>
  		<span>欢迎来到中文网!</span>
  		<b>
  			<span>灭绝小师太!</span>
  		</b>
 	</p>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

块级、行内、行内块元素相互转换

display三个属性：{inline：转换为行内元素、inline-block：转换为行内块状元素、block转换为块状元素}

margin外边距，padding内边距，上右下左、、上下左右、、上左右下

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="icon" type="image/x-icon" href="static/images/favicon.ico">
	<title>元素的显示及内外边距</title>
	<style type="text/css">
		*{margin: 0;padding: 0;}
		div,p,h1{width: 200px;height: 20px;background: red;margin: 10px;}
		/*块级、行内、行内块元素相互转换*/
		/*display 属性规定元素应该生成的框的类型*/
		/*display:inline;转换为行内元素*/
		div{display:inline;}
		/*display:inline-block;转换为行内块状元素*/
			
		/*display:block;转换为块状元素*/
		span{display: block;}
		/* 内外边距:(margin\padding)*/
		/* 内边距 padding*/
   	  	/*元素的内边距在边框和内容区之间;*/
    	/* 特点:设置内边距会撑开元素框;*/
        /*设置单边内边距:
        padding-left:;
        padding-right
        padding-bottom
        padding-top*/
        /*  复合写法:padding:上 右 下 左  padding:上下  左右  padding:上 左右 下;*/
        /*外边距:margin;
    	  围绕在元素边框的空白区域是外边距;*/
   		/* 设置单边外边距：
        margin-top
        margin-right
        margin-bottom
        margin-left*/
        /*复合写法:margin:上 右 下 左  margin:上下  左右  margin:上 左右 下; margin:0 auto;(auto意思是设置等宽空白)*/
	</style>
</head>
<body>
	<!-- 块级元素:能够识别宽高，独占一行，多个块状元素标签写在一起，默认排列方式为从上至下 -->
	<div>1</div>
	<p>2</p>
	<h1>3</h1>
	<!-- 行内元素:设置宽高无效,对margin仅设置左右方向有效，上下无效,不会自动进行换行 -->
	<b>11</b>
	<span>22</span>
	<!-- 行内块:行内块状元素综合了行内元素和块状元素的特性，但是各有取舍、不自动换行 能够识别宽高(img input) -->
	<img src="static/images/a.jpg" width="300">
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

浮动float 属性：left、 right；清除浮动clear：both;(非常重要)

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="icon" type="image/x-icon" href="static/images/favicon.ico">
	<title>元素的显示及内外边距</title>
	<style type="text/css">
		*{margin: 0;padding: 0;}
		div,p,h1{width: 200px;height: 20px;background: red;margin: 10px;}
		/*块级、行内、行内块元素相互转换*/
		/*display 属性规定元素应该生成的框的类型*/
		/*display:inline;转换为行内元素*/
		div{display:inline;}
		/*display:inline-block;转换为行内块状元素*/
			
		/*display:block;转换为块状元素*/
		span{display: block;}
		/* 内外边距:(margin\padding)*/
		/* 内边距 padding*/
   	  	/*元素的内边距在边框和内容区之间;*/
    	/* 特点:设置内边距会撑开元素框;*/
        /*设置单边内边距:
        padding-left:;
        padding-right
        padding-bottom
        padding-top*/
        /*  复合写法:padding:上 右 下 左  padding:上下  左右  padding:上 左右 下;*/
        /*外边距:margin;
    	  围绕在元素边框的空白区域是外边距;*/
   		/* 设置单边外边距：
        margin-top
        margin-right
        margin-bottom
        margin-left*/
        /*复合写法:margin:上 右 下 左  margin:上下  左右  margin:上 左右 下; margin:0 auto;(auto意思是设置等宽空白)*/
	</style>
</head>
<body>
	<!-- 块级元素:能够识别宽高，独占一行，多个块状元素标签写在一起，默认排列方式为从上至下 -->
	<div>1</div>
	<p>2</p>
	<h1>3</h1>
	<!-- 行内元素:设置宽高无效,对margin仅设置左右方向有效，上下无效,不会自动进行换行 -->
	<b>11</b>
	<span>22</span>
	<!-- 行内块:行内块状元素综合了行内元素和块状元素的特性，但是各有取舍、不自动换行 能够识别宽高(img input) -->
	<img src="static/images/a.jpg" width="300">
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

仿优酷首页小案例

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="icon" type="image/x-icon" href="static/images/1.ico">
	<title>优酷-这世界很酷</title>
	<style type="text/css">
		*{margin: 0;padding: 0}
		/*整体宽度*/
		.contents{
			width: 1200px;
			margin: 50px auto;			
		}
		.content{width: 100%;margin-top: 20px;}
		.contentul{line-height: 70px;} /*行高*/
		.clear{clear: both;}	/*清除浮动*/
		li{list-style: none;}   /*去除li标签自带样式*/
		.tv1 img{
			width: 190px;
			height: 280px;
		}
		.tv2 img{
			width: 190px;
			height: 110px;
		}
		a{
			text-decoration: none;    /*去除a标签自带样式*/
			color: black;
		}
		a:hover{ color: red;text-decoration: underline;	}  /*伪元素*/
		.f{float: left;}		/*左浮动*/
		.mr{margin-right: 10px;}
		.ml{margin-left: 20px}
		.mg{margin-top: 14px;}
		small{color: #999999;}
		h2{font-family: 宋体}
	</style>
</head>
<body>
	<div class="contents">
		<div class="content">
			<div class="contentul">
				<h2>正在热播</h2>
			</div>
			<ul class="tv1">
				<li class="mr f">
					<a href="https://v.youku.com/v_show/id_XNDA5NDgxNzQxNg==.html?spm=a2ha1.12325017.m_4846.5~5!2~5~5~5~5~A" target="_blank">
						<img src="static/images/a.jpg"><br>
						<span>瞰中国：宁夏</span>
					</a><br>
					<small>低调的宁夏 美了四季</small>
				</li>
			</ul>
			<ul class="tv1">
				<li class="mr f">
					<a href="https://v.youku.com/v_show/id_XNDA4OTQ0ODQ4NA==.html?spm=a2ha1.12325017.m_4846.5~5!2~5~5!2~5~5~A" target="_blank">
						<img src="static/images/b.jpg"><br>
						<span>新喜剧之王</span>
					</a><br>
					<small>周星驰式喜剧再度来袭</small>
				</li>
			</ul>
			<ul class="tv1">
				<li class="mr f">
					<a href="https://v.youku.com/v_show/id_XNDA4NDU1Njc2OA==.html?spm=a2ha1.12325017.m_4846.5~5!2~5~5!3~5~5~A" target="_blank">
						<img src="static/images/c.jpg"><br>
						<span>航拍中国 第二季</span>
					</a><br>
					<small>航拍展现中国自然美景</small>
				</li>
			</ul>
			<ul class="tv1">
				<li class="mr f">
					<a href="https://v.youku.com/v_show/id_XNDAyNjc5NzE4OA==.html?spm=a2ha1.12325017.m_4846.5~5!2~5~5!4~5~5~A" target="_blank">
						<img src="static/images/d.jpg"><br>
						<span>新相亲大会 第一季</span>
					</a><br>
					<small>父母把关助攻代际相亲</small>
				</li>
			</ul>
			<ul class="tv1">
				<li class="mr f">
					<a href="https://v.youku.com/v_show/id_XMzg4MTg4ODIzNg==.html?spm=a2ha1.12325017.m_4846.5~5!2~5~5!5~5~5~A" target="_blank">
						<img src="static/images/e.jpg"><br>
						<span>不良人 第三季</span>
					</a><br>
					<small>王者弈天下大唐生死局</small>
				</li>
			</ul>
			<ul class="tv1">
				<li >
					<a href="https://v.youku.com/v_show/id_XNDA5MjAxMzcyNA==.html?spm=a2ha1.12325017.m_4846.5~5!2~5~5!6~5~5~A" target="_blank">
						<img src="static/images/f.jpg"><br>
						<span>大冰小将 第一季</span>
					</a><br>
					<small>千玺雷佳音冰雪大狂欢</small>
				</li>
			</ul>
			<div class="clear"></div>
		</div>
		<div class="content">
			<div class="contentul">
				<h2 class="f"><a href="https://tv.youku.com/?spm=a2ha1.12325017.m_2556.5~5~H2~A">剧集></a></h2>
				<ul>
					<li class="f ml"><a href="">最新</a></li>
					<li class="f ml"><a href="">大陆剧</a></li>
					<li class="f ml"><a href="">日韩剧</a></li>
					<li class="f ml"><a href="">港台剧</a></li>
					<li class="f ml"><a href="">英美剧</a></li>
				</ul><br>
			</div>
			<div class="clear"></div>
			<div>
				<div class="f mr">
					<a href="https://v.youku.com/v_show/id_XNDA5MDAxMzk5Mg==.html?spm=a2ha1.12325017.m_2556_c_8261.5~5~5~5~A" target="_blank">
						<img src="static/images/tv.jpg" style="width: 390px;height: 280px;"><br>
						<span>只为遇见你·张嘴吃糖</span>
					</a><br>
					<small>行走的“撩妹宝典”！霸气帅总撩动你的少女心</small>
				</div>
			</div>
			<div class="tv2">
				<div class="f mr">
					<a href="https://v.youku.com/v_show/id_XNDA3OTMzMTE4MA==.html?spm=a2ha1.12325017.m_2556_c_8261.5~5!2~5~5~5~A" target="_blank">
						<img src="static/images/tv1.jpg"><br>
						<span>都挺好</span>
					</a><br>
					<small>姚晨郭京飞陷亲情旋涡</small>
				</div>
			</div>
			<div class="tv2">
				<div class="f mr">
					<a href="https://v.youku.com/v_show/id_XNDAxNTc2MTQ3Ng==.html?spm=a2ha1.12325017.m_2556_c_8261.5~5!2~5!2~5~5~A" target="_blank">
						<img src="static/images/tv2.jpg"><br>
						<span>乡村爱情11</span>
					</a><br>
					<small>刘能赵四争C位</small>
				</div>
			</div>
			<div class="tv2">
				<div class="f mr">
					<a href="https://v.youku.com/v_show/id_XNDA3MTIyMjk0NA==.html?spm=a2ha1.12325017.m_2556_c_8261.5~5!2~5!3~5~5~A" target="_blank">
						<img src="static/images/tv3.jpg"><br>
						<span>老中医</span>
					</a><br>
					<small>陈宝国冯远征许晴弘扬医道</small>
				</div>
			</div>
			<div class="tv2">
				<div class="f mr">
					<a href="https://v.youku.com/v_show/id_XNDA0NTE5NjA2MA==.html?spm=a2ha1.12325017.m_2556_c_8261.5~5!2~5!4~5~5~A" target="_blank">
						<img src="static/images/tv4.jpg"><br>
						<span>国宝奇旅</span>
					</a><br>
					<small>刘烨袁姗姗携手护国宝</small>
				</div>
			</div>
			<div class="tv2">
				<div class="f mr mg">
					<a href="https://v.youku.com/v_show/id_XNDA5MTM3NTIzMg==.html?spm=a2ha1.12325017.m_2556_c_8261.5~5!3~5~5~5~A" target="_blank">
						<img src="static/images/tv5.jpg"><br>
						<span>重耳传奇</span>
					</a><br>
					<small>春秋版“王子历险记”</small>
				</div>
			</div>
			<div class="tv2">
				<div class="f mr mg">
					<a href="https://v.youku.com/v_show/id_XNDA5MTc1NDk4NA==.html?spm=a2ha1.12325017.m_2556_c_8261.5~5!3~5!2~5~5~A" target="_blank">
						<img src="static/images/tv6.jpg"><br>
						<span>春暖花又开</span>
					</a><br>
					<small>姚芊羽李建上演新农村创业</small>
				</div>
			</div>
			<div class="tv2">
				<div class="f mr mg">
					<a href="https://v.youku.com/v_show/id_XNDA1NzYzNjM3Mg==.html?spm=a2ha1.12325017.m_2556_c_8261.5~5!3~5!3~5~5~Aa" target="_blank">
						<img src="static/images/tv7.jpg"><br>
						<span>逆流而上的你</span>
					</a><br>
					<small>潘粤明马丽咸鱼夫妻带娃逆袭</small>
				</div>
			</div>
			<div class="tv2">
				<div class="f mr mg">
					<a href="https://v.youku.com/v_show/id_XNDAwMTI0ODY4NA==.html?spm=a2ha1.12325017.m_2556_c_8261.5~5!3~5!4~5~5~A" target="_blank">
						<img src="static/images/tv8.jpg"><br>
						<span>小女花不弃</span>
					</a><br>
					<small>林依晨张彬彬苏甜来袭</small>
				</div>
			</div>
			<div class="clear"></div>
		</div>
	</div>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

知识点总结

常用选择器：标记选择器
*通配符：所有标签都有的属性、遵循统一样式
id选择器‘#’定义、唯一性
类选择器class '.'定义、一组元素的样式 class可以在多个元素中使用
选择器的分组：选择器就可以分享相同的声明写法:用逗号将分组中的选择器分开
后代选择器、
子元素选择器：子选择器使用了大于号（子结合符）
块级、行内、行内块元素相互转换
display:inline转换为行内元素; block转换为块状元素; inline-block转换为行内块状元素;
外边距margin、内边距padding；
浮动float：left right；清除浮动（重要）clear：both；

Correction status：Uncorrected

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

第一课web前段html基础标签和属性使用及简单案例练习2019年3月11日 22点

2019-03-12 18:14:33