CSS练习

效果

CSS练习_第1张图片

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; 
}



你可能感兴趣的:(前端,css,前端,html)