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

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

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

博主信息

博文 5

粉丝 0

评论 0

访问量 5102

专题推荐

更多>

相关推荐

热门教程

更多>

相关教程

热门推荐

最新课程

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

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

L的博客

原创

956人浏览过

常用选择器：标记选择器、*通配符、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；

批改状态：未批改

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

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

0条评论

作者最新博文

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

2019-03-12 18:14:33

关于我们免责申明举报中心意见反馈讲师合作广告合作最新更新 English: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群

PHP中文网订阅号: 每天精选资源文章推送

PHP中文网APP: 随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

PHP学习

技术支持

返回顶部

登录PHP中文网，和优秀的人一起学习！

全站2000+教程免费学