实例
<!DOCTYPE html>
<html>
<head>
<!--转换编码中文-->
<meta charset="UTF-8">
<!--页面的标题头-->
<title>web的第三节课</title>
<!--引入的icon-->
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<!--引入外部样式-->
<link rel="stylesheet" href="css/style.css" />
<style type="text/css">
/*清楚浏览器四周的边框空白处*/
*{margin: 0;padding: 0;}
#box{width: 500px;height: 350px;margin: 10px auto;background-color: beige;}
.lasy-yes{width:500px;height:80px;margin: 10px auto;background-color: #ff8200;}
.lasy-no{text-align: center;line-height: 80px;color: #F5F5DC;}
.lasy-h{width:500px;height:80px;margin: 10px auto;}
h1,h2,h3{text-align: center;}
.lasy-h p{color: #FF8200;text-align: center;}
b>p{color: #FF8200; font-size: 50px;}
</style>
</head>
<!--
1.id选择器 以"#"来开头 是唯一的
2.*号通配符
3.类选择器 class 以.开头 可以在多个元素中使用 用于描述样式
4.单class .lasy-h {width:500px;}
5.div.lasy-yes 元素 与class同在
6.多类 1个div 多个class
7.元素下面的span p span{xx}
8.b>p{直属b下的p进行设置样式}
-->
<body style="background: #FFF;">
<div id="box"></div>
<div class="lasy-yes lasy-no">这里有两个class</div>
<div class="lasy-h">
<h1>这里是h1</h1>
<h2>这里是h2</h2>
<h3>这里是h3</h3>
<p>这里是span</p>
<b><p>b下面的span</p></b>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--标题头-->
<title>第3节内外边距 块的转换</title>
<!--内联样式-->
<style type="text/css">
/*清楚页面四周空白*/
*{margin:0;padding: 0; }
div,p,h1{height: 30px;width: 400px; background: #FF8200;margin-top: 10px;}
/*转换为块元素*/
span{display: block;}
/*标签 选择器{display:转换央视}*/
/* 1.display 转换元素的开头
2.display:inline;转换为行内元素
3.display:inline-block;转换为行内块状元素
4.display:block;转换为块状元素
5.块级元素:能够识别宽高 独占一行 多个块状元素标签写在一起 默认排列方式为从上至下
6.行内元素:设置宽高无效 对margin仅设置左右方向有效 上下无效 不会自动进行换行
7.行内块:行内块状元素综合了行内元素和块状元素的特性 但是各有取舍 不自动换行 能够识别宽高 input img
8.外边距 margin 外部的距离 内边距 padding 以父类元素进行移动拉抻
* */
</style>
</head>
<body>
<!--块元素-->
<div></div>
<p>我是p</p>
<h1>我是h1</h1>
<!--行内元素--><br />
<span style="background: #FF8200;">我是行内元素span转换了块元素</span>
<b>我是行内元素b</b>
<b>我们都在一行</b>
<!--行内块元素-->
<abbr title="我是行内款元素img"><img src="images/ilasy.jpg" width="350px" /></abbr>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--标题头-->
<title>第3节浮动</title>
<!--内联样式-->
<style type="text/css">
/*清楚页面四周空白*/
*{margin:0;padding: 0; }
.box{width: 940px;height: 900px;margin: 10px auto;border: 1px solid #ccc;}
.left,.right{width: 450px; height: 200px;border: 1px solid #FF8200;float: left;margin-right: 10px;}
.left1{width: 450px; height: 200px;border: 1px solid #FF8200;float: left; margin-top: 10px; margin-left: 10px;}
.right1{width: 450px; height: 200px;border: 1px solid #FF8200;float:right;}
.right1 p{padding-top: 10px; padding-left: 10px;}
</style>
<!--
1.复合写法:padding:上 右 下 左 padding:上下 左右 padding:上 左右 下;
2.float 属性实现元素的浮动, 属性值:left right
3.浮动的框可以水平方向移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止
4.浮动使元素的位置与文档流无关，并不占据空间
5.清除浮动 .clear{clear: both;}
-->
</head>
<body>
<div class="box">
<div class="left" style="margin-left: 10px;"></div>
<div class="right"></div>
<div class="left1"></div>
<div class="right1"><p>我是p段落</p></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--标题头-->
<title>第3节优酷</title>
<style type="text/css">
*{margin:0;padding: 0; }
li{list-style: none; float: left;}
a{color: #000;text-decoration: none;}
small{color: #aaa;}
.contens{width: 1250px;margin: 0 auto;}
.conten{width: 100%;margin-top: 20px;}
.clear{clear: both;}
.mr{margin-right: 10px;}
.l{float: left;}
.contenul{line-height: 70px;}
.lasy-tv img{width: 170px;height: 290px;}
.lasy-img2 img{width: 180px;height: 106px;}
.lasy{margin-right: 10px;}
.lasy li{margin-left: 15px;line-height: 70px;}
.lasy-casy{float: left;}
.ul2{display: inline-block;margin-top: 33px;}
.bg-show img{width:400px ;height:280px ;}
</style>
</head>
<body>
<div class="contens">
<div class="conten">
<div class="contenul">
<h2>正在热播</h2>
</div>
<ul class="lasy-tv">
<li class="mr"><a href="#"><img src="images/a.jpg" /><br /><span>大冰小将 第一季</span></a><br /><small>千玺雷佳音冰雪大狂欢</small></li>
<li class="mr"><a href="#"><img src="images/b.jpg" /><br /><span>大冰小将 第一季</span></a><br /><small>千玺雷佳音冰雪大狂欢</small></li>
<li class="mr"><a href="#"><img src="images/c.jpg" /><br /><span>大冰小将 第一季</span></a><br /><small>千玺雷佳音冰雪大狂欢</small></li>
<li class="mr"><a href="#"><img src="images/d.jpg" /><br /><span>大冰小将 第一季</span></a><br /><small>千玺雷佳音冰雪大狂欢</small></li>
<li class="mr"><a href="#"><img src="images/e.jpg" /><br /><span>大冰小将 第一季</span></a><br /><small>千玺雷佳音冰雪大狂欢</small></li>
<li class="mr"><a href="#"><img src="images/f.jpg" /><br /><span>大冰小将 第一季</span></a><br /><small>千玺雷佳音冰雪大狂欢</small></li>
<li><a href="#"><img src="images/g.jpg" /><br /><span>大冰小将 第一季</span></a><br /><small>千玺雷佳音冰雪大狂欢</small></li>
</ul>
<div class="clear"></div>
</div>
<div class="conten">
<div class="contenul">
<h2 class="l mr">剧集 ></h2>
</div>
<ul class="lasy 1">
<li><a href="#">php</a></li>
<li><a href="#">web</a></li>
<li><a href="#">jquery</a></li>
<li><a href="#">java</a></li>
<li><a href="#">ps</a></li>
</ul>
<div class="clear"></div>
</div>
<div class="lasy-show">
<div class="bg-show l mr">
<a href="#"><img src="images/tv.jpg" /><br /><span>大帅哥</span></a><br /><small>一代军阀的成长史</small>
</div>
<ul class="lasy-img2">
<li class="mr"><a href=""><img src="images/tv1.jpg"><br><span>瞰中国：宁夏</span></a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr"><a href=""><img src="images/tv2.jpg"><br><span>瞰中国：宁夏</span></a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr"><a href=""><img src="images/tv3.jpg"><br><span>瞰中国：宁夏</span></a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li><a href=""><img src="images/tv1.jpg"><br><span>瞰中国：宁夏</span></a><br>
<small>低调的宁夏 美了四季</small>
</li>
</ul>
<ul class="lasy-img2 ul2">
<li class="mr"><a href=""><img src="images/tv4.jpg"><br><span>瞰中国：宁夏</span></a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr"><a href=""><img src="images/tv5.jpg"><br><span>瞰中国：宁夏</span></a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr"><a href=""><img src="images/tv1.jpg"><br><span>瞰中国：宁夏</span></a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li><a href=""><img src="images/tv3.jpg"><br><span>瞰中国：宁夏</span></a><br>
<small>低调的宁夏 美了四季</small>
</li>
</ul>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
