ul的属性设置

2017-01-14 11:32:05来源:CSDN作者:Wake_me_Up123人点击

效果图:
这里写图片描述

html 文件中对应的代码:

<div id="industry">    <div id="indTitle">行业<a href="">更多>></a></div>    <div id="indContent">        <div id="img"></div>        <ul>            <li><a href="">单车自驾闯内蒙  带着女儿玩转青州</a></li>            <li><a href="">忙里偷闲游抚顺  福建海湾寻惠安女</a></li>            <li><a href="">去三亚放飞自己  户外男女穿狼牙山</a></li>            <li><a href="">廖舟观赏鸟化石  靓妹子闲逛在京都</a></li>        </ul>    </div></div>

CSS 的代码

#industry {height:160px; border:1px solid #C0C0C0}#indTitle {height:30px; line-height:30px; padding-left:10px; font-size:12px; color:#191970;font-weight:bold; background:#F5F5F5; padding-left:10px; display:block}#indTitle a{display:inline-block; margin-left:310px}#img {height:89px; width:120px; margin:20px 10px; background-image:url(industry.png); float:left}ul {height:120px; width:250px; float:right; font-size:18px; padding:10px}li{height:26px}li a{font-size:14px}

注意事项:

  • 设置 div 水平横向排列的方法除了为所有div 添加浮动外,还可以通过设置 div 的属性 display:inline-block; 来实现,display:block 属性亦可以撑起整个块级 div ;
  • ul 的无需裂变部分的圆圈可以通过设置 ul 的font-size 实现,同理还可以通过 font-color 改变圆圈的颜色;

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台