CSS的表格样式和列表样式

-----------------------------------------------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>32td>

        <td>td>

        <td>香港td>

        <td>1955-07-23td>

        <td>10000td>

    tr>  

    <tr class="double">

        <td>李小龙td>

        <td>32td>

        <td>td>

        <td>香港td>

        <td>1955-07-23td>

        <td>10000td>

    tr>  

    <tr>

        <td>李小龙td>

        <td>32td>

        <td>td>

        <td>香港td>

        <td>1955-07-23td>

        <td>10000td>

    tr>  

    <tr class="double">

        <td>李小龙td>

        <td>32td>

        <td>td>

        <td>香港td>

        <td>1955-07-23td>

        <td>10000td>

    tr>  

    <tr>

        <td>李小龙td>

        <td>32td>

        <td>td>

        <td>香港td>

        <td>1955-07-23td>

        <td>10000td>

    tr>  

    <tr class="double">

        <td>李小龙td>

        <td>32td>

        <td>td>

        <td>香港td>

        <td>1955-07-23td>

        <td>10000td>

    tr>  

    <tr>

        <td>李小龙td>

        <td>32td>

        <td>td>

        <td>香港td>

        <td>1955-07-23td>

        <td>10000td>

    tr>  

    <tr class="double">

        <td>李小龙td>

        <td>32td>

        <td>td>

        <td>香港td>

        <td>1955-07-23td>

        <td>10000td>

    tr>

table>

body>

html>

CSS的表格样式和列表样式_第1张图片

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

列表样式

代码示例:

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>

CSS的表格样式和列表样式_第2张图片

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

列表菜单制作

代码示例:

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>

CSS的表格样式和列表样式_第3张图片

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

列表制作横向菜单

代码示例:

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)