zoukankan      html  css  js  c++  java
  • HTML表格CSS美化

    效果展示

    style.css

    html{
    100%;
    height: 100%;
    overflow: hidden;
    }
    body{
    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;
    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{
    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{
    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;
    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;
    100px;
    vertical-align: top;
    text-align:right
    }
    .txt{
    color: #fff;
    height:30px;
    40px;
    font-size: 15px;
    text-shadow:0 0 9px;
    letter-spacing: 1px;
    text-align: center;
    }

    table {
    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>
  • 相关阅读:
    什么是webview
    juqery.fn.extend和jquery.extend
    LeetCode
    5. Longest Palindromic Substring
    42. Trapping Rain Water
    11. Container With Most Water
    621. Task Scheduler
    49. Group Anagrams
    739. Daily Temperatures
    3. Longest Substring Without Repeating Characters
  • 原文地址:https://www.cnblogs.com/linmob/p/14153084.html
Copyright © 2011-2022 走看看