CSS--网页样式布局(一)

于 2019-03-17 18:32:18 发布
阅读量824 收藏 5
点赞数
分类专栏： HTML 文章标签： CSS样式 CSS网页布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/CS_GaoMing/article/details/88623801
版权
本文介绍了CSS的基本概念，包括三种使用方式、文本属性设置、颜色表示、选择器的使用。详细阐述了块元素、内联元素、内联块元素的特性和转换，并探讨了浮动、盒子模型以及清除浮动的方法。通过实例展示了CSS在网页样式布局中的应用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

CSS层叠样式表

  • 一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言。

三种使用方式：

  • 外联式

  • 内嵌式

  • 行内式

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- 第一种插入样式的方式 外链式：css文件目录为同级目录文件夹css下.  -->
	<link rel="stylesheet" type="text/css" href="css/main.css">

	<!-- 第二种插入样式的方式 内嵌式  -->
	<style type="text/css">		
	h1{
		font-size:20px;
		color:gold;
	}

</style>

</head>
<body>

	<h1>页面标题</h1>
	<div>这是一个div标签</div>

	<!-- 第三种插入样式的方式 行内样式   -->
	<a href="http://www.itcast.cn" style="font-size:20px;color:pink">百度</a>
</body>
</html>

CSS文本属性设置

  • 常用的应用文本的css样式：

    • color 设置文字的颜色，如:color:red;
    • font-size 设置文字的大小，如：font-size:12px;
    • font-family 设置文字的字体，如：font-family:'微软雅黑';.
    • font-style 设置字体是否倾斜，如：font-style:‘normal’; 设置不倾斜，font-style:'italic';设置文字倾斜.
    • font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal; 设置不加粗.
    • line-height 设置文字的行高，设置行高相当于在每行文字的上下同时加间距， 如：line-height:24px; 行高示例图片.
    • font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗 字号/行高 字体；如： font:normal 12px/36px; ‘微软雅黑’;
    • text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉.
    • text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px 行高示例图片.
    • text-align 设置文字水平对齐方式，如text-align:center; 设置文字水平居中.

  • 文本属性设置实例

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>常用文本样式</title>
	<style type="text/css">
	div{
		
		color:green;

			/* font-size:20px;
			font-family:'Microsoft Yahei';	
			line-height:40px; */

			font:normal 20px/40px 'Microsoft Yahei';

			/* text-decoration:underline; */

			text-indent:40px;


		}
		em{
			font-style:normal;
			color:gold;
		}
		span{
			color:red;
			font-size:30px;
		}
		h1{
			font-weight:normal;
		}
		a{
			text-decoration:none;
			text-align:center;
		}

		p{
			text-align:center;
		}

	</style>
</head>
<body>
	<h1>样式演示</h1>
	<div>
		<span>中国近代史</span>，<em>中国</em>的历史发展也不像西方一样在进入某一个时代后自身发生显著的变化，因此中国近代史在时间的划分上有多种说法。然而此种观点并不确切，至少自先秦时期，中国就存在进步史观，例如战国时期便有上古、中古、近古、当世等划分，并有关于不同时代演化的论说；另一方面，中国自封建社会解体由秦汉入大一统皇朝时代起，政治上进入了王朝循环，没有革命性的变化，而就全球各地而言，今人所谓之近代的历史大变化也都是最近数百年的事情。
	</div>

	<p>这是一个下一个段落标签！！</p>

	<a href="http://www.baidu.com">百度一下</a>


</body>
</html>

  • 预览效果

CSS的颜色表示

  • css颜色值主要有三种表示方法：
  1. 颜色名表示，比如：red 红色，gold 金色…
  2. rgb表示，比如：rgb(255,0,0)表示红色.
  3. 16进制数值表示，比如：#ff0000 表示红色，这种可以简写成 #f00.

  • 颜色设置实例

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">

	div{
		font-size:30px;
		/* color:rgb(0,0,0); */
		color:#ffff00;
	}
</style>
</head>
<body>
	<div>这是一个测试！</div>
</body>
</html>

CSS选择器

  • 标签选择器

    标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中。举例：

    *{
	margin:0;
	padding:0
}
div{
	color:red;
}

  • id选择器

    通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。

    #div11{
	color:red;
}
<div id="div11">id选择器的使用方式.</div>

  • 类选择器

    通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。

    #div11{
	color:green;
}
.red{
	color:red;
}
.big{
	font-size:20px;
}
.mt10{
	margin-top:10px
} 

