CSS使用，行内边距与元素显示，浮动，优酷布局案例--PHP五期培训线上班 - HTML与CSS

Home > List of blog posts > CSS使用，行内边距与元素显示，浮动，优酷布局案例--PHP五期培训线上班

Blogger Information

Blog 6

fans 0

comment 2

visits 5379

Special Recommendation

More>

Related recommendations

Related Tutorials

Popular Recommendations

Latest courses

The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)

1421767 times of learning
Collection
PHP introductory tutorial one: Learn PHP in one week

4266168 times of learning
Collection
JAVA Beginner's Video Tutorial

2520112 times of learning
Collection

Latest Downloads

More>

Web Effects

Website Source Code

Website Materials

Front End Template

CSS使用，行内边距与元素显示，浮动，优酷布局案例--PHP五期培训线上班

Original

871 people have browsed it

内容包括四个知识点，每一个知识点均对应一个实例。实例放在文章最后。

一、CSS层叠样式表的使用

1.三种使用方法：内部、外部、内联

内部样式写在<head>中的<style>标签中，作用于当前文档

例如：

<head>

</style>

</head>

外部样式写在<head>中的<link>标签中,引入外部CSS文件，推荐使用，多个页面文档可以共享一个CSS文件

例如：

内联样式写在标签中，作用于当前元素，在大型项目中较少使用，会导致页面加载量大，代码难维护

例如：

2.优先级：内联>内部>外部

3.常用CSS选择器

选择器是需要改变样式的HTML元素

（1）标记选择器

例如：body{}

（2）*号选择器，*号是通配符，表示所有标签都要遵循的样式

例如：*{}

（3）id选择器，以#来定义，具备唯一性，即id不能重复

例如：#box{

width: 200px;

height: 200px;

background: red;

}

（4）class类选择器，以"."来定义，用于描述一组元素的样式，class可以在多个元素中使用，又分为单类与多类

单类：

例如：.main{

width: 198px;

height: 100px;

border: 1px solid red;

}

多类：可以使元素同时拥有多个class的样式，class属性可能不止包含一个单词而是一串单词，每个单词可以表述一类属性，各个单词之间用空格隔开

例如：.l{

box-shadow: 2px 2px 10px blue;

}

.r{

color: red;

}

<p class="l r" >多类的使用</p>

（5）选择器的分组：选择器可以分享相同的声明，用逗号将分组中的选择器分隔

例如：h1,h3,#box{

color: blue;

}

（6）派生选择器：通过元素在文档中位置的上下文关系来定义样式，可以使标记更加简洁，又分为后代选择器与子元素选择器

后代选择器，空格隔开元素：

例如：p span{

color: #ff6500;

}

子元素选择器：使用大于符号（子结合符）

例如： p>span{

color: red;

}

二、行内边距与元素显示

1.内外边距：margin/padding

内边距：padding，元素的内边距在边框和内容之间，特点是会撑开元素框。可以设置单边边距padding-left。

（1）复合写法padding:上右下左;

（2）复合写法padding:上下左右;

（3）复合写法padding:上左右下;

外边距：margin，围绕在元素边框的空白区域是外边距。也可以设置单边边距margin-top。

（1）复合写法margin:上右下左;

（2）复合写法margin:上下左右;

（3）复合写法margin:上左右下;

（4）复合写法margin:0px auto;块级元素居中效果，auto意思为设置等宽空白

2.元素的显示：行内、块级、行内块(display:none/block/inline-block/inline)

（1）块级元素：能够识别宽高，独占一行，多个块级元素标签写在一起，默认排列方式为从上至下。例如：div p h1

（2）行内元素：设置宽高无效，对margin仅设置左右方向有效，上下无效，不会自动进行换行。例如：span b

（3）行内块：综合了行内元素和块级元素的特点，但是各有取舍，不自动换行，能识别宽高。例如：img input

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

display属性规定元素应该生成的框的类型，display:inline，转换为行内元素，display:inline-block，转换为行内块元素，display:block，转换为块级元素

三、浮动（难点）

float属性，实现元素的浮动，属性值有left right

浮动的框可以水平方式移动，直到它的外边缘碰到包含框或另外一个浮动框为止

浮动让元素的位置与文档流无关，因此不占据空间，浮动元素变成块级框

做个浮动一定要清除浮动，很重要。.clear{clear: both;}

四、案例

写了几次，对框架布局的概念有所了解。对CSS的应用以及浮动理解较大。

实例一

