web学习第三课，网页列表设计+div分块

---博客静态网页（项目实例）

接上次的项目实例，该项目实例是一个带有图片的静态网页，区域布局分明。

做一个静态网页的步骤顺序：

• 网站整体布局分析设计（已完成）
• 导航与Banner的实现（已完成）
• 左侧列表的实现（本节）
• 主体内容与脚注的实现（未完待续）
• 发布（未完待续）

上次效果图：

---左侧列表的实现

1、HTML中的标签：块标签div、图片、行内标签、h5标题、列表标签

、

• 2、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块划分成3个区域，使用div标签

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

  单标签、有src和alt两个属性，

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

  
  	
                  	linda zhaoqi
  
  

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

  对图片需要设置：

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

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

  对应左侧列表的CSS代码：

  #menu{
  	background-color:#328048;/*用颜色取色器取的*/
  	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-left:20px;/*li距离左边那个li的距离*/
  }
  
  /*#menu ul li a{}*/
  #menu a{
  	color:#FFF;/*字体颜色*/
  	text-decoration:none;/*去掉下划线*/
  	font-size:16px;/*字体大小*/
  	font-family:"微软雅黑";/*word中常见字体一般都可以写*/
  }
  
  #menu a:hover{/*当鼠标滑过超链接标签时的样式*/
  	color:#F60;
  }
  

  ---后面两步，未完待续...

转载于:https://my.oschina.net/u/4090663/blog/3024673