效果展示

style.css

html{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
body{
    width: 100%;
    height: 100%;
    font-family: 'Open Sans',sans-serif;
    margin: 0;
    background-color: rgb(230, 189, 189);
}
#login{
    position: absolute;
    top: 40%;
    left:50%;
    margin: -150px 0 0 -150px;
    width: 300px;
    height: 300px;
}

#login h1{
    color: #fff;
    text-shadow:0 0 10px;
    letter-spacing: 1px;
    text-align: center;
}
h1{
    font-size: 2em;
    margin: 0.67em 0;
}
input{
    width: 278px;
    height: 18px;
    margin-bottom: 10px;
    outline: none;
    padding: 10px;
    font-size: 13px;
    color: #fff;
    text-shadow:1px 1px 1px;
    border: 1px solid rgb(230, 189, 189);
    border-radius: 4px;
    background-color: rgb(177, 106, 104);
}
.but{
    width: 300px;
    min-height: 20px;
    display: block;
    background-color: rgb(230, 189, 189);
    border: 1px solid #ffffff;
    color: #b26b69;
    padding: 9px 14px;
    font-size: 15px;
    line-height: normal;
    border-radius: 5px;
    margin: 0;
}
#div1{
    position:fixed;
    left:0px;
    right:0px;
    width:800px;
    margin-left:auto;
    margin-right:auto;top:100px;
}
#div1 h1{
    color: #fff;
    text-shadow:0 0 10px;
    letter-spacing: 1px;
    text-align: center;
}
#div1 div{
    height:50px;
}
#div1 a{
    height:30px;
    font-size: 20px;
    color: rgb(255, 255, 255);
    text-shadow:0 0 10px;
    letter-spacing: 1px;
    text-align: center;
}
#a {
    height:50px;
    border:1px solid rgb(230, 189, 189);
}

#a input {
    height:30px;
    border: 1px solid rgb(230, 189, 189);
    background-color: lavenderblush;
}

label{
    display: inline-block;
    padding: 3px 6px;
    text-align: right;
    width: 100px;
    vertical-align: top;
    text-align:right
}
.txt{
    color: #fff;
    height:30px;
    width: 40px;
    font-size: 15px;
    text-shadow:0 0 9px;
    letter-spacing: 1px;
    text-align: center;
}

 table {
     width: 90%;
     background: #b26b69;
     margin: 10px auto;
     border-collapse: collapse;/*border-collapse:collapse合并内外边距(去除表格单元格默认的2个像素内外边距*/
 }
th,td {
    height: 25px;
    line-height: 25px;
    text-align: center;
    border: 1px solid #000000;
}
th {
    background: #b26b69;
    font-weight: normal;
}
tr {
    background: rgb(230, 189, 189);
}
tr:hover {
    background: #fcb99f;
}
td a {
    color: rgb(0, 0, 0);
    text-decoration: none;
}
td a:hover {
    color: rgb(0, 0, 0);
    text-decoration: underline;
}

look.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图书列表</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div align="center" id="div1">
    <h1>图书列表</h1>
    <table class="tb">
        <tr>
            <th>编号</th>
            <th>书名</th>
            <th>作者</th>
            <th>出版社</th>
            <th>可借阅数</th>
        </tr>
        <!-- forEach遍历出adminBeans -->
        <c:forEach items="${books}" var="item" varStatus="status">
            <tr>
                <!--<td><a href="BillServlet?method=getbillbyidcard3&idcard=">  </a></td>-->
                <td>${item.bid}</td>
                <td>${item.bname}</td>
                <td>${item.bwriter}</td>
                <td>${item.bout}</td>
                <td>${item.bnum}</td>
            </tr>
        </c:forEach>
    </table>
    <a href="teacher.jsp">返回主页</a>
</div>
</body>
</html>