<!-- CSS层叠样式表：内部、外部、内联
	优先级：内联>内部>外部
	常用CSS选择器
	选择器：需要改变样式的HTML元素
 -->
 <!DOCTYPE html>
 <html>
 <head>
 	<meta charset="utf-8">
 	<title>常用CSS选择器</title>
 	<!-- 外部样式,引入外部CSS文件，推荐使用，多个页面文档可以共享一个CSS文件 -->
 	<link rel="stylesheet" type="text/css" href="static/css/style.css">
 	<!-- 内部样式，作用于当前文档 -->
 	<style type="text/css">
 		/*基础选择器：*/
 		/*标记选择器*/
 		body{}
 		/* *号是通配符，表示所有标签都要遵循的样式*/
 		*{}
 		/*id选择器，以#来定义，具备唯一性，即id不能重复*/
 		#box{
 			width: 200px;
 			height: 200px;
 			background: red;
 		}
 		/*类选择器class，以"."来定义，用于描述一组元素的样式，class可以在多个元素中使用*/
 		/*单类：*/
 		.main{
 			width: 198px;
 			height: 100px;
 			border: 1px solid red;
 		}
 		p.main{
 			border: 1px solid red;
 		}
 		/*多类，可以使元素同时拥有多个class的样式，class属性可能不止包含一个单词而是一串单词，每个单词可以表述一类属性，各个单词之间用空格隔开*/
 		.l{
 			box-shadow: 2px 2px 10px blue;
 		}
 		.r{
 			color: red;
 		}
 		/*选择器的分组：选择器可以分享相同的声明，用逗号将分组中的选择器分隔*/
 		h1,h3,#box{
 			color: blue;
 		}
 		/*派生选择器：通过元素在文档中位置的上下文关系来定义样式，可以使标记更加简洁*/
 		/*CSS后代选择器*/
 		p span{
 			color: #ff6500;
 		}
 		/*子元素选择器，使用大于符号（子结合符）*/
 		p>span{
 			color: red;
 		}
 	</style>
 </head>
 	<!-- 内联样式，作用于当前元素，在大型项目中较少使用，会导致页面加载量大，代码难维护 -->
 <body style=" ">
 	<div id="box">123</div><br>
 	<div class="main">456</div><br>
 	<p class="main l r" >多类的使用</p>
 	<h1>1</h1>
 	<h2>2</h2>
 	<h3>3</h3>
 	<span>span</span>
 	<div>
 		<span>欢迎来到php中文网</span>
 	</div>
 	<p>
 		<span>欢迎来到php中文网</span>
 		<b><span>欢迎来到php中文网</span></b>
 	</p>
 </body>
 </html>

运行实例 »

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

实例二

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

运行实例 »

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

