博客静态网页
左侧列表的实现这部分:
#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行去了