3.18日企业实训第三节(左侧列表的实现)-CSDN博客

●#banner:一张头部图片

#left:中间的左边部分

#main:中间主要部分

#footer:尾部的部分

#menu:导航菜单

#right:中间的右边部分

#zuozhe:图片和文本

#huoli:标题、小图标、列表

#list:标题、列表、文章分类列表、最新文章列表

知识点：

HTML 中的标签：块标签 div 、图片 < img > 、行内标签 <span> 、 h5 标题、列表标签 < ul > 、 <li>

CSS 样式中的属性：

图片边框： border

高： height 宽： width

内边距： pandding

外边距： margin

边框 4 个角设为圆角 :border-radius

文本内容居中： text-align

字体： font-size 、 font-family 、 font-weight 、 color

垂直居中： line-height

取消项目符号： list-style

浮动： float

字体下划线： text-decoration

背景图片： backround

左侧列表的实现-HTML

● 先将左侧的 div 块划分成 3 个区域，使用 div 标签

</div>

● “作者”这个div 里是包含图片和文本。

<img /> 单标签、有 src 和 alt 两个属性，

<span></span>成对、没有语义的标签，主要是为了方便对文本添加样式的

<span>linda zhaoqi</span>

</div>

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

h1~h6 标题， h1 最大

<ul>

</ul>

</div>

● “文章分类、文章列表”放在一块 div 了，包含标题 <h5> 、列表标签 < ul ><li></li></ ul >

当点击文章分类或者文章名称时，会有跳转这样一个操作，所以用 <a> 超链接

<h5>我的文章分类</h5>

<ul>

<li><a href="#">Web基础</a></li>

<li><a href="#">Java基础</a></li>

<li><a href="#">Servlet开发</a></li>

<li><a href="#">Spring框架</a></li>

</ul>

<h5>最新文章列表</h5>

<ul>

<li><a href="#">我的家在哪里</a></li>

<li><a href="#">web基础之HTML</a></li>

<li><a href="#">大学生软件设计大赛</a></li>

</ul>

</div>

@charset "utf-8";
/* CSS Document */
*{/*通配符选择器*/
	margin:0px;
	padding:0px;
	}
#box{
	/*background-color:#F00;*/
	width:1024px;
	height:1300px;
	/*margin:0 auto;*/
	margin:0 auto 0 auto;/*上 右 下 左*/
}
/*放图片，设置高度和图片一样高*/
#banner{
	background-color:#66F;
	height:209px;
}
#menu{
	background-color:#125426;/*用颜色取色器取的*/
	height:50px;
}
/*修改id为menu的,html标签下面的，ul标签的样式*/
#menu ul{
	list-style:none;/*去掉点*/
	float:right;/*靠右*/
	height:50px;
	width:450px;	
}

#menu li{
	line-height:50px;/*设置行居中*/
	float:left;/*可以使列表竖着变横着*/
	margin:20px;/*距离左边那个li的距离*/
	}
	
	/*#menu ul li a{}*/
#menu a{
	color:#FFF;/*字体颜色*/
	text-decoration:none;/*去掉下划线*/
	font-size:16px;/*字体大小*/
	font-family:"楷体";/*word中常见字体一般都可以写*/
	}

#menu a:hover{/*当鼠标划过超链接标签时的样式*/
	color:#6F3;
	}

#main{
	/*background-color:#6F0;*/
	height:1000px;
}
#left{
	/*background-color:#33C;*/
	height:1000px;
	width:250px;
	float:left;/*可以使div横向排排坐*/
}

#zuozhe{
	padding-top:15px;
	padding-left:15px;/*上边和左边留点空*/
	text-align:center；/*整个内容水平居中*/
	}
	
	#zuozhe img{
		border:1px solid #FF3;/*加边solid实线*/
		padding:8px;/*边与图片有个空白，类似相框*/
		border-radius:20px;/*圆角，值越大，角越圆*/
		}
	


#right{
	background-color:#F3F;
	height:1000px;
	width:774px;
	float:right;/*可以使div横向排排坐*/
}