<div id="div11" class="red">类选择器的使用,id优先级高，使用id的属性.</div>
<h1 class="red big mt10">类选择器的使用.</h1>
<p class="red mt10">类选择器的使用</p>

  • 层级选择器

    主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。

    .box span{
	color:red
}
.box .red{
	color:pink
}
.red{
	color:red
}

<div class="box">
    <span>这个会被span属性修饰.</span>
    <a href="#" class="red">这个会被red类属性修饰.</a>
</div>

  • 组选择器

    多个选择器，如果有同样的样式设置，可以使用组选择器。

    <!-- 设置的公共环境. -->
.box1,.box2,.box3{
	width:100px;
	height:100px;
}
.box1{
	background:red;
}
.box2{
	background:pink;
}
.box2{
	background:gold;
}

<div class="box1">使用box1修饰属性.</div>
<div class="box2">使用box2修饰属性.</div>
<div class="box3">使用box3修饰属性.</div>

  • 伪类及伪元素选择器

    实现悬浮想要悬浮的内容，内容悬浮后无法被选中，无法被复制。

    常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在元素中插入内容。

    <!-- content的内容会悬浮，不会被选中的效果. -->
.box1:hover{
	color:red；
}
.box2:before{
	content:'行首文字';
}
.box3:after{
	content:'行尾文字';
}
<div class="box1">正文内容！</div>
<div class="box2">正文内容！</div>
<div class="box3">正文内容！</div>

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.link{
			font-size:28px;
			text-decoration:none;
			color:green;
		}
		.link:hover{
			color:blue;

			/*设置字体是否加粗，注意注释符号，使用的是java的.*/
			font-weight:bold;

			/*设置字体是否倾斜*/
			font-style:italic;

			/*设置行间距48px,计算规则为该行到上一行底线的大小，单位为像素.*/
			line-height: 48px;
		}
		.box1,.box2{
			font-size:20px;
		}
		.box1:before{
			content:"无法被选中的前置悬浮：";
			color:red;
		}
		.box2:after{
			content:"无法被选中的后置悬浮：";
			color:red;
		}

	</style>
</head>
<body>
	<a href="http://www.baidu.cn" class="link">百度一下</a>
	<div class="box1">这是第一个div</div>
	<div class="box2">这是第二个div</div>
</body>
</html>

    完整显示效果如图：

    鼠标不在其位置!：第一张

    鼠标移动上去后：第二张

  • 盒子模型

    元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。

    如图：

    参数设置：

    设置对应的样式分别为：盒子的宽度(width)、盒子的高度(height)、盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。

    代码示例：

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>盒子模型</title>
	<style type="text/css">

	.box{

		/*设置盒子的宽200px，高200px，背景色金色.*/
		width:200px;
		height:200px;
		background-color:gold;

		/*设置盒子边框-顶部边框-top*/
		border-top-color:red;    /* 设置顶部边框颜色为红色,也可以使用十六进制,#FF0000 */  
		border-top-width:20px;   /* 设置顶部边框粗细为10px */   
		border-top-style:solid;  /* 设置顶部边框的线性为实线，常用的有：solid(实线)   dashed(虚线)  dotted(点线); */

		/*上面三句可以简写成一句：*/
		border-top:20px solid red;


		/*设置其它三个边的方法和上面一样，把上面的'top'换成'left'就是设置左边，换成'right'就是设置右边，换成'bottom'就是设置底边。*/

		/*若是四个边设置一样，可以将四个边的设置合并成一句：*/

		border:20px solid red;



		/*设置内间距-padding*/

		/*设置盒子四边的内间距，可设置如下：*/
		padding-top：20px;     /* 设置顶部内间距20px */ 
		padding-left:30px;     /* 设置左边内间距30px */ 
		padding-right:40px;    /* 设置右边内间距40px */ 
		padding-bottom:50px;   /* 设置底部内间距50px */

		/*上面的设置可以简写如下：四个值按照顺时针方向，分别设置的是 上 右 下 左.*/
		padding：20px 40px 50px 30px; 

		/*padding后面还可以跟3个值，2个值和1个值，它们分别设置的项目如下：*/
		padding：20px 40px 50px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */ 
		padding：20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/ 
		padding：20px; /* 设置四边内边距为20px */

		/*设置外间距margin*/

		/*外边距的设置方法和padding的设置方法相同，将上面设置项中的'padding'换成'margin'就是外边距设置方法。*/			
		margin: 100px;	

	}

</style>
</head>
<body>
	<div class="box">元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻...</div>
</body>
</html>

示例效果：

示例二：简化版本.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">

	.pppp{
		width:140px;
		height:140px;
		background-color:gold;
		border:10px solid #FF00FF;
		padding:20px;
		margin: 50px;
	}

