<!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. RxJS v6 学习指南

    为什么要使用 RxJS RxJS 是一套处理异步编程的 API,那么我将从异步讲起. 前端编程中的异步有:事件(event).AJAX.动画(animation).定时器(timer). 异步常见的问 ...

  2. HTTP协议图--概述

    1.计算机网络体系结构分层 2.TCP/IP 通信传输流 利用 TCP/IP 协议族进行网络通信时,会通过分层顺序与对方进行通信.发送端从应用层往下走,接收端则从链路层往上走.如下:   3.TCP/ ...

  3. 使用devstack/pike部署多节点实验

    目录 第一步:安装Ubuntu16.04 server并以stack为用户名创建用户 第二步:安装git及相关配置 第三步:安装Open vSwitch 2.5.X 第四步:获取devstack脚本 ...

  4. PAT甲题题解-1035. Password (20)-水

    题意:给n个用户名和密码,把密码中的1改为@,0改为%,l改为L,O改为o. 让你输出需要修改密码的用户名个数,以及对应的用户名和密码,按输入的顺序.如果没有用户需要修改,则输出对应的语句,注意单复数 ...

  5. 团队作业week9

    1. Bug bash ▪ How many bugs is found in your bug bash? 2. Write a blog to talk about your scenario t ...

  6. 【SE】Week3 : 四则运算式生成评分工具Extension&Release Version(结对项目)

    Foreword 此次的结对项目终于告一段落,除了本身对软件开发的整体流程有了更深刻的了解外,更深刻的认识应该是结对编程对这一过程的促进作用. 在此想形式性但真心地啰嗦几句,十分感谢能端同学能够不厌其 ...

  7. 冲刺Two之站立会议5

    昨天对视频音频的内容查询收集了相关资料,今天就主要对此进行了加工.先是使两台PC进行通信,不断进行测试.改进:测试.改进.最后初见成效,但还是没有达到我们最初的标准.

  8. 小学四则运算APP 第一个冲刺阶段 第一天

    团队成员:陈淑筠.杨家安.陈曦 团队选题:小学四则运算APP 第一次冲刺阶段时间:11.17~11.27 思考:初步了解小学四则运算数是在100以内的加减乘除,首先先从简单的地方入手,把最基础的算法功 ...

  9. Daily Scrum - 12/03

    Meeting Minutes   后端基本完成,结束当前Sprint, 开始下一个Sprint.进一步讨论了UI,并完成了任务分配.   Burndown     Progress   part 组 ...

  10. ElasticSearch 2 (36) - 信息聚合系列之显著项

    ElasticSearch 2 (36) - 信息聚合系列之显著项 摘要 significant_terms(SigTerms)聚合与其他聚合都不相同.目前为止我们看到的所有聚合在本质上都是简单的数学 ...