前端学习笔记二:CSS(3)常用的文本属性+让div飞~

继续。

还是把两段内容压成一段,先看第一个示例(想了一下只显示样式表了,列表内容的代码就不单独放出来了):

	<style type="text/css">
		html,body{
			margin: 0;
			height: 100%;
		}
		ol{
			background-image: url(../03%20using%20image/img/9.PNG);
			background-repeat: no-repeat;
			background-position: left center;
		}
		body{
			background-image: url(../03%20using%20image/img/1.jpg);
			background-repeat: no-repeat;
			background-position: center;
		}
		.p1{color: deepskyblue;}
		.p3{font-family: "微软雅黑";}
		.p2{font-size: 20px;}
		.p4{font-weight: bold;}
		.p5{font-style: italic;}
		.p6{text-indent: 50px; background-color: #2D9CE1;}
		.p7{text-align: center; color: #FFFFFF;}
		.p8{height: 100px;}
		.p9{
			height: 100px;
			line-height: 100px;
			text-align: center;
			background-color: #00BFFF;
		}
		.p10{text-decoration: underline;}
	style>

运行结果:

可以看到各式各样的文字以及图片。

先整理一下常用的文本属性:

项目 内容
background-repeat 背景图片是否要重复展示(当图片大小小于所在块的大小时) no-repeat(不重复);repeat-x(横向重复);repeat-y(纵向重复);(默认值)repeat(全方位重复塞满所有空位置)
background-image 背景采用图片显示 图片的url地址
background-position 背景图片(不能重复填充屏幕时)靠着的位置 在 top,bottom和left,right之间各选一个来决定位置
font-family 文本内容的字体 英文或中文的字体名称
font-size 文本内容的字体大小 px
font-weight 文本内容的字体粗度 0~1000或bold(相对于默认的加粗)
font-style 文本内容的字体倾不倾斜 italic或oblique:倾斜
text-indent 文字的行首顶格距离 px
text-align 文本内容的位置 居左:left;居中:center;居右:right

可能有一些重复的,请不要在意(

然后来看重点的下一次示例,我管它叫做让div“飞”:


<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>飘浮效果title>
	head>
	<style type="text/css">
		#item1{
			background-color: #00BFFF;
			float: left;
			width: 100px;
			height: 100px;
		}
		#item2{
			width: 200px;
			height: 200px;
			background-color: #FFA500;
			color: #FF0000;
		}
		#item3{
			width: 150px;
			background-color: #4169E1;
		}
		#item4{
			width: 700px;
			background-color: #2d9ce1;
		}
		#item5{
			width: 200px;
			background-color: #56e1b8;
		}
		#item3,#item4,#item5{
			height: 300px;
			float: left;
		}
	style>
	<body>
		<p>文字环绕效果p>
		<div id="item1">
			我是恋恋
		div>
		<div id="item2">
			看你背后看你背后看你背后看你背后看你背后看你背后看你背后看你背后看你背后
			看你背后看你背后看你背后看你背后看你背后看你背后看你背后看你背后看你背后
		div>
		<p>横向排版布局p>
		<div id="item3">
			
		div>
		<div id="item4">
			
		div>
		<div id="item5">
			
		div>
	body>
html>

前端学习笔记二:CSS(3)常用的文本属性+让div飞~_第1张图片
可以看到多个div都被塞进了浏览器同一行内容里。这是大部分网站能够在一行里塞入多个不同的方形的内容的奥秘。

用到的属性就是float,后面的值可以为left和right,即靠左浮动和靠右浮动
漂浮的原理也不难,看示例都能看出七七八八,就是把赋予了同一方向的浮动属性的容器按照(代码里)从上到下顺序依次排列到同一行里。

当然,细心的朋友可能发现了,既然把这个属性叫做浮动属性,是不是意味着这些漂浮着的容器的“里面”还能塞进别的容器或者元素呢?
确实可以,看这运行结果的上半部分就能看出来了(
除了像示例那样本身就想做出被文字环绕的效果的情况外,大部分情况下这都是坏事,因为一般都希望把这几个漂浮着的容器当成“没有漂浮着”的内容。

那该怎么办呢?
再来看一段示例(( :


<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>聊天框title>
	head>
	<style type="text/css">
		ul{
			margin: auto;
			height: 500px;
			width: 300px;
			border: #000000 solid 1px;
		}
		li{
			clear: both;
			height: auto;
			width: 100px;
			border: #000000 solid 1px;
		}
		.left{
			float: left;
			background-color: white;
		}
		.right{
			float: right;
			background-color: #8de34b;
		}
	style>
	<body>
		<ul>
			<li class="left">早上好,灵梦!li>
			<li class="left">...li>
			<li class="left">起~~~~床~~~~~啦!!!!!!li>
			<li class="right">吵死了!li>
			<li class="right">要不要每次都这么大声啊;(li>
			<li class="left">嘻嘻li>
			<li class="right">啊啊啊,华扇最差劲了!li>
			<li class="left">管你这么说,反正今天也要修行li>
		ul>
	body>
html>

运行结果:
前端学习笔记二:CSS(3)常用的文本属性+让div飞~_第2张图片
可以看到是在模拟一个聊天框,结合代码可以发现虽然这几个聊天框都带有漂浮属性,但是在运行结果上没有从左到右排列。
这是因为这些容器里除了有float属性外又多了个clear属性,它定义了该元素的两边能不能插入漂浮元素,值为left,左边不出现;为right右边不出现,为both则该元素所在行都不能出现其它的漂浮元素。

你可能感兴趣的:(学习笔记)