CSS(下)

第十章 用CSS 设置表格样式

第一节：设置表格的边框
Border：设置表格边框；
Border-collapse：设置边框分离，合并 默认是 separate(分离) collapse 合并；
Border-spacing ：设置单元格的间距；
Padding：设置单元格内容和边框之间的距离；

第二节：设置表格的宽度
Table-layout
默认 auto 自动方式，根据单元格的内容自动调整宽度；
Fixed 固定方式 表格宽度固定；

第三节：设置表格隔行换色
第四节：设置表格列样式
第五节：设置鼠标经过时行变色效果

<html>
<head>
<meta charset="UTF-8">
<title>设置鼠标经过时行变色效果</title>
<style type="text/css">
    .t{
        border: 1px gray solid;
        border-spacing: 0px;
        border-collapse: collapse;
        width: 500px;
        table-layout: fixed;
    }
    
    .t caption{
        font-size: 24px;
    }
    
    .t tr{
        background-color: #CCC;
    }
    
    .t td{
        border: 1px gray solid;
        padding: 5px;
    }
    
    .t th{
        border: 1px gray solid;
        padding: 5px;
    }
    
    tbody tr.even{
        background-color: #AAA;
    }
    
    th+td{
        text-align: center;
    }
    /* 连接选择器，不提倡使用row1那种，有的浏览器不支持 */
    th+td+td+td{
        text-align: center;
        background-color: red;
    }
    
    tbody tr:HOVER {
        background-color: aqua;
    }
</style>
</head>
<body>
    <table class="t">
        <caption>学生信息</caption>
        <thead>
            <tr>
                <th>序号</th>
                <th>学号</th>
                <th>姓名</th>
                <th style="width: 50px;">性别</th>
                <th>出生日期</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>1</th>
                <td>001</td>
                <td>魏安复</td>
                <td>男</td>
                <td>2012-12-12</td>
            </tr>
            <tr class="even">
                <th>2</th>
                <td>002</td>
                <td>杜子腾</td>
                <td>女</td>
                <td>2011-11-11</td>
            </tr>
            <tr>
                <th>3</th>
                <td>003</td>
                <td>史珍湘</td>
                <td>女</td>
                <td>2010-10-10</td>
            </tr>
            <tr class="even">
                <th>4</th>
                <td>004</td>
                <td>梅读</td>
                <td>女</td>
                <td>2009-10-10</td>
            </tr>
            <tr>
                <th>5</th>
                <td>005</td>
                <td>赖月金</td>
                <td>男</td>
                <td>2008-01-01</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>总计</th>
                <th colspan="4">5条数据</th>
            </tr>
        </tfoot>
    </table>
</body>
</html>
View Code

 

第十一章 用 CSS设置超链接样式

第一节：使用 CSS伪类别来设置超链接样式
链接的四种状态：
a:link：普通的、未被访问的链接
a:visited：用户已访问的链接
a:hover：鼠标指针位于链接的上方
a:active：链接被点击的时刻  (这种瞬间看不到)

<title>使用CSS伪类别来设置超链接样式</title>
<style type="text/css">
    a:LINK {
        color: red;
        text-decoration: none;   /* 去掉装饰效果-下划线 */
    }
    
    a:VISITED {
        color: green;
        text-decoration: none;
    }
    
    a:HOVER {
        background-color: yellow;
        text-decoration: none;
    }
</style>
</head>
<body>
<a href="http://www.123.com">超链接</a>
</body>
</html>
View Code

第二节：创建按钮式超链接

<title>创建按钮式超链接</title>
<style type="text/css">
    body{
        margin: 20px;
    }
    
    a{
        font-family: Arial;
        margin: 5px;
    }
    
    a:LINK,a:VISITED {
        color:#A62020;
        padding:4px 10px 4px 10px;
        background-color:#DDD;
        text-decoration: none;
        border-top: 1px solid #EEEEEE;
        border-left: 1px solid #EEEEEE;
        border-bottom: 1px solid #717171;
        border-right: 1px solid #717171;
    }
    
    a:HOVER {
        color: #821818;
        padding: 5px 8px 3px 12px;
        background-color: #CCC;
        border-top: 1px solid #717171;
        border-left: 1px solid #717171;
        border-bottom: 1px solid #EEEEEE;
        border-right: 1px solid #EEEEEE;
    }
</style>
</head>
<body>
<a href="http://www.1234.com">Java</a>
<a href="http://www.1234.com">Php</a>
<a href="http://www.1234.com">.Net</a>
</body>
</html>
View Code

 

第十二章 用 CSS设置列表样式

第一节：设置列表的符号
第二节：设置列表图片符号

<title>设置列表的符号</title>
<style type="text/css">
    ul,ol{
        list-style-type: square;
    }
</style>
</head>
<body>
<ul>
    <li>主页</li>
    <li>我的博客</li>
    <li>我的相册</li>
    <li>留言</li>
    <li>关于我</li>
</ul>

<ol>
    <li>主页</li>
    <li style="list-style-type: circle;">我的博客</li>
    <li>我的相册</li>
    <li>留言</li>
    <li style="list-style-type: none;">关于我</li>
</ol>
</body>
</html>


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

<title>设置列表图片符号</title>
<style type="text/css">
    ul,ol{
        list-style-image: url("../li.png");
    }
</style>
</head>
<body>
<ul>
    <li>主页</li>
    <li>我的博客</li>
    <li style="list-style-image: url('../image.png');">我的相册</li>
    <li>留言</li>
    <li>关于我</li>
</ul>

