ul li 实例

article/2025/9/18 13:54:25

之前使用过很多次的 ul li，不过都怎么规范，今天学习到一个整合“p、span、a”等标签的ul li实例，防止忘记，记录一下。

html代码

 <span style="white-space:pre">	</span><li><h2>发明专利</h2><span>Patent for invention</span>

<span style="white-space:pre">		</span><img src="../images/zhuanli_01.jpg" width="74" height="74"><p>

<span style="white-space:pre">		</span>    对产品、方法或者其改进<br>所提出的新的技术方案<br>内容限定：产品、方法（如软件工艺等）<br>保护时间：20年

<span style="white-space:pre">		</span></p><a href="#">了解详情</a></li><li>

最外边的div和ul 就不写了

三个li写到一起如下图：

每个li中的距离用

 margin:0 11px;

来隔开

css代码

<span style="font-size:18px;">.content_zhuanli ul li{ margin:0 11px; float:left; position:relative; border:1px #C9C9C9 solid; width:352px; height:420px;}
.content_zhuanli ul li h2{font-size: 28px;text-align: center; margin: 38px 0 12px 0;color: #666;}
.content_zhuanli ul li span{font-size: 18px;text-align:center;color: #666; display:block;}
.content_zhuanli ul li img{ width:74px; height:74px; margin:24px auto 22px; display:block;}
.content_zhuanli ul li p{display: block;text-align: center;line-height: 26px;}
.content_zhuanli ul li a{ width:174px;display:block;line-height:40px; text-align:center;border-radius:5px; border:1px #00A0E9 solid; color:#00A0E9;font-size:14px;  position:absolute;z-index:99; top:350px; left:25%;}
.content_zhuanli ul li a:hover{background:#00a0e9; color:#fff;}</span>

自己感觉代码还是不怎么规范，在谷歌，360急速浏览器，ie浏览器，火狐浏览器上测试都是没问题的

下图一共是三个li ，每个li相距22个像素，“margin:0 11px;”表示，左右相距11个像素，所以下图的“实用新型专利”的li和另外的两个li距离就是22个像素，两边的li距离中间一个li距离是22像素，最左边一个li距离左边是11像素，最右边距离右边一个11像素。 margin的使用方法可参照：margin的使用方法

float:left是左浮动，默认的ul li样式是竖着排列的，加上float:left可使案例横着排列，并且是靠左的，同理，float:right 靠右边。具体可参照：float的使用

position:relative 和position:absolute;z-index:1; 搭配使用可产生绝妙效果具体可参照：position的使用

<span style="font-size:18px;">font-size: 28px;</span>

文字大小为28个像素

<span style="font-size:18px;">text-align: center;</span>

文字居中

<span style="font-size:18px;">display:block;</span>

使行内元素转变成块状元素，此处事加在a标签里使用，在加上个宽度和宽度或行高，就可以使整个宽高范围内都可以点击，如果不加 display:block，能点击的就单单是文字本身了。再者，加上display:block，再使用 text-align:center,就可以使文字居中了具体可参照： display:block的使用