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

最新推荐文章于 2023-02-08 10:53:47 发布

qq_33151859

最新推荐文章于 2023-02-08 10:53:47 发布

阅读量442

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HTML基础编程题文章标签：编程 html css

本文链接：https://blog.youkuaiyun.com/qq_33151859/article/details/52733711

HTML基础编程题专栏收录该内容

32 篇文章

订阅专栏

本文回忆了作者三年级时因胆怯而不敢参与课堂互动的经历，并分享了一次公开课经历如何促使她克服恐惧，开始勇敢地表达自己。

<!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>