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

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

L的博客原创转载: 2019年03月18日 15:56:07808浏览

常用选择器：标记选择器、*通配符、id选择器‘#’定义、类选择器class '.'定义、后代选择器、子元素选择器

实例

<!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；

上一条：优酷浮动案例下一条：使用浮动效果制作优酷首页-2019年3月13日20时

常用选择器，内外边距，块级、行内、行内块元素，浮动

声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。

全部评论

文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多