css.day03.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">
.box{width:200px; height:100px; border:1px solid #00f; padding:10px; 
/* margin-top:100px;
 margin-bottom:200px;
 margin-left:0;
 margin-right:20px;*/
/* margin:100px;*/
/*margin:100px 30px;*/
/*margin:100px 30px 10px;*/
margin:10px 20px 30px 40px;
}
</style>
</head>
<body>
<div class="box"><img src="sohulogo.png" /></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>padding</title>
<style type="text/css">
.box{width:172px; height:88px; border:1px solid #060; margin:100px; padding-top:12px; text-align:center;}
</style>
</head>
<body>
<div class="box"><img src="sohulogo.png" /></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">
.box{width:220px; height:200px; border:1px solid #ccc; padding-left:12px; padding-right:6px;}
</style>
</head>
<body>
<div class="box"></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>padding不会影响盒子大小的情况</title>
<style type="text/css">
.big{width:300px; height:200px; border:1px solid #096; margin:50px;}
.small{border:1px solid #f00; height:100px; padding-left:50px;}
</style>
</head>
<body>
<div class="big">
<div class="small"></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>firebug</title>
<style type="text/css">
.box{width:300px; height:200px; margin:100px; padding:50px; background-color:#093;}
</style>
</head>
<body>
<div class="box"></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">
body,div,ul,li,h1{margin:0; padding:0;}
.box{width:300px; height:200px; background-color:#099; text-align:center; margin:0 auto;}
h1{background-color:#963; width:300px;margin:0 auto;}
li{background-color:#F00;}
ul{background-color:#090; margin:0 auto;}
</style>
</head>
<body>
<div class="box">123</div>
<h1>我的标题</h1>
<ul>
    <li>测试</li>
    <li>测试</li>
</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">
*{margin:0; padding:0;}
body{font-size:12px; color:#3c3c3c; font-family:Arial, Helvetica, sans-serif;}
a{ text-decoration:none; color:#3c3c3c;}
a:hover{color:#C60; text-decoration:underline;}
dl{margin:50px auto; width:300px; border:1px solid #ccc;}
dl dt{ height:35px;line-height:35px; padding-left:40px; border-bottom:1px solid #ccc; background:url(img/ic.png) no-repeat  15px center;  font-size:14px;}
dd{padding:15px 0;}
ul{list-style:none; }
ul li{text-align:center; height:25px; line-height:25px; background:url(img/videoNewsLeft.gif) no-repeat 30px center;}

</style>
</head>
<body>
<dl>
    <dt><strong>山东鲁能</strong></dt>
    <dd>
        <ul>
            <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>
            <li><a href="#">山穷水尽！传闻背后的申花 王大雷适</a></li>
        </ul>
    
    </dd>
</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">
body,div,ul,li,h1,h3,h4,h2,textarea,input,p{margin:0; padding:0;}
body{font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#3c3c3c;}
a{color:#000; text-decoration:none;}
a:hover{color:#F00; text-decoration:underline;}
.box{ width:725px; height:220px; border:1px solid #abc; margin:0 auto; margin-top:100px; padding-left:25px; padding-top:30px;}
.box h3 a{font-weight:normal; color:#F00; text-decoration:underline; margin-left:10px;}
textarea{ width:670px; height:80px; border:1px solid #abc; margin:15px 0; padding:10px; font-size:12px; color:#CCC; resize:none;}
p{margin-top:15px; color:red;}
</style>
</head>

<body>
<div class="box">
        <h3>评论     <img src="images/110.jpg" /><a href="#">俺要打分</a></h3>
        <textarea>请输入您对的意见或者建议！！</textarea>
        <input type="image" src="images/tj.jpg" />
       <p>暂时没有评论</p>
</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">
*{margin:0; padding:0;}
.box{width:300px; margin:100px auto;}
.search{width:175px; height:20px; border:1px solid #ccc; color:#CCC; background:url(search_03.png) no-repeat 5px center; padding-left:25px;}
label{color:#3c3c3c; font-size:14px;}
</style>
</head>
<body>
<div class="box">
<label for="sear">搜索一下：</label><input type="text" value="请输入搜索内容..." class="search" id="sear" /></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">
*{margin:0; padding:0;}
body{font-size:14px; font-family:"微软雅黑"; color:#3c3c3c;}
a{color:#4c4c4c; text-decoration:none;}
a:hover{color:#FF8400;}
.nav{width:100%; height:41px; border-top:3px solid #FF8500; border-bottom:1px solid #ccc; background-color:#fcfcfc;}
.navin{width:980px; height:41px; line-height:41px;margin:0 auto;}
.navin a{ display:inline-block; height:41px; padding:0 10px;}
.navin a:hover{ background-color:#EDEEF0;}
</style>
</head>
<body>
<div class="nav">
    <div class="navin">
        <a href="#">设为首页</a>
        <a href="#">移动客户端</a>
        <a href="#">你好</a>
        <a href="#">pad版</a>    
    </div>
</div>
</body>
</html>

 

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