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

来源：互联网发布：淘宝免费注册编辑：程序博客网时间：2024/06/14 00:14
<!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>
0 0