HTML表格CSS美化的更多相关文章

  1. 学习笔记 第九章 使用CSS美化表格

    第9章  使用CSS美化表格 学习重点 正确使用表格标签: 设置表格和单元格属性: 设计表格的CSS样式. 9.1 表格的基本结构 表格由行.列.单元格3部分组成,单元格时行与列交叉的部分. 在HTM ...

  2. html table 美化-html如何用css美化表格

    html用css美化表格的方法:首先创建一个HTML示例文件:然后在body中创建table表格:最后通过style标签给表格添加css样式即可. 代码 下面通过示例来看看. /*表格样式*/ tab ...

  3. 只用CSS美化选择框

    只用CSS美化选择框 2012-03-02 11:04 by iBlog, 26240 阅读, 14 评论, 收藏, 编辑 <本文译自Style a Select Box Using Only ...

  4. CSS美化页面滚动条

    文章来自:http://www.webhek.com/scrollbar 本文将会告诉你如何用CSS修改/美化浏览器页面上出现的滚动条.改变它们的颜色,调整它们的外形,适配你对页面UI设计.我们首先将 ...

  5. css美化页面

    css美化页面 如果在我们一行文字中,想让某个文字凸显出来,使用span! 1.字体样式 font-style:字体的风格 italic normal font-weight:字体的粗细 normal ...

  6. CSS美化自己的完美网页

    CSS美化自己的完美网页   CSS概述 css样式: css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化,CSS的可以使页面更加的美观.基本上所有的h ...

  7. 跟着辛星一起用CSS美化商品列表

    说实话,近期对CSS的关注还是蛮多的,不为别的,仅仅是由于自己喜欢,感觉写CSS就像画家绘画一样,使用热情和激情去探索,没有了那份功利心,反而感觉是一种享受.特别有成就感,好啦,今天就分享一期自己用C ...

  8. 学习笔记 第十章 使用CSS美化表单

    第10章   使用CSS美化表单 [学习重点] 正确使用各种表单控件 熟悉HTML5新增的表单控件 掌握表单属性的设置 设计易用性表单页面 10.1  表单的基本结构 表单包含多个标签,由很多控件组成 ...

  9. 学习笔记 第八章 使用CSS美化列表

    第8章  使用CSS美化列表 8.1 列表的基本结构 在HTML中,列表结构可以分为两种基本类型:有序列表和无序列表.使用标签如下: <ul>...</ul>:标识无序列表: ...

随机推荐

  1. Flume介绍安装使用

    APache Flume官网:http://flume.apache.org/releases/content/1.9.0/FlumeUserGuide.html#memory-channel 目录 ...

  2. nginx 如何访问php文件

    1.进入nginx安装路径,我的是/usr/local/nginxvi conf/nginx.conf将 location ~ \.php$ { root html; fastcgi_pass 127 ...

  3. 华为三层交换机5700 DHCP配置

    交换机配置DHCP配置 1,交换机作DHCP Server『配置环境参数』1. PC1.PC2的网卡均采用动态获取IP地址的方式2. PC1连接到交换机的以太网端口0/1,属于VLAN10:PC2连接 ...

  4. Spring Session原理解析

    前景提要: @EnableRedisHttpSession导入RedisHttpSessionConfiguration.classⅠ.被RedisHttpSessionConfiguration继承 ...

  5. jdbc.properties/（驱动、URL、用户名、密码)跟换数据库时改该配置文件/Untitled Text File格式

    背景:这几天从阿里云上面购买了云服务器,最垃圾的那种,还送oss和EDS数据库服务器,只不过EDS数据库服务器只有一个月的,就主动升级为一年的,49还是59忘了.对于配置这种EDS过程中,产生的一个念 ...

  6. 一致性 hash 环

    一致性 hash 环 最近做项目 做了一个分发器 ,需要 根据请求携带的参数 把请求分发到 不同的服务器上面,最终我选择使用 一致性hash 环 来实现 ,本篇 就主要讲解一下 一致性hash环 它的 ...

  7. 74CMS 3.4 反射型XSS漏洞

    一. 启动环境 1.双击运行桌面phpstudy.exe软件 2.点击启动按钮,启动服务器环境 二.代码审计 1.双击启动桌面Seay源代码审计系统软件 2.因为74CMS3.4源代码编辑使用GBK编 ...

  8. 开源三轴云台EVVGC（simple BGC）分析

    一． 主程序分析 主程序结构清晰,流程如图所示,下面将对每个部分做详细分析 二. 系统初始化 系统初始化部分的流程如上图所示,下面对每部分做具体分析 1. 时钟初始化 该部分主要是使能DWT,用DWT ...

  9. bzoj2007/luoguP2046 海拔(平面图最小割转对偶图最短路)

    bzoj2007/luoguP2046 海拔(平面图最小割转对偶图最短路) 题目描述: bzoj  luogu 题解时间: 首先考虑海拔待定点的$h$都应该是多少 很明显它们都是$0$或$1$,并且所 ...

  10. css--BFC是什么，有什么用，怎么用？

    前言 作为前端开发人员或者学生,你一定知道BFC这个关键词,但是你是否具体了解过什么是BFC?BFC有什么用?BFC怎么用些问题呢?本文就来总结一下相关的知识点,希望对阅读到的小伙伴在面试.学习.开发 ...