实例三

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>浮动</title>
	<style type="text/css">
		/*float属性，实现元素的浮动，属性值有left right
		  浮动的框可以水平方式移动，直到它的外边缘碰到包含框或另外一个浮动框为止。
		  浮动让元素的位置与文档流无关，因此不占据空间。浮动元素变成块级框。
		*/
		.box{
			border: 1px solid pink;
		}
		.right,.left{
			width: 200px;
			height: 200px;
			background:red;
			margin-top: 10px;
		}
		.l{
			float: left;
		}
		/*做个浮动一定要清除浮动，很重要*/
		.clear{
			clear: both;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="left l"></div>
		<div class="right l" style="background:blue;"></div>
		<div class="clear"></div>
	</div>
</body>
</html>

运行实例 »

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

实例四

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>优酷-这世界很酷</title>
	<link rel="icon" type="image/x-icon" href="static/images/1.ico">
	<style type="text/css">
		*{margin: 0;padding: 0;}
		.clear{clear: both;}
		a{
			text-decoration: none;
			color: #000;
		}
		li{
			list-style: none;
			float: left;
		}
		.mr{
			margin-right: 10px;
		}
		.l{
			float: left;
		}
		.contents{
			width: 1750px;
			margin: 0 auto;
		}
		.content{
			width: 100%;
			margin-top: 20px;
		}
		.contentUL{
			line-height: 60px;
		}
		.hot_tv img{
			width: 240px;
			height: 360px;
		}
		.tab li{
			margin-left: 20px;
		}
		.tv_show img{
			height: 318px;
		}
		.tv_tab img{
			width: 240px;
			height: 135px;
		}
	</style>
</head>
<body>
	<div class="contents">
		<div class="content">
			<div class="contentUL"><h2>正在热播</h2></div>
			<ul class="hot_tv">
				<li class="mr">
					<a href="">
						<img src="static/images/a.jpg"><br>
						<span>瞰中国</span><br>
					</a>
					<small>低调的宁夏 美了四季</small>
				</li>
				<li class="mr">
					<a href="">
						<img src="static/images/b.jpg"><br>
						<span>瞰中国</span><br>
					</a>
					<small>低调的宁夏 美了四季</small>
				</li>
				<li class="mr">
					<a href="">
						<img src="static/images/c.jpg"><br>
						<span>瞰中国</span><br>
					</a>
					<small>低调的宁夏 美了四季</small>
				</li>
				<li class="mr">
					<a href="">
						<img src="static/images/d.jpg"><br>
						<span>瞰中国</span><br>
					</a>
					<small>低调的宁夏 美了四季</small>
				</li>
				<li class="mr">
					<a href="">
						<img src="static/images/e.jpg"><br>
						<span>瞰中国</span><br>
					</a>
					<small>低调的宁夏 美了四季</small>
				</li>
				<li class="mr">
					<a href="">
						<img src="static/images/f.jpg"><br>
						<span>瞰中国</span><br>
					</a>
					<small>低调的宁夏 美了四季</small>
				</li>
				<li>
					<a href="">
						<img src="static/images/g.jpg"><br>
						<span>瞰中国</span><br>
					</a>
					<small>低调的宁夏 美了四季</small>
				</li>
			</ul>
		</div>
		<div class="clear"></div>
		<div class="content">
			<div class="contentUL">
				<h2 class="l mr">剧集 ></h2>
				<ul class="tab">
					<li>
						<a href="">最新</a>
					</li>
					<li>
						<a href="">大陆剧</a>
					</li>
					<li>
						<a href="">日韩剧</a>
					</li>
					<li>
						<a href="">港台剧</a>
					</li>
					<li>
						<a href="">英美剧</a>
					</li>
				</ul>
			</div>
			<div class="clear"></div>
			<div class="tv_show l mr">
				<a href="">
					<img src="static/images/tv.jpg"><br>
					<span>瞰中国</span><br>
				</a>
				<small>低调的宁夏 美了四季</small>
			</div>
			<ul class="tv_tab">
				<li class="mr">
					<a href="">
						<img src="static/images/tv1.jpg"><br>
						<span>瞰中国</span><br>
					</a>
					<small>低调的宁夏 美了四季</small>
				</li>
				<li class="mr">
					<a href="">
						<img src="static/images/tv2.jpg"><br>
						<span>瞰中国</span><br>
					</a>
					<small>低调的宁夏 美了四季</small>
				</li>
				<li class="mr">
					<a href="">
						<img src="static/images/tv3.jpg"><br>
						<span>瞰中国</span><br>
					</a>
					<small>低调的宁夏 美了四季</small>
				</li>
				<li class="mr">
					<a href="">
						<img src="static/images/tv4.jpg"><br>
						<span>瞰中国</span><br>
					</a>
					<small>低调的宁夏 美了四季</small>
				</li>
				<li>
					<a href="">
						<img src="static/images/tv5.jpg"><br>
						<span>瞰中国</span><br>
					</a>
					<small>低调的宁夏 美了四季</small>
				</li>
				<br>
				<li class="mr">
					<a href="">
						<img src="static/images/tv1.jpg"><br>
						<span>瞰中国</span><br>
					</a>
					<small>低调的宁夏 美了四季</small>
				</li>
				<li class="mr">
					<a href="">
						<img src="static/images/tv2.jpg"><br>
						<span>瞰中国</span><br>
					</a>
					<small>低调的宁夏 美了四季</small>
				</li>
				<li class="mr">
					<a href="">
						<img src="static/images/tv3.jpg"><br>
						<span>瞰中国</span><br>
					</a>
					<small>低调的宁夏 美了四季</small>
				</li>
				<li class="mr">
					<a href="">
						<img src="static/images/tv4.jpg"><br>
						<span>瞰中国</span><br>
					</a>
					<small>低调的宁夏 美了四季</small>
				</li>
				<li class="mr">
					<a href="">
						<img src="static/images/tv5.jpg"><br>
						<span>瞰中国</span><br>
					</a>
					<small>低调的宁夏 美了四季</small>
				</li>
			</ul>
		</div>
		<div class="clear"></div>

	</div>
</body>
</html>

运行实例 »

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

Correction status：qualified

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

背景控制、边框、表格与无序列表、表单--PHP五期培训线上班

2019-03-18 16:38:44