仓酷云

标题: 来一发CSS履历:ul列表不准确利用的趋向 [打印本页]

作者: 金色的骷髅 时间: 2015-1-15 23:59
标题: 来一发CSS履历:ul列表不准确利用的趋向
一个样式规则由一个选择器后跟一个声明块组成，声明块是一个大容器,由大括号中间的部分组成,声明块中间的空间会被忽略。
破洛洛文章简介：不晓得是尺度害了人人仍是人人害了尺度，继class和div被滥用后，ul列表也有被不准确利用的趋向。
明天交换会上，分享前真个开辟履历，有一条固然很快带过，可是我却是印象蛮深入的，就写点小结来分享一下吧。
不晓得是尺度害了人人仍是人人害了尺度，继class和div被滥用后，ul列表也有被不准确利用的趋向。仿佛关于一个能被排成序列的器材，我们常常会习气性地给它们用一个ul框起来，如许会显得很有语义。当一个页面里有太多的元素被如许处置时，思索一下假如要兼容到挪动终真个会见大概CSS加载不一般的时分，那末用户的体验长短常欠安的，试想一下挪动终端下面最好是能把尽量多的内容出现在极为无限的屏幕里，而ul在没有款式润色的情形下，是会向下延长的，关于超长的页面，用户在挪动终端上向下转动页面时，是会得到耐烦的，关于网页也是一样，最少就我自己来讲，我在浏览百度晓得的一些材料时，会禁失落CSS款式，偶然也会碰着一些体验欠安的页面。
实在我以为inline的元素能够得当地接纳，出格是像做一个横向的列表时，我们是否是能够思索一下用内联来出现视觉呢？仿佛如许说有点晕，那就用一些“粗拙”的实例来讲明一下成绩吧。要完成一个如许的导航，人人城市想到用ul。

OK，那我们就先用ul列表来完成它（款式方面不作太多穷究，只为完成效果，以是写得很随便）
源代码

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"lang="zh-cn">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<metahttp-equiv="Content-Language"content="gb2312"/>
<title></title>
</head>
<body>
<styletype="text/css">
/*<![CDATA[*/
*{
list-style:none;
margin:0;
padding:0;
font-size:12px;
}
#navigation{
margin:10pxauto;
width:510px;
overflow:hidden;
}
#navigationli{
float:left;
text-align:center;
width:50px;
border-left:1pxsolid#CCC;
margin-left:-1px;
}
#navigationlia,
#navigationlia:hover{
color:#999;
}
/*]]>*/
</style>
<ulid="navigation">
<li><ahref="">菜单1</a></li>
<li><ahref="">菜单2</a></li>
<li><ahref="">菜单3</a></li>
<li><ahref="">菜单4</a></li>
<li><ahref="">菜单5</a></li>
<li><ahref="">菜单6</a></li>
<li><ahref="">菜单7</a></li>
<li><ahref="">菜单8</a></li>
<li><ahref="">菜单9</a></li>
<li><ahref="">菜单10</a></li>
</ul>
</body>
</html>

嗯，很棒，很大度的代码，在DOM检察器里发明真是太完善了：

再来假定一下款式没加载的时分，大概是用挪动终端来会见会如何：

看上往是垂直一列来出现，假如一个页面里再多几个相似的ul，而它们本应在视觉上是要作横向分列的，而我们却“亢奋”地利用了ul来架构它们，那末有一天假如你血汗来潮想用你的手机来会见本人写的页面，那真的是一件蛮疾苦的事变，你一定会埋怨要看一个器材竟然要转动那末久。。。

破洛洛文章简介：不晓得是尺度害了人人仍是人人害了尺度，继class和div被滥用后，ul列表也有被不准确利用的趋向。

那末，一样的效果，我本人有甚么新的思索呢？请看代码：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"lang="zh-cn">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<metahttp-equiv="Content-Language"content="gb2312"/>
<title></title>
</head>
<body>
<styletype="text/css">
/*<![CDATA[*/
*{
margin:0;
padding:0;
font-size:12px;
}
#navigation{
display:block;
width:510px;
margin:10pxauto;
overflow:hidden;
}
#navigationa{
display:block;
float:left;;
width:50px;
text-align:center;
color:#999;
border-left:1pxsolid#CCC;
margin-left:-1px;
}
/*]]>*/
</style>
<spanid="navigation">
<ahref="">菜单1</a>
<ahref="">菜单2</a>
<ahref="">菜单3</a>
<ahref="">菜单4</a>
<ahref="">菜单5</a>
<ahref="">菜单6</a>
<ahref="">菜单7</a>
<ahref="">菜单8</a>
<ahref="">菜单9</a>
<ahref="">菜单10</a>
</span>
</body>
</html>

呵呵，这下看到了一个span，一串的a，li消散了，并且span是内联的元素，外部装a标签也是切合(x)html的嵌套标准的。DOM布局仍然明晰：

没有款式的情形下，也很友爱（上面第一个图），并且内联元素是自顺应宽度的，宽度不敷就折行（上面第二个图），这就是我后面提到的，要尽量多地往无限的屏幕里添补内容，假如用li，那末一个一个就华侈了年夜片空间咯。

写到这里，我以为也把我的大略的，不成熟的设法表达得差未几了，每次的开辟，都要不休地思索，不休地聆听他人的设法，我也只是把同事的一个设法酿成了详细的完成，做前端开辟的，不但必要手艺，也必要创意，还必要不休的思索。

当遇到几个选择器共享一个声明的时候，可以分组放在一起，每个选择器必须以逗号隔开。例：h1,h2,h3,h4{colorred;}选择器分组时要将每个选择器路径写全，分组结尾不能有逗号。

作者: 兰色精灵 时间: 2015-1-17 23:52
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

作者: 分手快乐 时间: 2015-1-26 22:32
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

作者: 冷月葬花魂 时间: 2015-2-5 02:51
所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

作者: 灵魂腐蚀 时间: 2015-2-11 03:42
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

作者: 再见西城 时间: 2015-3-1 21:02
滚动条)层属性--溢出(visible/hidden/scroll/auto)

作者: 不帅 时间: 2015-3-11 00:17
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

作者: 因胸联盟 时间: 2015-3-17 17:09
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

作者: 精灵巫婆 时间: 2015-3-24 18:02
俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

欢迎光临仓酷云 (http://ckuyun.com/)