Blogger Information
Blog 9
fans 0
comment 1
visits 6510
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
css样式,css选择器,float浮动的使用-3月13日
GT的博客
Original
730 people have browsed it

css分外部样式,外部样式针对共享样式表head下插入link标签来调用外部样式表

}内部样式,针对单个文档。
常用的CSS选择器,基础选择器分标记选择器,*在CSS中称为通配符,为所有的意思。
id选择器,以"#"来定义,特殊性:唯一。
类选择器,class以“.”来定义,可以多个元素使用。
分单类和多类选择器。
单类有个特殊性。可调取某个标签来赋予样式。
p.main{border:1px solid red;}/*p标签下class为main赋予样式*/

多类选择器,class的属性可以包含多个单词,每个单词用空格隔开。使元素同时拥有多个样式。

内联样式优先级最高。内部第二,外部最后。

float浮动设定后一定要清除浮动,否则浮动使元素不占据空间。
clear{clear:both}清除所有浮动

实例

<!DOCTYPE html>
<html>
<head>
	<title>优酷-这世界很酷</title>
	<link rel="icon" type="imgaes-icon" href="staic/imgaes/1.ico">
</head>
<style type="text/css">
	*{margin: 0;padding: 0;}
	html,body{overflow-x: hidden; }/*去掉X轴的滚动框*/
	a{color: #000;text-decoration:none; }/*a链接加颜色去下划线*/
	li{list-style:none;  float: left;}/*去除无序列表效果,向左浮动*/
	.qcfd{clear: both;}/*清除浮动*/
	.fd{float: left;}/*向左浮动*/
	.cn_tu{ /*定义li无序列表*/
		margin-right: 10px;
		}
	.cn_tu2{
		margin-right: 20px;
	}
	.cnwai{ /*最外围的一个大小*/
		width: 1316px;
		margin: 0 auto;
		margin-left: 50px;
           }
    .cnnei{ 
    	width: 100%;
    	margin-top: 20px;
    }
    .cnul{line-height: 70px;

    }
    .hot_tv img{
    	width: 200px;
    	height: 300px;
    }
    .tb li{
    	margin-left: 25px;
    }
    .tv_teb img{
    	width: 230px;
    	height: 142px;
    }
</style>
<body>
	<div class="cnwai">
		<div class="cnnei">
			<div class="cnul"><h2>正在热播</h2></div>
			<ul class="hot_tv">
			<li class="cn_tu">
					<a href="">
				<img src="static/images/a.jpg" ><br>
				<span>瞰中国:宁夏</span><br><small>低调的宁夏 美了四季</small></a>
			</li>
			<li class="cn_tu">
					<a href="">
				<img src="static/images/b.jpg" ><br>
				<span>瞰中国:宁夏</span><br><small>低调的宁夏 美了四季</small></a>
			</li>
			<li class="cn_tu">
					<a href="">
				<img src="static/images/c.jpg" ><br>
				<span>瞰中国:宁夏</span><br><small>低调的宁夏 美了四季</small></a>
			</li>
			<li class="cn_tu">
					<a href="">
				<img src="static/images/d.jpg" ><br>
				<span>瞰中国:宁夏</span><br><small>低调的宁夏 美了四季</small></a>
			</li>
			<li class="cn_tu">
					<a href="">
				<img src="static/images/e.jpg" ><br>
				<span>瞰中国:宁夏</span><br><small>低调的宁夏 美了四季</small></a>
			</li>
			<li class="cn_tu">
					<a href="">
				<img src="static/images/f.jpg" ><br>
				<span>瞰中国:宁夏</span><br><small>低调的宁夏 美了四季</small></a>
			</li>
		</ul>
		<div class="qcfd"></div>
		</div>
		<div class="cnnei">
			<div class="cnul"><h2 class="cn_tu fd">剧集 ></h2>
             <ul class="fd tb">
             	<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 class="qcfd"></div>
              </div>
              <div class="tv_show">
              	<div class="big_show fd cn_tu2">
              		<a href="">
              <img src="static/images/tv.jpg"><br>
              <span>瞰中国:宁夏</span>
            </a><br>
            <small>低调的宁夏 美了四季</small></div>
            <ul class="tv_teb">
            	<li class="cn_tu2">
            		<a href=""><img src="static/images/tv1.jpg"><br>
            			<span>瞰中国:宁夏</span></a><br>
            			<small>低调的宁夏 美了四季</small>
            	</li>
            	<li class="cn_tu2">
            		<a href=""><img src="static/images/tv1.jpg"><br>
            			<span>瞰中国:宁夏</span></a><br>
            			<small>低调的宁夏 美了四季</small>
            	</li><li class="cn_tu2">
            		<a href=""><img src="static/images/tv1.jpg"><br>
            			<span>瞰中国:宁夏</span></a><br>
            			<small>低调的宁夏 美了四季</small>
            	</li>
            	<li class="cn_tu2">
            		<a href=""><img src="static/images/tv1.jpg"><br>
            			<span>瞰中国:宁夏</span></a><br>
            			<small>低调的宁夏 美了四季</small>
            	</li>
            	<li class="cn_tu2">
            		<a href=""><img src="static/images/tv1.jpg"><br>
            			<span>瞰中国:宁夏</span></a><br>
            			<small>低调的宁夏 美了四季</small>
            	</li>
            	<li class="cn_tu2">
            		<a href=""><img src="static/images/tv1.jpg"><br>
            			<span>瞰中国:宁夏</span></a><br>
            			<small>低调的宁夏 美了四季</small>
            	</li>
            </ul>
            <div class="qcfd"></div>
              </div>
              <div class="cnnei"><h2>大陆影讯</h2></div>
		</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