</style>
</head>
<body>
	<div class="pppp">padding与margin设置方式完全一致。这是简化示例，将box换为pppp并没有什么区别，只是一个样式名称的改变而已...</div>
</body>
</html>

示例二效果：

示例三代码：

相邻的两个盒子之间的边距-margin的重叠处理.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">

	/*去掉body默认的margin值,默认自带边框，可以设置边界为0，使得没有白色的边框.*/
	body{
		margin:0;
	}

	/*盒子属性设置--可以被容器撑大.*/		
	.box{
		width:302px;
		height:156px;
		background-color:pink;

		/*上50，居中对齐，下0.*/
		margin:50px auto 0;
	}

	.box div{
		width:300px;
		height:30px;

		/*border:1px solid green;*/
		border:1px solid #F00000;		

		background-color:orange;

		/*上边框与前一个的下边框间隔，表现效果为div之间的间隔.*/
		/*前一个的下边框与后一个的上边框线重叠.*/
		margin-top:-1px;

		/*设置框线数值为0，最后一个div的下边框将不存在.*/
		/*border-bottom:0px; */
	}

</style>
</head>
<body>
	<div class="box">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>
</body>
</html>

示例三效果：

  • margin-top的塌陷问题

    在两个盒子嵌套(也就是盒子中套一个盒子)时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决方法如下：

    代码如下：

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">

	/* 第一种解决方法   */
	.clearfix:before{
		content:"";
		display:table;
	}

	.con{
		width:300px;
		height:300px;
		background-color:gold;
		/*border:1px solid #000; 第二种解决方法	 */
		/*overflow:hidden; 第三种解决方法 */		
	}

	.box{
		width:200px;
		height:100px;
		background-color:green;
		margin-top:100px;
		margin-left:50px;
	}

</style>
</head>
<body>
	<div class="con clearfix">
		<div class="box"></div>
	</div>	
</body>
</html>

失败效果如下：

解决效果如下：

  • 盒子元素溢出

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>元素溢出测试</title>
	<style type="text/css">

	.box{
		width:300px;
		height:200px;
		border:1px solid #000;
		margin:50px auto 0;
		background-color:gold;
		line-height:30px;

		/*visible:缺省值，溢出的元素可见;

		hidden：将溢出的元素裁切隐藏

		scroll:显示滚动条，不管是否溢出;

		auto：溢出的时候产生滚动条，不溢出的时候不显示滚动条
		*/
		overflow:auto;
	}

</style>
</head>
<body>
	<div class="box">当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。</div>
</body>
</html>

效果如图：

块元素、内联元素、内联块元素

CSS中，html中的标签元素大体被分为三种不同的类型：块元素、内联元素(又叫行内元素)和内联块元素，下文的布局值得是CSS。

  • 块元素

块元素，也可以称为行元素，布局中常用的标签如：div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素，在布局中：

  • 支持全部的样式.

  • 如果没有设置宽度，默认的宽度为父级宽度100%，就近原则设置。

  • 盒子中的元素单独占据一行、即使设置了宽度。

  • 样例：

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">

	body{
		margin:0;
	}

	.box{
		background-color:gold;
		width:300px;
		height:200px;
	}

	.box2{
		background-color:green;
		width:300px;
		height:200px;
	}
</style>
</head>
<body>
	<div class="box">div----块元素测试.</div>
	<p class="box2">p----块元素测试.</p>
</body>
</html>

如图所示

  • 内联元素
    内联元素，也可以称为行内元素，布局中常用的标签如：a、span、em、b、strong、i等等都是内联元素，在布局中：

    • 支持部分样式（不支持宽、高、margin上下、padding上下）。
    • 宽高由内容决定。
    • 盒子并在一行。
    • 代码换行，盒子之间会产生间距。
    • 子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式。

  • 解决内联元素间隙的方法

    • 去掉内联元素之间的换行。
    • 将内联元素的父级设置font-size为0，内联元素自身再设置font-size。

  • 如下所示：

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title> <!-- 设置网页标题. -->
	<style type="text/css">
		.box{
			width:500px;
			height:300px;

			/*设置盒子的边框线：1px，实线，黑色.*/
			border:1px solid #000;

			/*设置上边框间距：top:50，其余边的间距自动对齐;*/
			margin:50px auto 0;
			font-size: 25;
		}

		/*盒子中的以a为标签名的元素的属性设置！*/
		.box axx{
			background-color:orange;
			width:300px;
			height:200px; 
		 	margin:100px 20px; 
			padding:0 10px;
			font-size:16px;
		}
		.box2{
			width:500px;
			height:100px;
			border:1px solid #000;
			margin:50px auto 0;

			/*文本对齐方式*/
			text-align:center;
		}
		.box div{
			background-color:orange;
			width:200px;
			height:200px; 
		 	margin:20px 20px; 
		}
	</style>
