首先看效果：
代码：
<!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">
<head>
<meta http-equiv="Content-Type" c />
<title>CSS 分栏样式：使用CSS，UL，LI实现新闻标题分栏显示</title>
<style type="text/css">
<!--
.relationNews{width:660px;font-size:16px; font-weight:bold; margin: 0 auto;}
.relationNewsList{
font-size:13px;
border-top: 1px solid #000000;
margin: 0 auto;
padding: 3px 5px 0px 5px;
width:660px;
height: 200px;
}
.relationNewsListul {
margin: 0 auto;
padding: 0;
}
.relationNewsList li {
border-bottom: #DDDDDD 1px solid;
float: left;
padding: 5px 0px 0px 10px;
width: 320px;
background: url(li.gif) no-repeat 0px 10px;
height: 22px;
overflow: hidden;
}
-->
</style>
</head>
<body>
<div class="relationNews">相关新闻：</div>
<div class="relationNewsList">
<ul>
<li><a target="_blank" href="http://news.sctv.com/gnxw/rdxw/201207/t20120727_1212988.shtml">天津暴雨内涝 市民骑摩托艇上街</a></li>
<li><a target="_blank" href="http://leaders.people.com.cn/n/2012/0727/c58278-18609666.html">河北保定暴雨因灾死亡26人 失踪20人</a></li>
<li><a target="_blank" href="http://inews.nmgnews.com.cn/system/2012/07/27/010808976.shtml">呼和浩特暴雨已致5人死亡 各界齐力抗灾</a></li>
<li><a target="_blank" href="http://news.163.com/12/0726/14/87BK6LG70001124J.html">深圳因台风倒树11万棵 远超香港千余棵</a></li>
<li><a target="_blank" href="http://news.sina.com.cn/c/2012-07-26/143924850041.shtml">河北野三坡景区交通电力通信恢复 13人因灾死亡</a></li>
<li><a target="_blank" href="http://kuaixun.stcn.com/content/2012-07/26/content_6390597.htm">北京房山全面消毒 目前未发现疫情</a></li>
<li><a target="_blank" href="http://news.022china.com/2012/07-26/722274_0.html">北京安监启动灾后检查 大型演唱会遇暴雨或停止</a></li>
<li><a target="_blank" href="http://society.people.com.cn/n/2012/0726/c86800-18604071.html">受持续强降雨影响的京包铁路恢复通车</a></li>
</ul>
</div>
</body>
小结：
留意突出颜色部分CSS代码，分栏的栏目由外面的div和li的宽度共同决定。div宽度是li宽度整除N倍时，就被分为N栏。比如：上面relationNewsList width:660px; 而li的宽度为width: 320px;那么宽度倍数就是2倍多，所以分为两栏。如果将relationNewsList宽度设为900px,li的宽度设为288px,则会被分为三栏。
以下为相关显示效果：
分享到：
相关推荐
标题“Css 分栏的导航条”指的是利用CSS技术来创建一个多列布局的导航菜单。这种导航条常见于网站顶部，用于引导用户浏览不同的页面或功能。 一个基本的分栏导航条通常由多个水平排列的链接组成，每个链接代表一个...
本篇内容主要介绍如何使用jQuery与CSS来实现这样的效果。 首先，为了构建一个基础的滑动标签分栏切换，我们需要理解HTML结构的搭建。HTML部分通常由两部分组成：标签列表和内容区域。标签列表是一系列的`<li>`元素...
10. `responsive design`：使用媒体查询实现响应式设计，确保在不同设备上正常显示。 在实现京东商品分类导航的布局时，可以考虑以下几点： 1. 商品分类的层次结构：如果存在多级分类，可以使用下拉菜单或者折叠式...
例如，`<div>`元素可以用来创建不同的区域，`<textarea>`用于输入文字，`<button>`定义发送按钮，而`<ul>`和`<li>`则用于显示聊天消息列表。 **CSS（Cascading Style Sheets）**： CSS用于控制网页的样式和布局。在...
- 构建新闻网站、博客等需要明确分栏显示内容的页面。 - 作为基础模板，进一步开发复杂的页面结构。 - **技术细节**： - 使用浮动和定位技术实现多栏布局。 - 支持自适应布局，根据不同屏幕尺寸自动调整列宽。 ...
本文将深入探讨mbTabset插件的原理、使用方法以及其实现分栏切换的核心技术。 首先，mbTabset插件的设计理念在于提供一个简洁、灵活的解决方案，让开发者能够快速构建具有分栏切换效果的网页。它通过jQuery事件监听...
- 导航栏通常由多个链接组成，可以使用`<ul>`和`<li>`标签创建无序列表，并对`#nav`和`#nav li`应用样式，如浮动、列表样式、字体大小等。对于链接`<a>`，可以定义颜色、文本装饰、内边距、宽度、高度、对齐方式和...
这需要利用HTML的嵌套列表（<ul>和<li>）或JavaScript动态添加和隐藏元素来实现。同时，良好的数据结构和前端设计模式（如模块化）能保证代码的可维护性和可扩展性。 6. **用户体验（UX）设计**: 仿京东分类页面需...
在这个菜单页面中，我们使用了无序列表`<ul>`和列表项`<li>`来创建菜单。通过JavaScript的`onclick`事件，我们可以改变右侧`contentFrame`的页面内容。这里的`parent.contentFrame.location`就是引用了主页面中的`...
1. **创建布局**：尝试使用CSS创建各种布局，如居中对齐、左右分栏、上下堆叠等。 2. **美化网页**：使用颜色、字体、背景图片等元素，提升网页的视觉吸引力。 3. **交互性**：虽然静态网页没有动态交互，但你可以...
7. **容器与布局**：使用标签创建内容区域，通过CSS控制其样式和布局，实现网页的分栏或网格设计。 8. **表格**：、、（表头）和（单元格）用于创建数据表格，展示餐厅菜单或价格列表。 9. **样式化**：HTML中的...
3. 表格和列表：`<table>`和`<ul>`、`<li>`常用于展示网址目录，使信息更加清晰有序。 4. 响应式设计：通过`<meta>`标签的viewport属性，结合媒体查询（@media），实现不同设备上的适配，提升移动设备的浏览体验。 ...
4. 浮动布局：利用`float`属性实现多列布局，如左右分栏显示个人信息和照片。 5. 定位：使用`position`属性，如`relative`、`absolute`和`fixed`，进行精确的元素定位。 6. 响应式设计：借助媒体查询（`@media`）...
8. 框架与分栏：`<frameset>`和`<frame>`元素可以创建网页框架，而`<div>`配合CSS的`display`属性可以实现多列布局。 9. 响应式设计：HTML5引入了`<meta name="viewport">`来适应不同设备的屏幕大小，结合CSS媒体...
HTML提供`<frameset>`和`<frame>`元素创建框架结构，但现代网页设计更倾向于使用CSS布局，如Flexbox和Grid，实现更灵活的分栏布局。 以上是HTML的一些基础概念和常用元素，学习和理解HTML是创建网页和网页开发的...
8. **框架和分帧**：`<frameset>`和`<frame>`标签用于创建多窗口或分栏布局，但现代网页设计更倾向于使用CSS布局。 9. **HTML5新增元素**：HTML5引入了许多新元素，如`<header>`、`<footer>`、`<article>`和`...