html ul做成表格,HTML+CSS入门 ul打造表格样式解析

表格大家并不陌生，细线表格更是受到广泛应用。

做细线表格的方法有很多，比如：

1. 最简单的细线表格做法，直接利用table属性

test

2. 利用table背景颜色和间距属性构造表格，需要注意的是，td必须也使用背景颜色才能显示出线条

test

当然以上方法都很好用，但我们今天说的不是这些，而是使用另外的方法——

在开始之前，先来说说具体思路，如图：

其中每个li只负责右边、下边的线，配以float:left;来完成横向排列，

最外边的div则只定义上边、左边的线，用以显示表格完整线条。

这种做法的好处是更加灵活，你可以由ul中事先定义好的任意两个class来控制线的颜色，

整体语意也更加清晰，可见CSS有多么的灵活 :p

在做程序实现的时候，如同循环

一样，我们可以直接循环

要知道，一个清晰的结构，对程序员开发程序的效率有多么大的帮助啊。

tableFrame_simple

body{

width:auto;

height:auto;

padding:0;

margin:20px 0;

font-size:12px;

font-family:Verdana, Arial, Helvetica, sans-serif;

}

ul{

clear:both;

padding:0;

margin:0;

list-style:none;

}

#tableFrame{

width:875px; /*需要修改*/

height:auto;

border-top:#000 1px solid;

border-left:#000 1px solid;

padding:0;

margin:0 auto;

font-size:12px;

}

#tableFrame:after {

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

li{

float:left;

display: block;

width:120px; /*需要修改*/

height:auto;

padding:2px;

margin:0;

border-right:#000 1px solid;

border-bottom:#000 1px solid;

line-height:16px;

color:000;

}

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML/CSS频道！

html ul做成表格,HTML+CSS入门 ul打造表格样式解析相关推荐

CSS入门五：文本样式；字体颜色：英文字母，十六进制，RGB；文本颜色，字间距，行间距，对齐方式；下划线、上划线…，文本阴影，字母大小写，首行缩进
CSS入门部分已经了解了:CSS简介.样式表分类,内部样式表简单使用:选择器和类选择器简单使用:背景色.背景图:以及外部样式表的简单使用: 本篇博客主要介绍,如何对文本设置,包括字体颜色:字间距,行间 ...
html怎么做响应式表格,纯CSS实现响应式表格
自从转岗至腾讯云后,项目中接触到大量的数据表格.多列数据表格在空间有限的手机屏幕下,难以完美呈现,需要做响应式处理.本文介绍一种使用纯CSS实现响应式表格的方法. 通常表格中的一行代表一条项目,每列代 ...
零基础CSS入门教程(13)–边框样式
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. 边框的样式 3. 边框宽度 4. 边框颜色 5. 简写属性 6. 单独设定各边样式 7. 小结 1. 前言边框是使用频率很高的样式,图 ...
CSS入门七：列表样式（主要是列表前面序号的样式，圆圈、方框，罗马序号，图片等等）
目录 1.列表样式的属性: ● 1.list-style-type:序号变成,空心圆.方框.数字,拉丁字母等等 ● 2.list-style-position:列表位置的"看起来像缩进的&q ...
CSS入门六：字体样式；字体（楷体、隶书等），斜体，文字加粗，字体大小；
1.字体样式下面四个,font-family和font-size先前已经接触过了:这篇博客的核心内容就是,italic和bold两个: ● 2.font-style: italic:斜体,对于大多数 ...
零基础CSS入门教程(5)–背景样式
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. 设置背景色 3. 设置背景图片 4. 背景图平铺 4.1 不平铺 4.2 水平平铺 4.3 垂直平铺 4.4 两个方向平铺 5. 背景定 ...
如何在不使用任何图像或跨度标签的情况下通过CSS在UL / LI html列表中设置子弹颜色[复制]
本文翻译自:How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags [du ...
ul 原点显示_web前端开发学习教程，CSS HTML - ul li列表原点如何相连
原标题:web前端开发学习教程,CSS HTML - ul li列表原点如何相连目前我列出两个方案,很详细,希望可以帮助到有疑问的朋友. 方案一: html 参与考试<第一期模拟考试> ...
css中ul位置移动,css中ul怎么定位
css中ul怎么定位 css中所有的元素默认都是static定位,要改变ul的定位方式,我们只需要指定元素的css position属性即可. 关于定位的几种方式1.static定位(普通流定位) - ...
CSS控制ul缩进间距和去掉li点的方法
CSS控制ul缩进间距和去掉li点的方法一.CSS控制ul缩进间距的方法: <style type="text/css"> ul{margin-left:-10px; ...

html ul做成表格,HTML+CSS入门 ul打造表格样式解析

html ul做成表格,HTML+CSS入门 ul打造表格样式解析相关推荐

最新文章

热门文章