博纳网络在前面的网站制作技巧文章中，对如何网站制作前端的网页链接、鼠标指针等方法做过操作案例介绍，今天深圳网站制作公司就网站设计师怎样在制作过程中设计列表样式逐步进行讲解。一个好的网站设计离不开前期专业规划，这其中尤其以网站整体布局为重。现在博纳网络网页前端设计师就列表样式做了如下区分与操作案例：
网站设计制作时如何在在网页中设计列表样式
列表在生活中随处可见，在网页中也是如此。大多数网页都包含形式多样的列表，如新闻列表、导航列表或分类列表等。页面制作人员为了能使网页的HTML结构更加符合语义，会选用不同的标签将列表信息表现在网页中。HTML提供了项目列表的基本功能，包括顺序列表的<ol>标签和无顺序列表的<ul>标签等。当引入CSS后，项目列表被赋予了很多新的表现形式。本章主要围绕项目列表的基本CSS属性进行介绍，同时结合网页设计中经常应用的列表结构栏目，配合CSS进行多样化样式设计。
【网站制作列表样式注意重点】
◆ 设计列表信息
◆ 用CSS设置项目列表符号
◆ CSS控制项目列表横竖的方法
◆ 综合运用项目列表进行网页中的菜单设计
◆ 设计图文混排的列表栏目
◆ 设计列表结构的导航栏目
（1.）设计列表信息在现实生活中每个人都会接触到各式各样的列表信息，去超市购物前会罗列一张购物清单，购物完毕结账时需要排队等候，结账完毕会收到结账清单。诸如此类的情况出现，我们都可以将其视为列表。购物清单是列表，排队等候的人群是列表，结账清单还是列表，如此之多的列表出现在大家的身边，你是否注意到了呢。网络生活近似于现实生活，在现实生活中随处可见的列表，在网页中也是可以看到的。例如，当我们在网络中购物时，会选择很多东西放入购物车中，那么在购物车中看到的物品列表；网购完毕付账后看到的购物清单列表等。网页中的列表并非都是显而易见的，例如，网站的导航其实也是列表，用户在某个站点中排名也是列表。这么多的列表是不是让你感觉有点晕眩了？不用担心，在分析各个列表在网站如何运用之前，先了解一下HTML中的3种列表模式：无序列表（ul）、有序列表（ol）和自定义列表（dl）。
（2）无序列表无序列表就是没有次序的列表，列表项目不分先后。以生活中去超市购物为例，不会考虑先买什么再买什么，而是看到所需物品就直接放到购物车中。<ul>标签表示无序列表的集合，并且<ul>标签中一定是紧跟<li>标签才是正确的写法。
<ul>
<li>无序列表中的其中一条内容</li>
<li>无序列表中的其中一条内容</li>
</ul>
HTML对标签有着相对严格的要求，每个标签都必须关闭，而且每个标签之间的嵌套要正确，尤其是列表的结构。下面罗列几种在HTML中无序列表的错误嵌套方法。
<ul>
<li>无序列表中的其中一条内容</li>
<li>无序列表中的其中一条内容</li>
</ul>
HTML对标签有着相对严格的要求，每个标签都必须关闭，而且每个标签之间的嵌套要正确，尤其是列表的结构。下面罗列几种在HTML中无序列表的错误嵌套方法。
◆错误一：<ul>标签和<li>标签之间插入了其他的标签。
<ul>
<li>无序列表中的其中一条内容</li>
<li>无序列表中的其中一条内容</li>
<div>错误的无序列表嵌套结构</div>
</ul>
<ul>
<li>无序列表中的其中一条内容</li>
<li>无序列表中的其中一条内容</li>
<div>错误的无序列表嵌套结构</div>
</ul>
◆错误二：多层<ul>标签嵌套时的错误。
错误三：<li>标签未关闭。
以上几种错误的写法纠正后，应该以如下形式书写。
以上几种错误的写法纠正后，应该以如下形式书写。◆错误一的纠正，将<div>标签放到<ul>标签的外面，或者删除。
<ul>
<li>无序列表中的其中一条内容</li>
<li>无序列表中的其中一条内容</li>
</ul>
<div>将该标签内容移出<ul>标签的嵌套，或者删除</div>
<ul>
<li>无序列表中的其中一条内容</li>
<li>无序列表中的其中一条内容</li>
</ul>
<div>将该标签内容移出<ul>标签的嵌套，或者删除</div>
◆错误二的纠正，多层ul无序列表标签嵌套时，应该将<ul>标签放在<li>标签之间。
◆错误三的纠正，关闭<li>标签即可。
无序列表可以分为一级无序列表和多级无序列表，一级无序列表在浏览器中解析后，会在列表<li>标签前面添加一个小黑点的修饰符，而多级无序列表则会根据级数而改变列表前面的修饰符。一级无序列表，在无任何样式修饰的浏览器默认解析时显示效果。如下图4-1所示
<ul>
<li>一级无序列表的浏览器默认解析后的页面效果</li>
<li>一级无序列表的浏览器默认解析后的页面效果</li>
</ul>
多级无序列表，在无任何样式修饰的浏览器默认解析时显示效果，
如图4-2所示。
多级无序列表的默认解析效果通过效果图可以发现无序列表在随着其所包含的列表级数的增加而逐渐缩进，并且随着列表级数的增加而改变不同的修饰符。浏览器在解析无序列表时，会不断地对不同级别的无序列表进行缩进显示，但修饰符却只有3种。如果3层嵌套都无法满足网页中所需要使用的无序列表时，读者就应该反思这个页面中的列表嵌套是否过多了。合理地使用HTML标签才能让页面的结构更加清晰，相对地更符合语义。不过不用担心，如果网页中实在需要更多层嵌套，并且是不同的修饰符时，还是可以利用CSS样式来修改其修饰符的。好了，关于网站制作前端设计布局对于错误列表样式的介绍今天就到这里，明天我们会继续就网站制作时对于列表样式的几种正确处理方式做介绍。深圳博纳网络专业网站设计编辑整理。
无序列表可以分为一级无序列表和多级无序列表，一级无序列表在浏览器中解析后，会在列表<li>标签前面添加一个小黑点的修饰符，而多级无序列表则会根据级数而改变列表前面的修饰符。一级无序列表，在无任何样式修饰的浏览器默认解析时显示效果。如下图4-1所示<ul>
<li>一级无序列表的浏览器默认解析后的页面效果</li>
<li>一级无序列表的浏览器默认解析后的页面效果</li>
</ul>
多级无序列表，在无任何样式修饰的浏览器默认解析时显示效果，
如图4-2所示。多级无序列表的默认解析效果通过效果图可以发现无序列表在随着其所包含的列表级数的增加而逐渐缩进，并且随着列表级数的增加而改变不同的修饰符。浏览器在解析无序列表时，会不断地对不同级别的无序列表进行缩进显示，但修饰符却只有3种。如果3层嵌套都无法满足网页中所需要使用的无序列表时，读者就应该反思这个页面中的列表嵌套是否过多了。合理地使用HTML标签才能让页面的结构更加清晰，相对地更符合语义。不过不用担心，如果网页中实在需要更多层嵌套，并且是不同的修饰符时，还是可以利用CSS样式来修改其修饰符的。好了，关于网站制作前端设计布局对于错误列表样式的介绍今天就到这里，明天我们会继续就网站制作时对于列表样式的几种正确处理方式做介绍。深圳博纳网络专业网站设计编辑整理。当前文章链接：/construction/jzhyzx/1358.html
如果您觉得案例还不错请帮忙分享：
[声明]本网转载网络媒体稿件是为了传播更多的信息，此类稿件不代表本网观点，本网不承担此类稿件侵权行为的连带责任。故此，如果您发现本网站的内容侵犯了您的版权，请您的相关内容发至此邮箱【qin@198bona.com 】，我们在确认后，会立即删除，保证您的版权。
