企业实训第四

“活力地带”的div，包含标题<h5>、图片<img />、列表标签<ul><li></li></ul>

h1~h6标题，h1最大

<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了，包含标题<h5>、列表标签<ul><li></li></ul>；当点击文章分类或者文章名称时，会有跳转这样一个操作，所以用<a>超链接

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

css：

所有HTML元素可以看作盒子，span默认不具备盒子模型属性。

#zuozhe{

padding-top:15px;

padding-left:15px;/*上边和左边留点空*/

text-align:center;/*整个内容水平居中*/

}

#zuozhe img{

border:1px solid #999;/*加边solid实线*/

padding:8px;/*边与图片有个空白，类似相框*/

border-radius:10px;/*圆角，值越大，角越园*/

}

将span转成块元素：display:block 当然也可以从块元素转回行内元素display:inline

#zuozhe span{

margin:10px;/*一圈的距离*/

display:block;/*改成盒子元素，可以识别盒子元素的一些属性：margin、border\padding*/

border-top:1px #999 dashed;/*上面的虚线边 粗细是1，颜色是灰色 */

border-bottom:1px #999 dashed;/*下边的虚线*/

font-size:18px;/*字号*/

padding-top:5px;/*内容距离边的距离-上面的*/

padding-bottom:5px;/*下面的*/

}

.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代表没有圆角*/

}

“活力地带”列表和菜单导航里的一样，设置为浮动，就会排排坐，一个个从左到右，因为一行只要2个，所以宽度有限制以后，放置2个li后就自动掉第2行去了

#huoli ul{

list-style:none;/*去点*/

padding-left:20px;

padding-top:10px;

}

#huoli ul li{

margin:5px;/*每个li之间的距离*/

width:90px;

float:left;/*因为外面的ul的宽度太小了，所以原本应该都放在一行的，会自动的掉下去，变成一行只能展示2个li*/

}

#huoli ul li a{

font-size:12px;

text-decoration:none;/*去下划线*/

color:#333;/*网站字体一般都不是黑色，扎眼*/

}

#huoli ul li a:hover{/鼠标滑过变色/

color:#090;

}

#huoli ul li img{

margin-right:5px;/*让图标和文字之间的距离大点*/

}

#list{

clear:both;/*清空所有的自带的float影响*/

}

列表样式：li标签：用背景更容易设置列表的图标样式

background-position:5px center;背景图片左上角相对于li元素左上角位置 x轴 y轴

#list ul{

list-style:none;

padding:15px;/*不靠左边和上边，留空*/

}

#list ul li{

padding-bottom:8px;

padding-left:15px;

border-bottom:1px #999 dotted;/*下面的虚线：dashed或者dotted*/

margin-bottom:8px;/*我的边和其他人的字的距离，padding我的字和我的边的距离*/

background:url(images/icon1.gif)  no-repeat;/*不重复的话，变成背景*/

background-position:5px center;/*背景点的位置*/

}

转载于:https://my.oschina.net/u/4090474/blog/3028219