<!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>

<title></title>

<style type="text/css">

*{ margin:0; padding:0;}

.box{ width:350px; height:500px; background:#999; padding-top:60px; padding-left:60px;}

.box li{ float:left; list-style:none}

.box li a{ border:5px solid #aaa; display:block; width:100px; height:60px; text-decoration:none; margin:0 0 -5px -5px; position:relative; z-index:0; text-align:center; line-height:60px; color:#fff; font-size:30px;}

.box li a:hover{ border:5px solid #333; z-index:1;}

</style>

</head>

<body>

<ul class="box">

<li><a href="#">1</a></li>

<li><a href="#">2</a></li>

<li><a href="#">3</a></li>

<li><a href="#">4</a></li>

<li><a href="#">5</a></li>

<li><a href="#">6</a></li>

<li><a href="#">7</a></li>

<li><a href="#">8</a></li>

<li><a href="#">9</a></li>

<li><a href="#">10</a></li>

<li><a href="#">11</a></li>

<li><a href="#">12</a></li>

<li><a href="#">13</a></li>

<li><a href="#">14</a></li>

<li><a href="#">15</a></li>

</ul>

</body>

</html>

效果图

CSS表格均匀边框的更多相关文章

  1. CSS - 表格细线边框

    通过 border-collapse: collapse cellpadding="0", cellspacing= "0" 实现 <!DOCTYPE h ...

  2. 用css样式，为表格加入边框

    Table 表格在没有添加 css 样式之前,是没有边框的.这样不便于我们后期合并单元格知识点的讲解,所以在这一节中我们为表格添加一些样式,为它添加边框. 在右侧代码编辑器中添加如下代码: <s ...

  3. 表格细边框的两种CSS实现方法

    在网页制作中,细边框这个制作方法是必不可少的.这里介绍2种常见的表格细边框制作方法,均通过XHTML验证. <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  4. 用CSS给表格加边框

    很久之前,给表格加边框用的方法是给表格加上背景色,然后把cellspacing="1",再给td设置成另一种颜色,这样间接的加边框颜色. 一直没去细研究,今天发现了一种很简单的加边 ...

  5. CSS操作表格的边框和表格的属性示例代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 第 18 章 CSS 表格与列表

    学习要点: 1.表格样式 2.列表样式 3.其他功能 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 表格和列表,通过表格和列表的样式设置,让表格和列表显示更加多元化. 一．表格样式 表格有五 ...

  7. HTML 学习笔记 CSS(表格)

    CSS 表格属性可以帮助您极大的改善表格的外观 表格边框 如需在CSS中设置表格的边框 请使用border属性. 在下面的例子中table th 以及td设置了蓝色边框. table, th, td ...

  8. border-collapse实现表格细线边框

    虽然在xhtml+css 时代 table的使用越来越少,但需要布局数据型元素,用table还是很不错的选择. 用table制作表格的时候美观也很重要,其中的边框.在HTML中,表格的默认样式大概是这 ...

  9. Bootstrap css栅格 + 网页中插入代码+css表格

    设计达人 http://www.shejidaren.com/30-minimal-app-icons.html CSS栅格: <!DOCTYPE html> <html lang= ...

随机推荐

  1. python语言程序设计2

    1, 代码高亮色彩体系 2, 缩进,一行代码开始前的空白区域,表达程序的格式框架 单层缩进,多层缩进 特点 概念,缩进是语法的一部分,缩进不正确的话可能会导致程序运行错误 用处(意义),是表达代码间包 ...

  2. gulp.src()内部实现探究

    写在前面 本来是想写个如何编写gulp插件的科普文的,突然探究欲又发作了,于是就有了这篇东西...翻了下源码看了下gulp.src()的实现,不禁由衷感慨:肿么这么复杂... 进入正题 首先我们看下g ...

  3. 简单测评拨号VPS——云立方&淘宝卖家

    做爬虫的同学不可避免地要使用代理IP,除了各网站公布的免费代理IP外,我们还可以选择拨号VPS,本文简单对两家(类)拨号VPS提供商进行测评,如有差错,欢迎指出,非常感谢. 使用过程 云立方 第一次听 ...

  4. CEPH FILESYSTEM

    参考文档: CEPH FILESYSTEM:http://docs.ceph.com/docs/master/cephfs/ CephFS best practices:http://docs.cep ...

  5. 华为云Istio服务网格，让应用治理智能化、可视化

  6. 机器学习1—简介及Python机器学习环境搭建

    简介 前置声明:本专栏的所有文章皆为本人学习时所做笔记而整理成篇,转载需授权且需注明文章来源,禁止商业用途,仅供学习交流.(欢迎大家提供宝贵的意见,共同进步) 正文: 机器学习,顾名思义,就是研究计算 ...

  7. SimpleDateFormat的一些常用用法

    /** SimpleDateFormat函数语法: G 年代标志符 y 年 M 月 d 日 h 时 在上午或下午 (1~12) H 时 在一天中 (0~23) m 分 s 秒 S 毫秒 E 星期 D ...

  8. BugPhobia开发篇章：Beta阶段第VI次Scrum Meeting

    0x01 :Scrum Meeting基本摘要 Beta阶段第六次Scrum Meeting 敏捷开发起始时间 2015/12/18 00:00 A.M. 敏捷开发终止时间 2015/12/18 23 ...

  9. Linux内核分析 NO.3

    跟踪分析Linux内核的启动过程 于佳心 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-100002 ...

  10. git的使用与学习

    1.将本地项目推送到Github $ git remote add origin 仓库地址 // 关联远程仓库 $ git push origin master // 推送到远程仓库 如果远程仓库有本 ...