`
wangkebin
  • 浏览: 74870 次
  • 性别: Icon_minigender_1
  • 来自: 贵阳
社区版块
存档分类
最新评论

div+css布局ul+li替代table

阅读更多

    分享一个div+css布局ul+li替代table表格小例子,为和我一样不懂css的朋友有一个参考,也给自己留一个笔记:


.list{margin:2px auto; width:98%;}
.list li.columnhead{font-size: 14px;font-weight:bold;}
.list li,.list li.columnhead{
	width:24%;line-height: 30px;height: 30px;text-align:center;float: 
	left;margin:0 0 1px 1px;list-style:none;
}

 

 

	<ul class="list">
				<li class="columnhead">用户名</li>
				<li class="columnhead">性别</li>
				<li class="columnhead">年龄</li>
				<li class="columnhead">出生年份</li>
                <li>wilr</li>
                <li>男</li>
                <li>21</li>
                <li>1990年</li>
	</ul>
2
0
分享到:
评论

相关推荐

    DIV+CSS布局

    7. **更高的灵活性**:相比`&lt;table&gt;`布局,DIV+CSS布局提供了更多的排列组合方式,如`&lt;ul&gt;&lt;li&gt;`、`&lt;ol&gt;&lt;li&gt;`等。 #### 四、XHTML与HTML的区别 - **XHTML**(EXtensible HyperText Markup Language):即可扩展超文本...

    Div+CSS布局的十六条技巧及详细用法-DivCSS教程.pdf

    13. **合理使用table**:虽然现代布局倾向于使用Div+CSS,但在展示数据表格时,表格仍然有其优势,不应完全避免使用。 14. **单像素边框表格**:通过设置`border-collapse:collapse;`和`border:solid 1px;`,可以在...

    DIV+CSS入门教程

    例如,虽然DIV是常用的布局标签,但页面中还可以包含span、p、a、ul、li等多种标签,每种标签都有其特定的功能,应根据内容需求恰当选用。 #### 知识点四:Table布局的局限性 使用Table进行网页布局曾是一种普遍...

    DIV+CSS网页设计

    DIV标签是XHTML中众多块级元素的一种,它不是唯一的布局工具,而XHTML还包括其他许多有用的标签,比如SPAN、P、A、UL、LI等,这些标签在不同的布局场景下有不同的用途。 文章指出,标准页面应该符合WEB标准,这是一...

    div+css布局中常用方法汇总.docx

    【div+css布局中常用方法】在网页设计中,Div+CSS布局是现代网页开发的基础,它通过HTML的div元素和CSS样式来控制页面布局,提供了更灵活、可维护性更强的设计方式。以下是一些在div+css布局中常用的技术和方法: 1...

    DIV+CSS布局技巧整理集合

    div, form, img, ul, ol, li, dl, dt, dd { margin: 0; padding: 0; border: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; } table, td, tr, th { font-size: 12px; } /* 链接颜色 */ a:link { ...

    DIV+CSS布局也需要注意的SEO原则

    DIV+CSS布局相对于传统的Table布局,减少了页面代码,提升了加载速度。这样的页面在蜘蛛爬行时不仅更加高效,而且对于用户体验也是极大的提升,用户往往更倾向于访问响应速度快的网站。而用户体验的提升也能间接促进...

    DIV CSS布局教程:应用ul、li实现表格形式

    标题中的“DIV CSS布局教程:应用ul、li实现表格形式”指的是使用HTML的无序列表(`&lt;ul&gt;`)和列表项(`&lt;li&gt;`)元素,通过CSS样式来模拟传统HTML表格(`&lt;table&gt;`)的效果。这种方法常用于创建灵活、响应式的布局,...

    DIV+CSS网页布局基础-常用HTML标签介绍.rar

    4. **列表标签**:`&lt;ul&gt;`和`&lt;ol&gt;`分别用于无序和有序列表,`&lt;li&gt;`则是列表项。`&lt;dl&gt;`,`&lt;dt&gt;`和`&lt;dd&gt;`用于定义列表,`&lt;dt&gt;`定义术语,`&lt;dd&gt;`定义描述。 5. **表格标签**:`&lt;table&gt;`,`&lt;tr&gt;`,`&lt;th&gt;`,`&lt;td&gt;`用于...

    div+css技巧

    #### 一、div+css主流开发与前台页面布局设计 div+css是目前网页设计中最常用的布局方式之一,它能够帮助前端开发者构建出响应式、可维护性强且易于修改的网站界面。div作为HTML中的一个容器元素,常用于组合文档中...

    用DIV+CSS 做网站设计布局参考.pdf

    网页设计布局是构建网站视觉效果的关键步骤,而“用DIV+CSS做网站设计布局”已经成为现代网页设计的标准实践。DIV(Division)作为一个HTML元素,主要用于组织网页内容,而CSS(Cascading Style Sheets)则负责控制...

    布局用CSS+DIV的优点总结

    第二,网站源代码简洁,除了几个div,ul,li,dl,dd,dt之类的标签外,几乎不用其他标签,这样,是网站内容完全裸露在搜索引擎的蜘蛛面前。第三,可轻松做到关键内容先被蜘蛛读取。第四,方便调整网站结构布局。 使用...

    新手学习DIV+CSS难点之经验总结

    创建一个简单的水平导航条,可以使用`&lt;ul&gt;`和`&lt;li&gt;`标签,并通过CSS来布局。 **CSS示例代码:** ```css ul { list-style: none; /* 移除默认样式 */ margin: 0; padding: 0; } li { display: inline-block; /...

    韩顺平html,div+css视频听讲笔记

    在早期的网页设计中,`&lt;table&gt;` 标签常被用来进行网页布局,尽管现在更倾向于使用 CSS 布局技术。创建表格时,首先需确定所需的行和列数,然后使用 `&lt;tr&gt;` (行) 和 `&lt;td&gt;` (单元格) 标签构建表格结构。例如: ```...

    纯DIV+CSS网页示例

    而div 你可以 div ul li 也可以 ol li 还可以 ul li ……但标准语法最好有序的写。 12.另外如果你不是javascrput的高手,你可以不必去写ID,只用class就可以。当客户端程序员写完程序,需要调整时候,你可以在利用...

    随手记的div+css的小抄代码

    ### 随手记的div+css的小抄代码解析 #### 一、基本样式设置 在随手记的div+css小抄代码中,首先对页面的基本样式进行了设置,包括清除默认边距、列表样式以及图片边框等。这部分内容非常重要,能够确保网页布局的...

Global site tag (gtag.js) - Google Analytics