博客静态网页-（第三部分）

四（2）、左侧列表

1.“活力地带”这块的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>

2.“文章分类、文章列表”放在一块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>

3.设置作者区域中文本的样式，如果没有span标签，就没有什么标识可以针对这段文本 来设置css样式，所以span就是针对这样的情况用的

所有HTML元素可以看作盒子，span默认不具备盒子模型属性。盒子模型有padding、margin，但是span不具备这些属性，也就是设置这些是不起作用的，怎么办呢？

将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;/*下面的*/
}

4.高度肯定得设置，因为列表都是浮动的，必须设置在多大的范围里浮动

“活力地带”这个标题和其他俩标题样式一样，那怎么设置css？Class选择器

/*class选择器的写法 以点开头 后面跟着html标签上的class属性里面的那个名*/
.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代表没有圆角*/
}

5.“活力地带”列表和菜单导航里的一样，设置为浮动，就会排排坐，一个个从左到右，因为一行只要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;/*让图标和文字之间的距离大点*/
}

6. “文章分类、文章列表”标题样式和活力地带用一个class

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

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

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

#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/4090553/blog/3028320