课堂总结

博客静态网页

左侧列表的实现这部分：

#banner:一张头部图片        #huoli:标题、小图标、列表       #list:标题、列表 文章分类列表 最新文章列表

#left:中间的左边部分           #main:中间主要部分                 #footer:尾部的部分

#menu:导航菜单                 #right:中间的右边部分              #zuozhe:图片和文本

知识点： 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块划分成3个区域，使用div标签

<!--左侧的部分--> <div id="left">     

<div id="zuozhe"></div>                

<div id="huoli"></div>                

<div id="list"></div>

</div>

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

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

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

<div id="zuozhe">     

<img src="images/baby.jpg" alt="作者的照片"  />                     

<span>linda zhaoqi</span>

</div>

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

h1~h6标题，h1最大

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

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

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

转载于:https://my.oschina.net/u/4091195/blog/3024768