-----------------------------------------------CSS的表格样式和列表样式--------------------------------------------------

Table样式处理

代码示例：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>表格设置</title>

<style type="text/css">

.mytable{

border:1px solid #A6C1E4;

font-family:Arial;

border-collapse: collapse;

}

table th{

border:1px solid black;

background-color:#71c1fb;

width:100px;

height:20px;

font-size:15px;

}

table td{

border:1px solid #A6C1E4;

text-align:center;

height:15px;

padding-top:5px;

font-size:12px;

}

.double{

background-color:#c7dff6;

}

</style>

</head>

<body>

<table class="mytable">

<tr>

<th>姓名</th>

<th>年龄</th>

<th>性别</th>

<th>地址</th>

<th>生日</th>

<th>工资</th>

</tr>

<tr>

<td>李小龙</td>

<td>32</td>

<td>男</td>

<td>香港</td>

<td>1955-07-23</td>

<td>10000</td>

</tr>

<tr class="double">

<td>李小龙</td>

<td>32</td>

<td>男</td>

<td>香港</td>

<td>1955-07-23</td>

<td>10000</td>

</tr>

<tr>

<td>李小龙</td>

<td>32</td>

<td>男</td>

<td>香港</td>

<td>1955-07-23</td>

<td>10000</td>

</tr>

<tr class="double">

<td>李小龙</td>

<td>32</td>

<td>男</td>

<td>香港</td>

<td>1955-07-23</td>

<td>10000</td>

</tr>

<tr>

<td>李小龙</td>

<td>32</td>

<td>男</td>

<td>香港</td>

<td>1955-07-23</td>

<td>10000</td>

</tr>

<tr class="double">

<td>李小龙</td>

<td>32</td>

<td>男</td>

<td>香港</td>

<td>1955-07-23</td>

<td>10000</td>

</tr>

<tr>

<td>李小龙</td>

<td>32</td>

<td>男</td>

<td>香港</td>

<td>1955-07-23</td>

<td>10000</td>

</tr>

<tr class="double">

<td>李小龙</td>

<td>32</td>

<td>男</td>

<td>香港</td>

<td>1955-07-23</td>

<td>10000</td>

</tr>

</table>

</body>

</html>

---------------------------------------------------------------------------------------

列表样式

代码示例：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>列表样式</title>

<style type="text/css">

body{

background-color:#f8d080;

font-family:黑体;

font-size:15px;

}

ul{

list-style-type:none;/* 去掉li前面的点 */

}

li{

margin:10px;

background: url(icon.gif) no-repeat;

padding-left:30px;

padding-top:5px;

height:30px;

}

</style>

</head>

<body>

<ul>

<li>篮球运动</li>

<li>田径运动</li>

<li>足球运动</li>

<li>游泳运动</li>

</ul>

</body>

</html>

--------------------------------------------------------------------------------------------

列表菜单制作

代码示例：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>列表样式</title>

<style type="text/css">

body{

background-color:#ffdee0;

font-family:黑体;

font-size:18px;

}

ul{

list-style-type:none;

}

ul li{

border:1px solid #ffff00;

width:200px;

text-align:center;

height:20px;

margin-bottom:2px;

background-color:#c11136;

}

li a{

text-decoration:none;

color:yellow;

}

li:hover{

background-color:blue;

color:white;

border:1px solid black;

}

li a:hover{

color:white;

}

a:VISITED {

color:red;

}

</style>

</head>

<body>

<ul>

<li><a href="#">学生管理</a></li>

<li><a href="#">老师管理</a></li>

<li><a href="#">考试管理</a></li>

<li><a href="#">考勤管理</a></li>

</ul>

</body>

</html>

-----------------------------------------------------------------------------------------

列表制作横向菜单

代码示例：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>列表样式</title>

<style type="text/css">

body{

background-color:#ffdee0;

font-family:黑体;

font-size:15px;

}

ul{

list-style-type:none;

}

ul li{

width:100px;

text-align:center;

height:20px;

margin-right:10px;

background-color:#c11136;

float:left;

padding-top:3px;

border-bottom:5px solid black;

}

li a{

display:block;

text-decoration:none;

color:yellow;

}

li:hover{

background-color:blue;

color:white;

border:1px solid yellow;

border-bottom:5px solid black;

}

li a:hover{

color:yellow;

}

a:VISITED {

color:white;

}

</style>

</head>

<body>

<ul>

<li><a href="#">学生管理</a></li>

