css.day02.eg 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>标签指定式</title>
<style type="text/css">
div.red{color:#f00;}
</style>
</head>
<body>
<p class="red">上海</p>
<p>上海</p>
<p>上海</p>
<div class="red">上海</div>
<div>上海</div>
<font>字体</font>
<span>字体</span>
</body>
</html>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>后代选择器</title>
<style>
.lv strong{color:#0F0;}
div strong{color:#009;}
strong{color:#F00;}
</style>
</head>
<body>
 <p>上海 <strong>xxxx</strong></p>
 <p>上海 <strong>xxxx</strong></p>
 <div> 上海 <strong>xxxx</strong></div>
 <div> 上海 <strong>xxxx</strong></div>
 <div> 上海 <strong>xxxx</strong></div>
 <div> 上海 <strong>xxxx</strong></div>
 <div> 上海 <strong>xxxx</strong></div>
 <div> 上海 <strong>xxxx</strong></div>
 <div> 上海 <strong>xxxx</strong></div>
 <div class="lv"> 上海 <strong>xxxx</strong></div>
<strong>xxxx</strong>
</body>
</html>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>并集选择器</title>
<style type="text/css">
/*p{color:#F00; }   
span{color:#F00;}
ul{color:#F00;}*/
/*p,span,ul{color:#F00;}*/
*{color:#F00;}
*{margin:0; padding:0;}
</style>
</head>
<body>
 <p>上海 <strong>xxxx</strong></p>
 <p>上海 <strong>xxxx</strong></p>
 <div> 上海 <strong>xxxx</strong></div>
 <div> 上海 <strong>xxxx</strong></div>
 <div> 上海 <strong>xxxx</strong></div>
 <div> 上海 <strong>xxxx</strong></div>
 <div> 上海 <strong>xxxx</strong></div>
 <div> 上海 <strong>xxxx</strong></div>
 <div> 上海 <strong>xxxx</strong></div>
 <div class="lv"> 上海 <strong>xxxx</strong></div>
<span><strong>xxxx</strong></span>
<span><strong>xxxx</strong></span>
<ul><strong>xxxx</strong></ul>
<ul><strong>xxxx</strong></ul>
</body>
</html>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>伪类选择器</title>
<style type="text/css">
a:link{color:#000; text-decoration:none; }/*文本修饰为没有下划线*/
a:visited{color:#F90; text-decoration:none;}   /*点击后，为黄色 没有下划线*/
a:hover{color:#F00; text-decoration:underline;} /*鼠标经过的时候，为红色下划线*/
a:active{color:#00ff00; text-decoration:underline;} /*鼠标点击的时候，为绿色 下划线*/
/*可以这么写：*/
a{color:#000; text-decoration:none;}
a:hover{color:#F00; text-decoration:underline;}
</style>
</head>
<body>
<a href="#">百度</a>   <a href="#">新浪</a>  <a href="#">搜狐</a> <a href="http://www.huawei.com">化为</a>
</body>
</html>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航</title>
<style type="text/css">
div{text-align:center;}
div a{width:88px; height:44px; background-image:url(gray.JPG);display:inline-block; color:#FFF; text-decoration:none; line-height:44px;}
div a:hover{background-image:url(red.JPG); color:#F90;}
</style>
</head>
<body>
<div>
<a href="#">首页</a>
<a href="#">相册</a>
<a href="#">作品</a>
<a href="#">生活</a>
<a href="#">展示</a>
<a href="#">留言</a>
</div>
</body>
</html>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>背景</title>
<style type="text/css">
html,body{
/*    background-image:url(bg4.jpg); 
    background-repeat:no-repeat; 
    background-position:right bottom; 
    background-color:#eeeee8; 
    background-position:100px 50px;*/
/*    简写：*/
/*   background:url(bg4.jpg) 100px 50px no-repeat #eeeee8;*/
  background:url(013.jpg) no-repeat left top fixed;}
</style>
</head>
<body>
<p>asf</p>
<p>sadf</p>
<p>asdfas</p>
<p>df</p>
<p>asdf</p>
<p>asd</p>
<p>fas</p>
<p>df</p>
<p>asdf</p>
<p>as</p>
<p>fas</p>
<p>df</p>
<p>asdf</p>
<p>as</p>
<p>df</p>
<p>asdf</p>
<p>asd</p>
<p>fas</p>
<p>dfadsfa</p>
<p>asd</p>
<p>f</p>
<p>asdf</p>
<p>asdf</p>
<p>a</p>
<p>fdas</p>
<p>fa</p>
<p>sf</p>
<p>asd</p>
<p>fas</p>
<p>fas</p>
<p>f</p>
<p>asdf</p>
<p>sa</p>
<p>asdf</p>
<p>asdf</p>
<p>asf</p>
<p>asf</p>
<p>asf</p>
<p>asfd</p>
<p>&nbsp;</p>
<p>sdf</p>
</body>
</html>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>恭喜</title>
<style type="text/css">
div.three{ background-attachment:fixed;}
.one{height:927px; background:url(img/left.jpg) no-repeat ;}
.two{height:927px; background:url(img/right.jpg) right top no-repeat;}
.three{height:927px; background:url(img/top.jpg) no-repeat top center; }
.four{height:927px; background:url(img/bottom.jpg) no-repeat center center;}
</style>
</head>
<body>
<div class="one">
        <div class="two">
                <div class="three">
                    <div class="four"></div>
                </div>
        </div>
</div>
</body>
</html>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body,a,li{font-size:12px; text-decoration:none; list-style:none;}
</style>
</head>
<body>
<ul>
<li>测试</li>
<li>测试</li>
<li>测试</li>
</ul>
<a href="#">测试</a>
<a href="#">测试</a>
<a href="#">测试</a>
</body>
</html>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>购物车</title>
<style type="text/css">
.box{text-align:center;}
.box a{  display:inline-block;width:67px; height:32px; background:url(110.png) no-repeat top left;}
.box a:hover{ background-position:bottom;}
</style>
</head>
<body>
<div class="box">
<a href="#"></a>
</div>
</body>
</html>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>边框线</title>
<style type="text/css">
div{width:200px; height:100px; /*border-color:#f00; border-width:1px; border-style:dashed;*/
/*border:1px solid #0F0;*/ border-top:1px solid #F00; border-bottom:1px solid #0F0;}
</style>
</head>
<body>
<div>asdfasdf</div>
</body>
</html>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单</title>
<style type="text/css">
input{border:none;  border-bottom:1px dashed #f00; }
</style>
</head>
<body>
用户名：<input type="text" /><br />
密&nbsp;&nbsp;&nbsp;码:<input type="password" />
</body>
</html>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>列表</title>
<style type="text/css">
.hd{height:35px; width:238px; border:1px solid #D9E0EE; border-top:3px solid #FF8400; border-bottom:0; text-indent:2em; font-weight:bold; line-height:35px;}
.bd{height:130px; width:238px; border:1px solid #D9E0EE; }
.bd ul li{line-height:24px; background:url(hhh.jpg) no-repeat left center; text-indent:1em;}
.bd ul{list-style:none; /*清除列表样式*/}
.bd  a{font-size:12px; text-decoration:none; color:#3c3c3c;}
.bd a:hover{color:#FF8400; text-decoration:underline;} 
</style>
</head>
<body>
<div class="hd">行业动态</div>
<div class="bd">
    <ul>
        <li><a href="#">不老女神-伊能静的减肥秘诀！！</a></li>
        <li><a href="#">不老女神-伊能静的减肥秘诀！！</a></li>
        <li><a href="#">不老女神-伊能静的减肥秘诀！！</a></li>
        <li><a href="#">不老女神-伊能静的减肥秘诀！！</a></li>
    </ul>
</div>
</body>
</html>

 

转载请备注。

 

posted @ 2015-09-23 22:09  sunnyJun  阅读(166)  评论(0)  编辑  收藏  举报