<ol>
    <li>主页</li>
    <li>我的博客</li>
    <li>我的相册</li>
    <li>留言</li>
    <li>关于我</li>
</ol>
</body>
</html>
View Code

第三节：创建简单导航菜单

<title>创建简单导航菜单</title>
<style type="text/css">
#navigation {
    width:120px;    /* 设置统一宽度 */
    font-family:Arial;
    font-size:14px;
    text-align:right
}    

#navigation ul {
    list-style-type:none;                /* 不显示项目符号 */
    margin:0px;
    padding:0px;
}
#navigation li {
    border-bottom:1px solid #9F9FED;    /* 添加下划线 */
}
#navigation li a{
    display:block;    /*  a是内联元素，尺寸是原本大小，block可以撑大 */
    height:1em;
    padding:5px 5px 5px 0.5em;
    text-decoration:none;
}
#navigation li a:link, #navigation li a:visited{
    background-color:#1136c1;
    color:#FFFFFF;
}
#navigation li a:hover{                    /* 鼠标经过时 */
    background-color:#002099;            /* 改变背景色 */
    color:#ffff00;                        /* 改变文字颜色 */
}
</style>
</head>
<body>
<div id="navigation">
    <ul>
        <li><a href="#">主页</a></li>
        <li><a href="#">我的博客</a></li>
        <li><a href="#">我的相册</a></li>
        <li><a href="#">留言</a></li>
        <li><a href="#">关于我</a></li>
    </ul>
</div>
</body>
</html>

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

<title>创建简单导航菜单</title>
<style type="text/css">
#navigation {
    /* width:120px; 去掉，然后然他们悬浮起来就可以横排*/
    font-family:Arial;
    font-size:14px;
    text-align:center;
}    

#navigation ul {
    list-style-type:none;                /* 不显示项目符号 */
    margin:0px;
    padding:0px;
}
#navigation li {
    border-bottom:1px solid #9F9FED;    /* 添加下划线 */
    float: left;    /*  添加向左悬浮 */
}
#navigation li a{
    width:120px;
    display:block;
    height:1em;
    padding:5px 5px 5px 0.5em;
    text-decoration:none;
}
#navigation li a:link, #navigation li a:visited{
    background-color:#1136c1;
    color:#FFFFFF;
}
#navigation li a:hover{                    /* 鼠标经过时 */
    background-color:#002099;            /* 改变背景色 */
    color:#ffff00;                        /* 改变文字颜色 */
}
</style>
</head>
<body>
<div id="navigation">
    <ul>
        <li><a href="#">主页</a></li>
        <li><a href="#">我的博客</a></li>
        <li><a href="#">我的相册</a></li>
        <li><a href="#">留言</a></li>
        <li><a href="#">关于我</a></li>
    </ul>
</div>
</body>
</html>
View Code

 

第十三章 CSS固定宽度布局

第二节：绝对定位法  

<title>绝对定位法</title>
<style type="text/css">
    body{
        text-align: center;
    }
    
    #head,#container,#content,#side,#foot{
        margin:20px auto 20px auto;     /*  居中作用 */
        padding:20px 0px 20px 0px;
        border: 1px solid red;
    }
    
    #head,#container,#foot{
        width: 900px;
    }
    
    #container{
        border:0px;
        position: relative;    /* 从标准流中脱离 */
        height: 250px;
    }
    
    #content{
        position: absolute;
        width: 700px;
        height: 200px;
    }
    
    #side{
        margin-left: 750px;
        height: 100px;
    }
</style>
</head>
<body>
<div id="head">head</div>
<div id="container">
    <div id="content">content</div>
    <div id="side">side</div>
</div>
<div id="foot">foot</div>
</body>
</html>
View Code

第三节：浮动法  (常用) 

<title>浮动法</title>
<style type="text/css">
    body{
        text-align: center;
    }
    
    #head,#container,#content,#side,#foot{
        margin:20px auto 20px auto;
        padding:20px 0px 20px 0px;
        border: 1px solid red;
    }
    
    #head,#container,#foot{
        width: 900px;
    }
    
    #container{
        border:0px;
    }
    
    #content{
        float:left;
        width: 700px;
        height: 200px;
    }
    
    #side{
        float:right;
        width: 180px;
        margin-left: 10px;
        height: 100px;
    }
    
    #foot{
        clear: both;   /* 清除浮动，这样foot就会在下面 */
    }
</style>
</head>
<body>
<div id="head">head</div>
<div id="container">
    <div id="content">content</div>
    <div id="side">side</div>
</div>
<div id="foot">foot</div>
</body>
</html>
View Code

 

第十四章 CSS变宽度布局

<title>变宽度布局</title>
<style type="text/css">
    body{
        text-align: center;
    }
    
    #head,#container,#content,#side,#foot{
        margin:20px auto 20px auto;
        padding:20px 0px 20px 0px;
        border: 1px solid red;
    }
    
    #head,#container,#foot{
        width: 80%;
    }
    
    #container{
        border:0px;
    }
    
    #content{
        float:left;
        width: 63%;
        height: 200px;
    }
    
    #side{
        float:right;
        width: 33%;
    /*     margin-left: 10px; */
        height: 100px;
    }
    
    #foot{
        clear: both;
    }
</style>
</head>
<body>
<div id="head">head</div>
<div id="container">
    <div id="content">content</div>
    <div id="side">side</div>
</div>
<div id="foot">foot</div>
</body>
</html>
View Code

 

posted @ 2017-03-07 21:11  SKYisLimit  阅读(91)  评论(0)    收藏  举报