css.day03.eg
2015-09-23 22:34
603 查看
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS属性、BFC、IFC
- IE 兼容与CSS选择器
- css.day03
- css.day02.eg
- 【博客美化】01.推荐和反对炫酷样式
- css.day02
- css3控制背景渐变
- CSS3的学习
- css.day01.eg
- [css]兼容性
- css3的弹性布局
- css动画翻转效果
- 【DIV+CSS】代码作业练习DIV+CSS太极阴阳图
- CSS----布局常见问题
- 324篇CSS应用效果集合（梦想天空，可同时应用于Web开发与Qt界面开发）
- css3中transition和display的坑
- 【前端学习笔记】关于CSS通过一个块改变另一个块的样式
- 如何让表格自动换行
- CSS鼠标悬停div加边框效果
- 【CSS】padding,border,margin与width宽度的关系