BJFU_2022Web前端开发_CSS样式汇总

＞C＝C＜

已于 2022-04-13 10:12:42 修改

阅读量442

点赞数 2

文章标签：单元测试 html css css3 html5

于 2022-04-13 10:08:36 首次发布

本文链接：https://blog.csdn.net/weixin_62108926/article/details/124141372

版权

仅供课外学习使用，任何个人与机构不得利用此文章进行任何形式的作弊。

注：实验截止一次更新一次

实验一：

.all{
    font-family:'Microsoft YaHei';
    background-image: url("images/background.gif");
    text-align: center;
}
a{
    font-size:20px;
}
a:link{
    text-decoration: none;
    color:blue;
}
a:visited{
    text-decoration: none;
    color:cornflowerblue;
}
a:hover{
    text-decoration: none;
    color:blueviolet;
}
a:active{
    text-decoration: none;
    color:darkslateblue;
}

h1{
    letter-spacing:2px;
}
h2{
    font-size:22px;
    color: #333;
}
p{
    font-size: 16px;
    color:#333;
    line-height:2em;
}
h3{
    font-size:16px;
    color:blueviolet;
}

table{
    width: 500px;
    height: 200px;
    margin:0 auto;
    border : 1px solid brown;
    border-collapse : collapse;
}


th{
    color:cadetblue;
    background-color:burlywood;
}
th:nth-child(even){
    background-color: beige;
}
td:nth-child(even){
    background-color:beige;
    color:pink;
}
td{
    background-color:burlywood;
    color:lightcyan;
}

网格布局模板：

HTML部分

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>TEST</title>
        <link rel="stylesheet" href="main.css"/>
    </head>
<body class="grid-container">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
</body>

</html>

CSS部分

.grid-container
{
    display: grid;
    justify-content: center;
    align-content: center;
    grid-template-columns: repeat(6,180px);
    grid-template-rows: repeat(6,100px);
    grid-gap: 10px;
}
.grid-item:nth-child(1)
{
    grid-column: 1/4;
    grid-row: 1/3;
    background-color: cornflowerblue;
}
.grid-item:nth-child(2)
{
    grid-column: 4/7;
    grid-row: 1/2;
    background-color:cornflowerblue;
}
.grid-item:nth-child(3)
{
    grid-column: 4/7;
    grid-row: 2/3;
    background-color:cornflowerblue;
}
.grid-item:nth-child(4)
{
    grid-column: 1/2;
    grid-row: 3/6;
    background-color:cornflowerblue;
}
.grid-item:nth-child(5)
{
    grid-column: 2/5;
    grid-row: 3/4;
    background-color:cornflowerblue;
}
.grid-item:nth-child(6)
{
    grid-column: 5/7;
    grid-row: 3/4;
    background-color:cornflowerblue;
}
.grid-item:nth-child(7)
{
    grid-column: 2/7;
    grid-row: 4/6;
    background-color:cornflowerblue;
}
.grid-item:nth-child(8)
{
    grid-column: 1/3;
    grid-row: 6/7;
    background-color:brown;
}
.grid-item:nth-child(9)
{
    grid-column: 3/7;
    grid-row: 6/7;
    background-color:brown;
}

＞C＝C＜

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
BJFU_2022Web前端开发_CSS样式汇总

仅供课外学习使用，任何个人与机构不得利用此文章进行任何形式的作弊。注：实验截止一次更新一次实验一：.all{ font-family:'Microsoft YaHei'; background-image: url("images/background.gif"); text-align: center;}a{ font-size:20px;}a:link{ text-decoration: none; color:blue;}a:v
复制链接

扫一扫