2019-3-18 (4)

本节主要是：
在左边照片的下方划分为三个大的部分：活力地带、我的文章分类、文章列表。
活力地带之中划分为6个小模块：

 <div id="huoli">
                	<!--class通用在3个标题上的样式-->
                	<h5 class="biaoti">活力地带</h5>
                    <ul>
                    	<li>
                        	<img src="images/1.gif" alt="小图标"/>
                            <a href="#">个人首页</a>
                        </li>
                    	<li>
                        	<img src="images/2.gif" alt="小图标"/>
                            <a href="#">校园文化</a>
                        </li>
                        <li>
                        	<img src="images/3.gif" alt="小图标"/>
                            <a href="#">阳光生活</a>
                        </li>
                        <li>
                        	<img src="images/4.gif" alt="小图标"/>
                            <a href="#">释放梦想</a>
                        </li>
                        <li>
                        	<img src="images/5.gif" alt="小图标"/>
                            <a href="#">我的相册</a>
                        </li>
                        <li>
                        	<img src="images/6.gif" alt="小图标"/>
                            <a href="#">给我留言</a>
                        </li>
                    </ul>
                </div>
                <div id="list">
                	<h5 class="biaoti">我的文章分类</h5>
                    <ul>
                    	<li><a href="#">个人随笔</a></li>
                        <li><a href="#">Web开发</a></li>
                        <li><a href="#">Spring框架</a></li>
                        <li><a href="#">JavaSE</a></li>
                    </ul>
                    <h5 class="biaoti">文章列表</h5>
                    <ul>
                    	<li><a href="#">我家在哪里</a></li>
                        <li><a href="#">你好！秋天</a></li>
                        <li><a href="#">你好！春天</a></li>
                        <li><a href="#">你好！冬天</a></li>
                    </ul>
                </div>
            </div>

在CSS中设置相应的属性：

.biaoti{
	color:#FFF;
	background-color:#328048;/*背景色绿色，取色器取到的*/
	height:40px;
	width:220px;
	line-height:40px;/*设置垂直居中，值要和height的值一样*/
	font-size:16px;
	font-weight:bolder;/*加粗，h5本来就是标题，已经加粗过了，不加也可以*/
	padding-left:30px;/*左边撑出来一个空*/	
	border-radius:0 10px 10px 0;/*和margin、broder、padding，都是4个值*/
	/*顺序：左上角、右上角、右下角、左下角，0代表没有圆角*/
}