极客学院的前端课程（十）

最新推荐文章于 2022-07-04 18:57:15 发布

garrulousabyss

最新推荐文章于 2022-07-04 18:57:15 发布

阅读量197

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/garrulousabyss/article/details/80963088

版权

前端专栏收录该内容

45 篇文章 1 订阅

订阅专栏

3.2.4 CSS样式——链接

第一个文件：style.css

a:link{
    color: #FF0000;
    text-decoration: none;
    background-color: aqua;
}

a:visited{
    color: #00FF00;
}

a:hover{
    color:#0000FF;
}

a:active{
    color:#0000FF;
}

第二个文件 50.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <a href="http://www.jikexueyuan.com">极客学院</a>
</body>
</html>

3.2.5 CSS样式——列表

第一个文件 style.css

ul.ul1{
    list-style-position: inside;

}

ul.ul2{
    list-style-position: outside;
}

第二个文件 51.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>


    <p>看一下效果</p>
    <ul class="ul1"> <!-- class可以重复，id不可以重复-->
        <li>苹果</li>
        <li>苹果</li>
        <li>苹果</li>
        <li>苹果</li>
    </ul>
    <p>看一下效果</p>
    <ul class="ul2">
        <li>苹果</li>
        <li>苹果</li>
        <li>苹果</li>
        <li>苹果</li>
    </ul>
</body>
</html>

3.2.6 CSS样式——表格

第一个文件 style.css

#tb, tr, th,td{
    border: 1px solid blue;
    text-align: center;
}

#tb{
    width:500px;
    border-collapse: collapse;
}

#tb td, #tb th{
    border:1px solid bisque;
    padding: 5px;
}

#tb th{
    text-align: left;
    background-color: aqua;
    color: #FFFFFF;
}

#tb tr.alt td{
    color: black;
    background-color: aquamarine;
}

第二个文件 52.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <table id="tb">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>小王</td>
            <td>20</td>
            <td>男</td>
        </tr>
        <tr class="alt">
            <td>小王</td>
            <td>20</td>
            <td>男</td>
        </tr>
        <tr>
            <td>小王</td>
            <td>20</td>
            <td>男</td>
        </tr>
        <tr class="alt">
            <td>小王</td>
            <td>20</td>
            <td>男</td>
        </tr>
    </table>
</body>
</html>

3.2.7 CSS样式——轮廓

第一个文件 style.css

p{
    outline-width:5px;
    outline-color: aqua;
    outline-style: double;
}

第二个文件 53.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p>突出的效果文字</p>
</body>
</html>

3.3.1 CSS定位——定位

第一个文件 style.css

#position1{
    width: 100px;
    height: 100px;
    background-color: blue;
    position: absolute;

    left:20px;
    top:20px;
    z-index: 3;
}

#position2{
    width: 100px;
    height: 100px;
    background-color: aqua;
    position: absolute;

    left:10px;
    top:10px;
    z-index:2;
}

#position3{
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;

    left:30px;
    top:30px;
    z-index:1;
}

第二个文件 54.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <link rel="stylesheet" type="text/css"  href="style1.css">
</head>
<body>
    <div id="position1"></div>
    <div id="position2"></div>
    <div id="position3"></div>
    <script>
        for(var i=0;i<100;i++)
        {
            document.write(i + "<br/>")
        }
    </script>
</body>
</html>