#footer{
	background-color:#F63;
	height:80px;
}

左侧列表的实现-CSS

●盒子模型

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

● 对图片需要设置：

内边距 padding: 一圈都是 8 px;

设置绿色的、实线的边 border ： 1px solid #096

Css 代码：

#zuozhe{

text-align:center;

padding-left:15px;

padding-top:15px;

}

#zuozhe img{

border:1px solid #096;

padding:8px;

border-radius:8px;/*设置圆角CSS3新特性*/

}

注意：以前实现圆角很麻烦，现在css3有了border-radius这个属性，就很容易了，但是因为css3新特性，所以不同的浏览器可能存在兼容性问题。

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

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

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

#zuozhe span{

font-size:15px;

margin:10px;

border-top:1px dashed #666666;

border-bottom:1px dashed #666666;

padding-top:5ox;

padding-bottom:5px;

display:block;/*将span行内元素转成块元素*/

}

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

#huoli ul{

padding-left:20px;

padding-top:10px;

list-style:none;

/*去掉点*/

}

#huoli ul li{

float:left;

/*因为空间不够宽，仅能放下2个li*/

width:80px;

margin:5px;

}

#huoli ul li a{

float:left;

font-size:12px;

color:#333333;

text-decoration:none;

}

#huoli ul li img{

/*为了和文字保持队形，也浮动*/

float:left;

margin-right:6px;

}

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

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

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

#list ul{

list-style:none;

padding:15px;

}

#list ul li{

border-bottom:1px dashed #666;

padding-bottom:8px;

padding-left:15px;

background:url(images/icon1.gif) no-repeat;

/*背景图片左上角相对于li元素左上角的位置 x轴 y轴*/

background-position:5px center;

margin-bottom:8px;

}

#list ul li a{

font-size:12px;

color:#333;

text-decoration:none;

}

@charset "utf-8";
/* CSS Document */
*{/*通配符选择器*/
	margin:0px;
	padding:0px;
	}
#box{
	/*background-color:#F00;*/
	width:1024px;
	height:1300px;
	/*margin:0 auto;*/
	margin:0 auto 0 auto;/*上 右 下 左*/
}
/*放图片，设置高度和图片一样高*/
#banner{
	background-color:#66F;
	height:209px;
}
#menu{
	background-color:#125426;/*用颜色取色器取的*/
	height:50px;
}
/*修改id为menu的,html标签下面的，ul标签的样式*/
#menu ul{
	list-style:none;/*去掉点*/
	float:right;/*靠右*/
	height:50px;
	width:450px;	
}

#menu li{
	line-height:50px;/*设置行居中*/
	float:left;/*可以使列表竖着变横着*/
	margin:20px;/*距离左边那个li的距离*/
	}
	
	/*#menu ul li a{}*/
#menu a{
	color:#FFF;/*字体颜色*/
	text-decoration:none;/*去掉下划线*/
	font-size:16px;/*字体大小*/
	font-family:"楷体";/*word中常见字体一般都可以写*/
	}

#menu a:hover{/*当鼠标划过超链接标签时的样式*/
	color:#6F3;
	}

#main{
	/*background-color:#6F0;*/
	height:1000px;
}
#left{
	/*background-color:#33C;*/
	height:1000px;
	width:250px;
	float:left;/*可以使div横向排排坐*/
}

#zuozhe{
	padding-top:15px;
	padding-left:15px;/*上边和左边留点空*/
	text-align:center；/*整个内容水平居中*/
	}
	
	#zuozhe img{
		border:1px solid #FF3;/*加边solid实线*/
		padding:8px;/*边与图片有个空白，类似相框*/
		border-radius:20px;/*圆角，值越大，角越圆*/
		}
	


#right{
	background-color:#F3F;
	height:1000px;
	width:774px;
	float:right;/*可以使div横向排排坐*/
}

#footer{
	background-color:#F63;
	height:80px;
}

转载于:https://my.oschina.net/u/4094999/blog/3024216