web网页开发第四课学习总结

左侧列表的实现

知识点： 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

第一部分：活力地带

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

<div id="huoli">
         <h5>活力地带</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>我的文章分类</h5>
   <ul>
      <li><a href="#">个人随笔</a></li>
      <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="#">你好!秋天</a></li>
      <li><a href="#">web基础之HTML</a></li>
      <li><a href="#">大学生软件设计大赛</a></li>
   </ul>
</div>

对图片的设置：

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

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

#zuozhe{
	padding-top:15px;
	padding-left:15px;/*上边和左边留点空*/
	text-align:center;/*整个内容水平居中*/
}

#zuozhe img{
	border:1px solid #999;/*加边solid实线*/
	padding:8px;/*边与图片有个空白，类似相框*/
	border-radius:10px;/*圆角，值越大，角越园*/
}
	
#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;/*下面的*/
}

”活力地带“css代码展示：

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

#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;/*让图标和文字之间的距离大点*/
}

“文章分类、文章列表”：

列表样式：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/4090404/blog/3028310