效果图:
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 改变圆圈的颜色;
- 去掉列表前面的小圆点:设置ul属性“list-style-type:none;”;
- 列表横向排列:设置li属性“float:left”;
- 设置列表高度:设置ul属性“line-height”;