CSS练习

最新推荐文章于 2024-05-21 21:13:29 发布

论搬砖的艺术

最新推荐文章于 2024-05-21 21:13:29 发布

阅读量72

点赞数

分类专栏：前端文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_53817374/article/details/130231598

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

效果

在这里插入图片描述

Html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/ceshi.css">
    <title>CSS Crash Course</title>

</head>

<body>
    <div class="contain">
        <div class="box1">
            <h1>Hello world</h1>
            <p>Lorem ipsum dolor sit amet consectetur
                adipisicing elit. Molestiae ducimus, tenetur neque quo
                ab rerum adipisci blanditiis veniam voluptates unde illum f
                ugiat expedita reiciendis quasi hic explicabo voluptate. Ab ducimus ipsa distinctio quaerat unde.
                Assumenda
                explicabo odio ut numquam suscipit illo, dolores, vitae excepturi nobis placeat quasi deleniti facere
                voluptates similique totam ex consequatur! Numquam ratione excepturi et voluptate, quam, cupiditate
                velit
                voluptatibus assumenda fuga quia dicta? Nemo qui ad, recusandae eligendi ex minima veniam cum id
                voluptatibus, voluptas blanditiis neque aliquid ipsam suscipit, molestiae voluptatem quibusdam? Dolorum
                illum accusamus magnam tempora laborum deserunt numquam quisquam adipisci. Recusandae, ad. Sapiente.
            </p>
            <button>Button</button>
        </div>
        <div class="box2">
            <h1>Hello world</h1>
            <p>Lorem ipsum dolor sit amet consectetur
                adipisicing elit. Molestiae ducimus, tenetur neque quo
                ab rerum adipisci blanditiis veniam voluptates unde illum f
                ugiat expedita reiciendis quasi hic explicabo voluptate. Ab ducimus ipsa distinctio quaerat unde.
                Assumenda
                explicabo odio ut numquam suscipit illo, dolores, vitae excepturi nobis placeat quasi deleniti facere
                voluptates similique totam ex consequatur! Numquam ratione excepturi et voluptate, quam, cupiditate
                velit
                voluptatibus assumenda fuga quia dicta? Nemo qui ad, recusandae eligendi ex minima veniam cum id
                voluptatibus, voluptas blanditiis neque aliquid ipsam suscipit, molestiae voluptatem quibusdam? Dolorum
                illum accusamus magnam tempora laborum deserunt numquam quisquam adipisci. Recusandae, ad. Sapiente.
            </p>
            <button>Button</button>
        </div>
        <div class="list">
            <ul>
                <li><a href="">list 1</a></li>
                <li><a href="123.abc">list 2</a></li>
                <li><a href="">list 3</a></li>
                <li><a href="">list 4</a></li>
                <li><a href="">list 5</a></li>
            </ul>
        </div>
        <div class="block">
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro est eaque labore maiores dolores
                voluptatum. In saepe iusto sint consequatur ipsa rem, tempore, itaque sequi quae, nobis molestias unde
                esse!
            </p>
        </div>
        <div class="block">
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro est eaque labore maiores dolores
                voluptatum. In saepe iusto sint consequatur ipsa rem, tempore, itaque sequi quae, nobis molestias unde
                esse!
            </p>
        </div>
        <div class="block">
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro est eaque labore maiores dolores
                voluptatum. In saepe iusto sint consequatur ipsa rem, tempore, itaque sequi quae, nobis molestias unde
                esse!
            </p>
        </div>
        <div class="clearfix"></div>
        <div id="main-block">
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro est eaque labore maiores dolores
                voluptatum. In saepe iusto sint consequatur ipsa rem, tempore, itaque sequi quae, nobis molestias unde
                esse!
            </p>
        </div>
        <div id="sidebar">
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro est eaque labore maiores dolores
                voluptatum. In saepe iusto sint consequatur ipsa rem, tempore, itaque sequi quae, nobis molestias unde
                esse!
            </p>
        </div>
        <ul class="list2">
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
        </ul>
        <div class="position-box">
            <h1>Heading1</h1>
            <h2>Heading2</h2>

        </div>
        <button id="fixed">Buttoon</button>
    </div>
    <div style="margin-top:1000px;"></div>
</body>
</html>

CSS

body {
    background-color:blanchedalmond;
    color: #555555;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: normal;
    line-height: 1.5em;
}

button {
    background-color: #444444;
    color: #fff;
    padding: 10px 5px;

}

button:hover {
    background-color: red;
}

button:active {
    background-color: #fff;
}

a {
    text-decoration: none;
    color: #555555;
}

a:hover {
    color: cyan;
}

a:visited {

}

.clearfix {
    clear: both;
}



.box1 {
    background-color: antiquewhite;
    color:brown;

    border: 5px blue solid;
    border-right: 5px red solid;
    border-left: 8px blue solid;
    border-top: 10px green dotted;
    border-bottom: 1px firebrick double;

    border-bottom-width: 8px;
    border-bottom-style: dashed;

    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;

    margin-top: 20px;

}

.box1 h1 {
    font-family: 'Times New Roman', Times, serif;
    font-weight: 800;
    font-style: italic;
    text-decoration: underline;
    text-transform: uppercase;
    letter-spacing: 1em;
    word-spacing: 2em;

}


.box2 {
    border: 5px dotted #cccccc;
    border-radius: 5px;
    padding: 20px;
    margin: 20px 0px;
    position: relative;
}

.box2 h1 {
    text-align: center;
}


.contain {
    width: 80%;
    margin: auto;

}




.list li {
    list-style-image: url('../image/2.png');
    list-style: square;
}


.block {
    float: left;
    width: 33.3%;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

#main-block {
    float: left;
    width: 70%;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

#sidebar {
    float: right;
    width: 30%;
    border: 1px solid #ccc;
    box-sizing: border-box;
}



.list2 li:nth-child(even) {
    background-color: grey;
}

.position-box {
    width: 500px;
    height: 500px;
    border: 1px solid black;
    position: relative;

}

.position-box h1 {
    position:absolute;
    top: 50px;

}

.position-box h2 {
    position:absolute;
    left: 30px;
    
}

#fixed {
    position: fixed;
    right: 0;
    bottom: 200px; 
}