第二章 博客静态网页3

左侧列表的实现

<!--左边区域-->
       		<div id="left">
            	<!--划分3个区域-->
                <div id="zuozhe">
                	<img src="images/baby.jpg" alt="个人照片"/>
                    <!--文字,span方便对文字的样式修改，一行，不换行-->
                    <span>linda zhaoqi</span>
                </div>
                <div id="huoli">
                	<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>
                        <h5 class="biaoti">文章列表</h5>
                        <li><a href="#">你家在哪里</a></li>
                        <li><a href="#">你好！秋天</a></li>
                        <li><a href="#">你好！春天</a></li>
                        <li><a href="#">你好！冬天</a></li>
                    </ul>
                </div>
            </div>

标题h1~h6 h1最大

css代码

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

#huoli ul{
	list-style:none;
	padding-left:20px;
	padding-top:10px;
}

#huoli ul li{
	margin:5px;/*每一个li之间的距离*/
	width:80px;
	float:left;/*由于外面ul的宽度过小了， 因此本来应该都放在一行的li都会自动的掉下去，使一行只能展现2个li*/
}

#huoli ul li a{
	text-decoration:none;/*去掉下划线*/
	font-size:12px;
	color:#333;/*网站字体通常都不是黑色*/
}
#huoli ul li img{
	margin-right:2px;/*让图标和文字间的距离变大*/
}

#huoli ul li a:hover{/*鼠标滑过变色*/
	color:#090;
}

#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/iconl.gif) no-repeat;/*不重复的话 变成背景*/
	background-position:5px center;/*背景点位置*/
}

border-radius这个属性能够选择有弧度的角是哪些

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

 

这一节主要讲了左边标题的设计方式 如何排版 以及一些细节点的注意部分

调节字体大小以及居中都是很重要的地方还有选择颜色的方法