<li><a href="#">老师管理</a></li>

<li><a href="#">考试管理</a></li>

<li><a href="#">考勤管理</a></li>

</ul>

</body>

</html>

CSS的表格样式和列表样式相关推荐

  1. css美化表格和表单样式

    Css美化表格和表单样式 表格创建默认是没有边框的,我们要用boder属性去设置表格的边框 表格基本样式 表格边框合并boder-collapse 在显示表格时,通常来说表格都是有边框的,边框的作用: ...

  2. CSS中颜色、样式规则（字体样式、列表样式、表格样式）

    目录 一.CSS中的颜色设置 1.颜色的表示方式 (1).颜色名 (2).rgb函数 (3).十六进制表示(HEX 值) ​二.CSS样式规则 1.字体规则 (1) font-family属性:字体 ...

  3. css 恢复ulli_CSS Ul（列表样式）

    CSS Ul(列表样式) CSS列表属性作用如下: 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 一.列表 在HTML中,有两种类型的列表: 无序列表 - 列表 ...

  4. html好看css列表样式_CSS样式HTML列表样式

    html好看css列表样式 We often see webpages with navigation menus, providing links to other pages in a dropd ...

  5. css边框样式和列表样式

    边框样式 图片边框 局部边框 列表样式

  6. 零基础CSS入门教程(11)——无序列表样式

    本章目录 1.任务目标 2.无序列表样式 3.代码如下 4.小结 1.任务目标 我们再html里面有无序列表和有序列表,那我们这一小节学习一下列表样式,并熟练掌握. 2.无序列表样式 (1)list- ...

  7. WEB代码：CSS字体样式、文本属性、背景样式、边框属性、鼠标样式、列表样式

    1.字体样式: 1.字体样式 font-family 2.字体大小 font-size 3.字体类型 font-style 4.字体粗细 font-weight span{font-family: 微 ...

  8. 用于设定表格样式的附加css,css设置表格与能表单样式.ppt

    css设置表格与能表单样式 第6章 CSS设置表格与表单样式 学习目标 什么是表格模型 对数据表格应用样式. 创建简单和复杂的表单布局 对各种表单元素应用样式. 掌握CSS中用列表制作各种菜单的方法. ...

  9. CSS中列表样式的简介

    什么是CSS列表样式: 所谓的CSS列表样式,肯定和列表有关,但是列表我们要清楚地是,列表可以分为有序列表和无序列表.于是我们的列表样式又可以分为三种类型,第一是设置不同形状的标记的无序列表,第二是设 ...

最新文章

  1. 什么闭包，有什么特性，有什么影响，为什么用闭包
  2. 图解集合8：红黑树的移除节点操作
  3. 【转】排序算法复习（Java实现） （二）： 归并排序，堆排序，桶式排序，基数排序...
  4. 利用 CocoaLumberjack 搭建自己的 Log 系统
  5. 神奇的python（四）之logging日志文件系统
  6. db2如何锁定一张表_DB2数据库为单个会话锁定的技巧
  7. 苹果开发者账号那些事儿(三)
  8. Total Commander 常用快捷键
  9. 深入浅出分布式系统Raft协议
  10. python从网页提取文本_使用Python进行网页正文提取
  11. leetcode + 腾讯面试
  12. PIE-engine APP 教程 ——基于PIE云平台的城市生态宜居性评价系统——以京津冀城市群为例
  13. php 统计一个月工作日,php – 使用strtotime在一个月内获得第一个工作日
  14. linux下的office 速度慢,Microsoft office2016打开很慢解决
  15. Android 开发都有哪些好书值得一读？
  16. Zabbix Trapper items
  17. x86、i386、IA-32、amd64、x64、x86-64、IA-64的区别
  18. audioread.exceptions.NoBackendError
  19. Linux下tree命令的安装与使用
  20. Linux驱动_i2c驱动(ap3216c)

热门文章

  1. winXPSP3的盘怎么装在VISTA系统里
  2. 用 LaTeX 写漂亮学位论文(from wloo)
  3. 服务器监控1-Serveragent
  4. 几个常用的免费高清无版权图片网站
  5. VR教育让学习变得简单而有趣，VR教育都有哪些优势？
  6. 如何执行存储过程以及如何进行调试？
  7. 转载：浅谈Session与Cookie的区别与联系
  8. matlab 2016a
  9. 故障：Office 重复提示激活
  10. C语言：窗口控制台颜色改变（不断换色）