CSS工作经验:ul目录有误应用的发展趋势

日期:2021-03-15 类型:科技新闻 

关键词:小程序制作流程,抽奖小程序,微信小程序怎么开店,小程序码生成,小程序模版


不知道道是规范害了大伙儿還是大伙儿害了规范,继class和div被乱用后,ul目录也是有被有误应用的发展趋势。
今日沟通交流会上,共享前端开发的开发设计工作经验,有1条尽管很快带过,可是我倒是印象蛮刻骨铭心的,就写点小结来共享1下吧。
不知道道是规范害了大伙儿還是大伙儿害了规范,继class和div被乱用后,ul目录也是有被有误应用的发展趋势。好像针对1个能被排成编码序列的物品,大家常常会习惯性性地给它们用1个ul框起来,这样会显得很有词义。当1个网页页面里有太多的元素被这样解决时,考虑到1下假如要适配到挪动终端设备的浏览或CSS载入不一切正常的情况下,那末客户的体验是是非非常不佳的,试想1下挪动终端设备上面最好是是能把尽量多的內容展现在极为比较有限的显示屏里,而ul在沒有款式装饰的状况下,是会向下拓宽的,针对较长的网页页面,客户在挪动终端设备上向下翻转网页页面时,是会丧失细心的,针对网页页面也是1样,最少就我自己来讲,我在阅读文章百度搜索了解的1些材料时,会禁掉CSS款式,有时候也会碰到1些体验不佳的网页页面。
实际上我感觉inline的元素能够适度地选用,非常是像做1个横向的目录时,大家是否能够考虑到1下用内联来展现视觉效果呢?仿佛这样说有点晕,那就用1些“不光滑”的案例来讲明1下难题吧。要完成1个这样的导航栏,大伙儿都会想起用ul。

OK,那大家就先用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[ */
*{
list-style:none;
margin:0;
padding:0;
font-size:12px;
}
#navigation{
margin:10px auto;
width:510px;
overflow:hidden;
}
#navigation li{
float:left;
text-align:center;
width:50px;
border-left:1px solid #CCC;
margin-left:⑴px;
}
#navigation li a,
#navigation li a:hover{
color:#999;
}
/* ]]> */
</style>
<ul id="navigation">
<li><a href="">菜单1</a></li>
<li><a href="">菜单2</a></li>
<li><a href="">菜单3</a></li>
<li><a href="">菜单4</a></li>
<li><a href="">菜单5</a></li>
<li><a href="">菜单6</a></li>
<li><a href="">菜单7</a></li>
<li><a href="">菜单8</a></li>
<li><a href="">菜单9</a></li>
<li><a href="">菜单10</a></li>
</ul>
</body>
</html>

嗯,很棒,很好看的编码,在DOM查询器里发现简直太完善了:

再来假定1下款式没载入的情况下,或是用挪动终端设备来浏览会如何:

看上去是竖直1列来展现,假如1个网页页面里再多几个相近的ul,而它们本应在视觉效果上是要作横向排序的,而大家却“亢奋”地应用了ul来构架它们,那末有1天假如你心力来潮想用你的手机上来浏览自身写的网页页面,那真的是1件蛮痛楚的事儿,你毫无疑问会埋怨要看1个物品竟然要翻转那末久。。。
上1页12 下1页 阅读文章全文
上一篇:CSS实例教程:完善的肯定底部 返回下一篇:没有了