企业实训第三节

今天讲的是左侧列表的实现

知识点： 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>、列表标签<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>

Css代码：

#zuozhe{     text-align:center;

padding-left:15px;   

 padding-top:15px; }

#zuozhe img{     border:1px solid #096;     padding:8px;     border-radius:8px;/*设置圆角CSS3新特性*     }

转载于:https://my.oschina.net/u/4091223/blog/3024685