css.day01.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>css规范</title>
<style type="text/css">
body{color:red;font-size:12px;}
</style>
</head>
<body>
<p>xxxx</p>
<p>xxxx</p>
<p>xxxx</p>
<div>xxxx</div>
<div>xxxx</div>
<ul>xxxx</ul>
<dl>xxxx</dl>
</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>
</head>
<body>
<p>xxxx</p>
<p>xxxx</p>
<p>xxxx</p>
<div>xxxx</div>
<div style="color:#F00;font-size:12px;">xxxx</div>
<ul>xxxx</ul>
<dl>xxxx</dl>
</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>
    ul{font-size:12px; color:red;}
    div{font-size:14px; color:#03C;}
</style>
</head>
<body>
<p>xxxx</p>
<p>xxxx</p>
<p>xxxx</p>
<div>xxxx</div>
<div>xxxx</div>
<ul>xxxx</ul>
<dl>xxxx</dl>
</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>
<link rel="stylesheet" href="link.css" type="text/css" />
</head>
<body>
<p>xxxx</p>
<p>xxxx</p>
<p>xxxx</p>
<div>xxxx</div>
<div>xxxx</div>
<ul>xxxx</ul>
<dl>xxxx</dl>
</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{height:100px; width:200px; background-color:#F00; display:inline;}
p{height:100px; width:200px; background-color:#F00; display:inline;}
span{height:100px; width:200px; background-color:#F00; display:block;}
font{height:100px; width:200px; background-color:#F00; display:block;}
b{height:100px; width:200px; background-color:#F00; display:block}
a{width:100px; height:50px; background-color:#036; display:inline-block;}
</style>
</head>
<body>
<div>123</div>
<p>123</p>
<span>abc</span>
<font>abc</font>
<b>abc</b>
<a>百度</a>
<a>百度</a>
<a>百度</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">
.suiyi{color:#F00; font-size:12px;}
.lan{color:#03C;}
</style>
</head>
<body>
<div>xxxx</div>
<div class="suiyi">xxxx</div>
<div>xxxx</div>
<div class="lan">xxxx</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">
.g{color:#176CEE; font-size:200px; font-weight:bold; }
.o{color:#D4412D;font-size:200px; font-weight:bold;}
.oo{color:#FFB404; font-size:200px; font-weight:bold; }
</style>
</head>
<body>
<span class="g">G</span>
<span class="o">o</span>
<span class="oo">o</span>
<span class="g">g</span>le
</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>id选择器</title>
<style type="text/css">
#zuihou{color:#F00;}
h1{color:#F00;}
</style>
</head>
<body>
<div>xxxx</div>
<h1>xxxx</h1>
<h1>xxxx</h1>
<div>xxxx</div>
<p>xxxx</p>
<div>xxxx</div>
<div id="zuihou">xxxx</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{color:#F00;}
div{color:#00F;}
</style>
</head>
<body>
<div>xxxx</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{color:#F00;}
strong{color:#00F;}
</style>
</head>
<body>
<div>我在<strong> <b>xxxx</b></strong>zzzz呢</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>
</head>

<body>
<h2 align="center" style="color:#ffff00;font-size:18px;">今日小说排行榜</h2>
<table width="800" border="0" cellspacing="1" cellpadding="0" align="center" bgcolor="#d7d7d7"  height="350" style="color:#00f; font-size:14px;">
    <tr bgcolor="#f1f1f1">
        <th>排名</th>
        <th>关键词</th>
        <th>趋势</th>
        <th>今日搜索</th>
        <th>最近七日</th>
        <th>相关链接</th>
    </tr>
    <tr bgcolor="#ffffff" style="color:#0F0; ">
        <td align="center">1</td>
        <td align="center">武动乾坤</td>
        <td align="center"><img src="up.jpg" width="13" height="11" /></td>
        <td align="center">623557</td>
        <td align="center">123456</td>
        <td align="center"><a href="#">贴吧</a>&nbsp; <a href="#">图片</a>&nbsp;<a href="#">百科</a></td>
    </tr>
    <tr bgcolor="#ffffff">
        <td align="center">2</td>
        <td align="center">鬼吹灯</td>
        <td align="center"><img src="up.jpg" width="13" height="11" /></td>
        <td align="center">1</td>
        <td align="center">123456</td>
        <td align="center"><a href="#">贴吧</a>&nbsp; <a href="#">图片</a>&nbsp;<a href="#">百科</a></td>
    </tr>
    <tr bgcolor="#ffffff">
        <td align="center">3</td>
        <td align="center">武动乾坤</td>
        <td align="center"><img src="down.jpg" width="13" height="11" /></td>
        <td align="center">1</td>
        <td align="center">123456</td>
        <td align="center"><a href="#">贴吧</a>&nbsp; <a href="#">图片</a>&nbsp;<a href="#">百科</a></td>
    </tr>
    <tr bgcolor="#ffffff">
        <td align="center">4</td>
        <td align="center">武动乾坤</td>
        <td align="center"><img src="up.jpg" width="13" height="11" /></td>
        <td align="center">45</td>
        <td align="center">123456</td>
        <td align="center"><a href="#">贴吧</a>&nbsp; <a href="#">图片</a>&nbsp;<a href="#">百科</a></td>
    </tr>
    <tr bgcolor="#ffffff">
        <td align="center">5</td>
        <td align="center">武动乾坤</td>
        <td align="center"><img src="up.jpg" width="13" height="11" /></td>
        <td align="center">455</td>
        <td align="center">123456</td>
        <td align="center"><a href="#">贴吧</a>&nbsp; <a href="#">图片</a>&nbsp;<a href="#">百科</a></td>
    </tr>
    <tr bgcolor="#ffffff">
        <td align="center">6</td>
        <td align="center">武动乾坤</td>
        <td align="center"><img src="down.jpg" width="13" height="11" /></td>
        <td align="center">2554</td>
        <td align="center">123456</td>
        <td align="center"><a href="#">贴吧</a>&nbsp; <a href="#">图片</a>&nbsp;<a href="#">百科</a></td>
    </tr>
    <tr bgcolor="#ffffff">
        <td align="center">7</td>
        <td align="center">武动乾坤</td>
        <td align="center"><img src="up.jpg" width="13" height="11" /></td>
        <td align="center">44</td>
        <td align="center">123456</td>
        <td align="center"><a href="#">贴吧</a>&nbsp; <a href="#">图片</a>&nbsp;<a href="#">百科</a></td>
    </tr>
</table>
</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>
<link rel="stylesheet" href="yxj.css" type="text/css" />
<style type="text/css">
div{color:#0F0;}
h1{color:#F00;}
.lv{color:#0F0;}
.dada{font-size:100px;}
#lan{color:#00F;}
</style>
</head>
<body>
<div style="color:#00F;">xxxx</div>
<h1 id="lan" class="lv dada" style="color:#F0F">xxxx</h1>
</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;}
body{font-size:12px;}
.search{width:420px; height:25px;}
.tj{height:30px; width:100px;}
.nav{height:60px; font-size:14px;}
.bk{font-size:14px; height:60px;}
.sou{height:50px;}
.map{height:60px;}
.copyright{line-height:25px;}
font{ font-family:Arial, Helvetica, sans-serif;}
</style>
</head>
<body>
<div class="logo"><img src="bdlogo.gif"  width="270" height="129" title="百度一下，你就知道"/></div>
<div class="nav"><a href="#">新 闻</a>　<strong>网 页</strong>　<a href="#">贴 吧</a>  <a href="#">知 道</a>  <a href="#">音 乐</a>  <a href="#">图 片</a>  <a href="#">视 频</a>  <a href="#">地 图</a></div>
<div class="sou"><input type="text" class="search" />　<input type="submit" value="百度一下"  class="tj"/></div>
<div class="bk"><a href="#">百科</a>　<a href="#">文库</a>　<a href="#">hao123</a> | <a href="#">更多&gt;&gt;</a></div>
<div class="map"><img src="ic.jpg" /> <a href="#">百度地图带你吃喝玩乐，全心全意为人民服务</a></div>
<div class="copyright"><a href="#">把百度设为主页</a> <a href="#">安装百度卫士</a><br />
    <a href="#">加入百度推广</a> | <a href="#">搜索风云榜</a> | <a href="#">关于百度</a> | <a href="#">About Baidu</a><br />
<font>©</font>2013 Baidu 使用百度前必读 京ICP证030173号</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>
em{color:#F00; font-style: normal;}
strong{color:#03C; font-weight:normal;}
</style>
</head>
<body>
xxxx-聚集众多<em>java培训</em>大师，口碑最好的<em>java培训</em>机构，先就业... 
<em>java培训</em>的龙头老大,<strong>口碑</strong>最好的<em>java培训</em>、.net培训、PHP培训、网页培训机构，问天下培训机构谁敢争锋? 就业率高居中国培训机...
www.xxxx.cn/ 2012-3-1 - 百度快照 
 
北京尚学堂-口碑最好的<em>java培训</em>机构，就业后分期还！就业率居北京... 
尚学堂是北京口碑最好的<em>java培训</em>机构，就业率始终位居北京<em>java培训</em>机构首位，并为学员提供就业后分期还等服务！提供java视频教程下载，师资:马士兵，高淇等等，是国内...
www.bjsxt.com/ 2012-2-29 - 百度快照 
 

北京<em>java培训</em>谁最好？java基础,java视频领导品牌-动力节点java培... 
北京<em>java培训</em>领导品牌:动力节点<em>java培训</em>机构，创造全班最低薪资每月5000元的记录，拥有国内最具实战能力的<em>java培训</em>讲师，整体就业率高达95%，在<em>java培训</em>行业遥遥领先！...
www.bjpowernode.com/ 2012-3-1 - 百度快照 
</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">
    @import url(link.css);
</style>
</head>
<body>
<p>xxxx</p>
<p>xxxx</p>
<p>xxxx</p>
<div>xxxx</div>
<div>xxxx</div>
<ul>xxxx</ul>
<dl>xxxx</dl>
</body>
</html>

 

@charset "utf-8";
/* CSS Document */
@import url(demo.css);
p{color:#00f; font-size:12px;}

 

 转载请备注。

 

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