• 微信
您当前的位置:首页  > 文章 >  纯文字新闻列表制作教程

纯文字新闻列表制作教程

作者:admin 时间:2020-01-11 阅读数:43人

        网页制作过程中,有很多的专题可以去学习,这些专题包含了网页中经常使用到的功能,这篇文章就是从制作新闻列表开始,站长地带(www.zzarea.com)会把所有类似的效果形成一个新闻列表专题,供同学们集中学习。

效果如下:

纯文字新闻列表制作教程

这个新闻列表是参照站长地带文章页右侧内容做的教程,可以参见:http://www.zzarea.com/css/2.html,这种新闻列表属于没有图标,纯文字的新闻列表,使用的地方非常之多,代码精炼。

body结构代码

<div class="a1">
  <div class="a2"><span>热点教程</span></div>
  <ul>
  <li><a href="http://www.zzarea.com">CSS盒子模型:CSS盒子模型是什么意</a></li>
  <li><a href="#">CSS盒子模型:CSS盒子模型是什么意</a></li>
  <li><a href="#">CSS盒子模型:CSS盒子模型是什么意</a></li>
  <li><a href="#">CSS盒子模型:CSS盒子模型是什么意</a></li>
  <li><a href="#">CSS盒子模型:CSS盒子模型是什么意</a></li>
  <li><a href="#">CSS盒子模型:CSS盒子模型是什么意</a></li>
  <li><a href="#">CSS盒子模型:CSS盒子模型是什么意</a></li>
  <li><a href="#">CSS盒子模型:CSS盒子模型是什么意</a></li>
  <li><a href="#">CSS盒子模型:CSS盒子模型是什么意</a></li>
  <li><a href="#">CSS盒子模型:CSS盒子模型是什么意</a></li>
   
  </ul>
  </div>
   

CSS代码:

<style type="text/css">
  *{
  margin:0px;
  padding:0px;
  }
  body{
  font-size:12px;
  font-family:"微软雅黑";
  }
  .a1{
  width:280px;
  border:1px solid #CCCCCC;
  margin:30px auto;
   
  }
   
  .a2{
  height:40px;
  line-height:40px;
  background-color:#f5f5f5;
  border-top:2px solid #0066FF;
  border-bottom:1px solid #CCCCCC;
  }
  .a2 span{
  font-size:16px;
  font-weight:bold;
  padding-left:18px;
  }
  ul{
  list-style:none;
  padding:10px;
  }
  li{
  height:30px;
  line-height:30px;
  border-bottom:1px dashed #CCCCCC;
   
  }
  li a{
  color:#000000;
  text-decoration:none;
  }
  li a:hover{
  color:#FF0000;
  }
  </style>

声明

源码下载不顺利,比如源码在百度网盘的有时会被无故取消等,请联系QQ:46667551
本站大部分下载资源收集于网络,但除特别说明之外,基本全部亲自测试可用!
但由于某些源码的更新迭代,比如微信小程序官方接口的变动等原因,
如时间过长,可能会造成本可以使用的代码出现问题,下载前请斟酌!
本站资源仅供学习和交流使用,版权归原作者所有,请在下载后24小时之内自觉删除。
若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,使用者自行承担,概与本站无关。

原文链接:https://www.dnwfb.com//971.html,转载请注明出处