您的位置：首页 > Web前端 > CSS

认识CSS样式（第三部分-盒子模型）

2016-10-04 13:58 323 查看

<!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{border-bottom-color:#F00;
border-bottom-width:10px;
border-bottom-style:dotted;
border-left-color:#F00;
border-left-style:dotted;;
border-left-width:10px;
border-right-color:#F00;
border-right-style:dotted;;
border-right-width:10px;
border-top-color:#F00;
border-top-style:dotted;;
border-top-width:10px;}
/*简写*/
.first{ border-bottom:2px solid #F00;
border-top:2px solid #F00;
border-left:2px solid #F00;
border-right:2px solid #F00;
margin:10px;/*外边界，上下左右宽度相等*/
padding:15px;/*内填充，上下左右宽度相等*/}
.second{  border-bottom:2px solid #F00;
border-top:2px solid #F00;
border-left:2px solid #F00;
border-right:2px solid #F00;
padding:15px;
margin:10px;}
</style>
</head>

<body>
<div class="first">
<h1>勇气</h1>
<p>三年级的时候，我还是一个胆小如鼠的小女孩，上课从来不敢回答老师的问题，生怕回答错了，老师会批评我。学校举办的活动我也很少参加。</p>
<p>到了三年级下学期，我们班上了一节公开课。老师提了一个很简单的问题。很多人都举手回答。甚至有很多成绩比我差的，我看了一下周围，就我没举手。</p>
</div>
<div class="second">
<ul>
<li>水果
<ul>
<li>苹果</li>
<li>荔枝</li>
<li>香蕉</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>胡萝卜</li>
<li>西红柿</li>
</ul>
</li>
</ul>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航