</head>
<body>
	<div class="box">
		<!-- 链接文字不单独占用一行 -->

		<axx href="#">链接文字一</axx>
		<axx href="#">链接文字二</axx>
		<axx href="#">链接文字三</axx>
		<axx href="#">链接文字四</axx>
		<axx href="#">链接文字五</axx>
		<div href="#">测试二组：div容器独立使用一行，即使设置不占一行的宽度！</div>
		<div href="#">测试三组：div容器独立使用一行，即使设置不占一行的宽度！</div>
		
	</div>
	<div class="box2">
		<a href="#">链接文字对齐！</a>		
	</div>
</body>
</html>

结果如图描述：

  • 内联块元素
    内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素。在布局中：
    • 支持全部样式。
    • 如果没有设置宽高，宽高由内容决定。
    • 盒子并在一行。
    • 代码换行，盒子会产生间距。

子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式。
这三种元素，可以通过display属性来相互转化，不过实际开发中，块元素用得比较多，所以我们经常把内联元素转化为块元素，少量转化为内联块，而要使用内联元素时，直接使用内联元素，而不用块元素转化。

  • 样例：
    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	.box{
		width:500px;
		height:300px;
		border:1px solid #000;
		margin:50px auto 0;
		font-size: 0;
	}

	.box apc{
		background-color:gold;
		width:100px;
		height:50px;
		margin:20px;
		padding:10px;
		font-size:16px;
		display:inline-block;
	}
	.box a{
		background-color:gold;
		width:100px;
		height:50px;
		margin:20px;
		padding:10px;
		font-size:16px;
		display:inline-block;
	}
</style>
</head>
<body>
	<div class="box">
		<apc href="#">测试一组</apc>
		<apc href="#">测试二组</apc>
		<apc href="#">测试三组</apc>
		<apc href="#">测试四组</apc>
		<a href="#">测试对比组</a>
	</div>

	
</body>
</html>

如图所示：

  • display属性
    display属性是用来设置元素的类型及隐藏的，常用的属性有：

    • none 元素隐藏且不占位置。
    • block 元素以块元素显示。
    • inline 元素以内联元素显示。
    • inline-block 元素以内联块元素显示。

  • 内联块-类型转化

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>这个是网页标题！</title>
	<style type="text/css">

	/*这个是菜单属性！*/
	.menu{
		width:780px;
		height:50px;
		/* background-color:cyan; */
		margin:50px auto 0;

		/*使得菜单元素之前间隔为0，不会有空隙，菜单元素以类似单元格的形式呈现。*/
		font-size:0;
	}

	/*菜单的标签a属性设置，a是超链接标签，也可以用其他标识符代表-属性描述集合.*/
	.menu a{
		width:90px;
		height:40px;
		background-color:#fff;

		/*设文字撑开菜单栏*/
		display:inline-block;

		/*设置菜单边框线，1px，实体线，橘黄色*/
		border:1px solid orange;
		font-size:16px;

		/*重叠边框线，不然会很粗=左元素的右框线+右元素的左框线。*/
		margin-left:-1px;

		/*标签内的文字对齐方式*/
		text-align:center;
		line-height:48px;

		/*取消掉a标签的默认的超链接下划线*/
		text-decoration:none;

		color:black;
		font-family:'Microsoft Yahei'
	}

	.menu a:hover{
		background-color:gold;
		color:#fff;
	}

</style>
</head>
<body>
	<div class="menu">
		<a href="#">首页</a>
		<a href="#">测试一组</a>
		<a href="#">测试二组</a>
		<a href="#">测试三组</a>
		<a href="#">测试四组</a>
		<a href="#">测试五组</a>
		<a href="#">测试六组</a>
	</div>
</body>
</html>

如图所示

  • 样例二

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>这是网页标题！</title>
	<style type="text/css">
	body{
		/*设置为0，box不重新设置属性，则文字消失，此处设置非0即可。*/
		font-size:0
	}

	.box{
		width:200px;
		height:200px;
		background-color:gold;

		/*标签：类型转化->可以同一行排列！*/
		display:inline-block;

		/*设置字体大小.*/
		font-size:28px;

		/*盒子间隔20px*/
		margin:40px;
	}		
	.con{
		width:200px;
	}
	.con h3{
		font-size:30px;
	}
	.box2{
		width:200px;
		height:200px;
		background-color:gold;
		font-size:16px;

		/*文字标题：内容显示，隐藏设置.*/
		display:none;
	}

	.con:hover .box2{
		/*由鼠标控制显示：移动到该标签，即可显示！*/
		display:block;
	}
