CSS经验:ul列表不正确使用的趋势
互联网 发布时间：2009-04-02 19:35:06 作者：佚名 
我要评论
我要评论网页制作Webjx文章简介：不知道是标准害了大家还是大家害了标准，继class和div被滥用后，ul列表也有被不正确使用的趋势。
今天交流会上，分享前端的开发经验，有一条虽然很快带过，但是我倒是印象蛮深刻的，就写点小结来分享一
不知道是标准害了大家还是大家害了标准，继class和div被滥用后，ul列表也有被不正确使用的趋势。
那么，同样的效果，我自己有什么新的考虑呢？请看代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<title></title>
</head>
<body>
<style type ="text/css">
/* <![CDATA[ */
*{
margin:0;
padding:0;
font-size:12px;
}
#navigation{
display:block;
width:510px;
margin:10px auto;
overflow:hidden;
}
#navigation a{
display:block;
float:left;;
width:50px;
text-align:center;
color:#999;
border-left:1px solid #CCC;
margin-left:-1px;
}
/* ]]> */
</style>
<span id="navigation">
<a href="">菜单1</a>
<a href="">菜单2</a>
<a href="">菜单3</a>
<a href="">菜单4</a>
<a href="">菜单5</a>
<a href="">菜单6</a>
<a href="">菜单7</a>
<a href="">菜单8</a>
<a href="">菜单9</a>
<a href="">菜单10</a>
</span>
</body>
</html>
呵呵，这下看到了一个span，一串的a，li消失了，而且span是内联的元素，内部装a标签也是符合(x)html的嵌套规范的。DOM结构依然清晰：
没有样式的情况下，也很友好（下面第一个图），而且内联元素是自适应宽度的，宽度不够就折行（下面第二个图），这就是我前面提到的，要尽可能多地往有限的屏幕里填充内容，如果用li，那么一个一个就浪费了大片空间咯。
写到这里，我觉得也把我的粗略的，不成熟的想法表达得差不多了，每一次的开发，都要不断地思考，不断地倾听别人的想法，我也只是把同事的一个想法变成了具体的实现，做前端开发的，不仅需要技术，也需要创意，还需要不断的思考。
相关文章
- 这篇文章主要介绍了CSS实现ul和li横向排列的两种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学2020-02-21
- 怎么实现ul的横向排列和去掉li那个烦人的点，现在找到方法了，在此与大家分享下，感兴趣的朋友可以参考下，以备不时之需2013-10-23
- ul li的背景小图标属性设置一般会有两种情况：定义在ul里及li里，这两种定义在什么情况下使用，在下文给出详细的介绍，经常div+css布局的朋友不妨参考下，希望对大家有所帮2013-09-27
- 创建CSS样式文本导航条的最简单解决方法也许就是把所有的链接都放在一行文本里，这种方法看起来很合理也很直观，接下来为大家介绍下具体的创建过程，感兴趣的朋友可以参考2013-09-21
- DIV+CSS里，我们用得最多的就是ul li来显示数据，如新闻按钮等,下面给大家一个css ul li的例子供学习2023-05-21
- 三行的纯CSS网站导航栏菜单，改改风格，让大家感到新鲜一点，其它主要还是使用了Li列表，整体布局简洁，美观大方，适合大部分网站使用，颜色和菜单空隙可随意调节，希望大2009-11-08
这篇文章主要介绍了CSS在UL LI的样式用法，主要是UI上的应用，我们通过代码分离的方式通过css完全控制css的样式2023-05-21
最新评论