</style>
</head>
<body>
	<div class="box">div元素</div>
	<div class="box">div元素</div>
	<br>
	<br>

	<div class="con">
		<h3>文字标题</h3>
		<div class="box2">文字标题由隐藏->的完全展开!</div>
	</div>

</body>
</html>

如图所示：

浮动

  • 浮动特性

    • 浮动元素有左浮动(float:left)和右浮动(float:right)两种。
    • 浮动的元素会向左或向右浮动，碰到父元素边界、其他元素才停下来。
    • 相邻浮动的块元素可以并在一行，超出父级宽度就换行。
    • 浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题)。
    • 浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果。
    • 父元素如果没有设置尺寸(一般是高度不设置)，父元素内整体浮动的元素无法撑开父元素，父元素需要清除浮动。
    • 浮动元素之间没有垂直margin的合并。

  • 样例–使用ul.ls转化为div

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮动</title>
	<style type="text/css">		
	.con{
		width:400px;
		height:80px;
		border:1px solid orange;
		margin:50px auto 0
	}
	.con div{
		width:60px;
		height:60px;
		margin:10px;

	}
	.box01{

		/*设置属性*/
		background-color:yellow;
		float:left;
	}
	.box02{

		/*设置属性*/
		background-color:pink;
		float:right
	}

	.con2{
		width:400px;
		height:400px;
		border:1px solid #000;
		margin:50px auto 0;
	}

	.con2 div{
		width:100px;
		height:100px;
		background-color:gold;
		margin:15px;
		float:left;
	}
</style>
</head>
<body>
	<div class="con">		
		<div class="box01">浮动一号</div>
		<div class="box02">浮动二号</div>
	</div>


	<!-- 快捷创建div方式. -->
	<!-- .con2>div{$}*8 -->

	<div class="con2">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
	</div>


</body>
</html>

如图所示：

  • 文字环绕图片-样例

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文字饶图</title>
	<style type="text/css">
	.con{
		width:450px;
		height:210px;
		border:1px solid #000;
		margin:50px auto 0;
	}

	.pic{
		width:80px;
		height:80px;
		background-color:gold;
		float:left;
		margin:10px;
	}

	.text{
		/*background-color:orange; */
		height:130px;
		color:red;
	}
</style>
</head>
<body>
	<div class="con">
		<div class="pic"></div>		
		<div class="text">大历史观就是将以往历史的内在逻辑和现在作比较，再用现在所发生的历史与未来做比较，从而对未来社会的走向做出一定预测的历史观。也就是依据整个人类的发展历史对未来即将发生的一切做出合理的判断，用长远的、比较的思维来看待问题的认识方法。
		其基本特点是：从长远的社会、经济结构发展观察历史的脉动；从古今中外的比较提示历史和未来的问题；注重人物与时势的交互作用；运用理念与制度的差距联系来对事件和现象做出合理判断。</div>

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

如图所示：

  • 清除浮动

样例及说明：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	.list{
		width:210px;

		/*不设置高度值，li的内容无法使list撑开，于是list成为一条线。

		此时需要清除浮动解决。*/

		/* height:400px; */
		border:1px solid #000;
		margin:50px auto 0;
		list-style:none;
		padding:0;

		/* 
		第一种清除浮动的方法：
		overflow: hidden; 
		*/
	}

	.list li{
		width:50px;
		height:50px;
		background-color:gold;
		margin:10px;
		float:left;
	}

		/* .clearfix:before{
			content:"";
			display:table;
		}
			
		.clearfix:after{
			content:"";
			display:table;
			clear:both;
			} */

		/*以上注释部分可以合并为如下：搭配tag_1位置使用.*/


			.clearfix:before,.clearfix:after{
				content:"";
				display:table;
			}
			.clearfix:after{
				clear:both;
			}
			.clearfix{
				zoom:1;
			}
		</style>
	</head>
	<body>
		<!-- ul.list>li{$}*8 -->
		<ul class="list clearfix"> <!-- tag_1 -->
			<!-- <ul class="list"> 这个是没有解决or其他方式解决的写法. -->
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>

<!-- 		第二种清除浮动的方法：
	<div style="clear:both"></div> -->

</ul>
</body>
</html>

如图所示：

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值