css学习——浅写小demo

最新推荐文章于 2024-04-03 01:32:53 发布

鸡杂不下面

最新推荐文章于 2024-04-03 01:32:53 发布

阅读量1k

点赞数 6

文章标签：算法深度优先 c++

本文链接：https://blog.csdn.net/qq_52139998/article/details/123740888

版权

记录一下今天下午学习css写的一些小demo

文章目录

- 记录一下今天下午学习css写的一些小demo
一、利用相对、绝对定位实现水平竖直居中
二、利用float实现页面布局
三、利用float实现导航栏元素
四、利用css的3d动画实现正方体
五、利用相对、绝对定位实现轮播图UI

一、利用相对、绝对定位实现水平竖直居中

1.1效果

在这里插入图片描述
1.2实现

<!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">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .mainer {
        margin: 100px auto;
        border: 1px solid black;
        width: 200px;
        height: 200px;
        position: relative;

    }

    /* 实现元素水平竖直居中的方法 */
    /* 由于设置了绝对定位，元素脱离了标准文档流, 所以不能用margin实现水平居中*/
    .mydiv {
        width: 50px;
        height: 50px;
        background-color: red;
        position: absolute;
        /* mydiv上边框与mainer上边框相距50%,不计mainer的padding */
        top: 50%;
        margin-top: -25px;
        /* 同理 */
        left: 50%;
        margin-left: -25px;
    }
</style>

<body>
    <div class="mainer">
        <div class="mydiv"></div>
    </div>
</body>

</html>

二、利用float实现页面布局

2.1效果

在这里插入图片描述

2.2实现

<!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">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        header {
            width: 100%;
            height: 100px;
            /* background-color: blue; */
        }

        section {
            width: 100%;
            height: 500px;
            /* background-color: brown; */
            margin-top: 10px;
            margin-bottom: 10px;
        }

        footer {
            width: 100%;
            height: 100px;
            background-color: black;
        }

        .icon {
            width: 300px;
            height: 100px;
            float: left;
            background-color: aqua;
        }

        .denglu {
            width: 400px;
            height: 30px;
            float: right;
            background-color: red;
            margin-bottom: 20px;
        }

        .nav {
            width: 1000px;
            height: 50px;
            float: right;
            background-color: blueviolet;
        }

        .aid {
            width: 400px;
            height: 500px;
            background-color: burlywood;
            float: left;
        }

        .mainsection {
            width: 1100px;
            height: 500px;
            /* background-color: cadetblue; */
            float: right;
        }

        .information {
            width: 1100px;
            height: 300px;
            background-color: rgb(138, 101, 52);
        }

        .pics {
            width: 1100px;
            height: 180px;
            /* background-color: chocolate; */
            margin-top: 20px;
        }

        .pics div {
            width: 250px;
            height: 180px;
            margin-right: 20px;
            background-color: darkblue;
            float: left;
        }
    </style>
</head>

<body>
    <header>
        <div class="icon"></div>
        <div class="denglu"></div>
        <div class="nav"></div>
    </header>
    <section>
        <div class="aid"></div>
        <div class="mainsection">
            <div class="information"></div>
            <div class="pics">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
    </section>
    <footer></footer>
</body>

</html>

三、利用float实现导航栏元素

3.1效果

在这里插入图片描述

3.2实现

<!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">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        nav {
            width: 960px;
            height: 50px;
            /* border: 1px solid black; */
            margin: 40px auto;
        }

        li {
            float: left;
            width: 240px;
            height: 50px;
            list-style: none;
            line-height: 50px;
            text-align: center;
        }

        li a {
            text-decoration: none;
            display: block;
            width: 240px;
            height: 50px;
            background-color: cornflowerblue;
            color: white;

        }

        li a:hover {
            border-top: 3px solid red;
            position: relative;
            top: -3px;
        }
    </style>
</head>

<body>
    <nav>
        <ul>
            <li><a href="">网站栏目</a></li>
            <li><a href="">网站栏目</a></li>
            <li><a href="">网站栏目</a></li>
            <li><a href="">网站栏目</a></li>

        </ul>
    </nav>
</body>

</html>

四、利用css的3d动画实现正方体

4.1效果

在这里插入图片描述

4.2实现

<!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">
    <title>Document</title>
    <link rel="stylesheet" href="/2.css">
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 200px;
        height: 200px;
        margin: 100px auto;
        border: 1px solid black;
        perspective: 300px;
        position: relative;
    }
    .box p{
        position: absolute;
        left: 0;
        top: 0;
        width: 200px;
        height: 200px;
    }
    .box p:nth-child(1){
        /* 前面 */
        background-color: rgba(218, 64, 44, 0.5);
        transform: translateZ(100px);
    }
    .box p:nth-child(2){
        /* 顶部 */
        background-color: rgba(209, 91, 45, 0.5);
        transform: rotateX(90deg) translateZ(100px);
    }
    .box p:nth-child(3){
        /* 背面 */
        background-color: rgba(189, 127, 224, 0.5);
        transform: rotateX(180deg) translateZ(100px);
    }
    .box p:nth-child(4){
        /* 底面 */
        background-color: rgba(230, 84, 120, 0.5);
        transform: rotateX(90deg) translateZ(100px);
    }
    .box p:nth-child(5){
        background-color: rgba(127, 133, 44, 0.5);
        transform: rotateY(90deg) translateZ(100px);
    }
    .box p:nth-child(6){
        background-color: rgba(78, 22, 124, 0.5);
        transform: rotateY(-90deg) translateZ(100px);
    }   
</style>
<body>
    <div class="box">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
</body>

</html>

五、利用相对、绝对定位实现轮播图UI

5.1效果

在这里插入图片描述

5.2实现

<!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">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .carousel {
            width: 500px;
            height: 320px;
            border: 1px solid black;
            margin: 40px auto;
            position: relative;
        }

        .button {
            width: 30px;
            height: 30px;
            background-color: aliceblue;
            position: absolute;
            border-radius: 50%;
            line-height: 30px;
            font-family: fantasy;
            text-align: center;
        }

        .button:hover {
            background-color: rgba(56, 56, 163, .5);
            color: aliceblue;
            cursor: pointer;
        }

        .leftButton {
            top: 50%;
            margin-top: -15px;
            left: 0;

        }

        .rightButton {
            top: 50%;
            margin-top: -15px;
            right: 0;
        }

        .carousel ul {
            width: 140px;
            height: 30px;
            list-style: none;
            position: absolute;
            bottom: 5px;
            right: 50%;
            margin-right: -70px;
        }

        .carousel ul li {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: rgba(36, 87, 197, .5);
            float: left;
            margin-right: 5px;
        }

        .carousel ul li.current {
            background-color: rgba(75, 219, 183, 0.5);
        }
    </style>
</head>

<body>
    <div class="carousel">
        <img src="/imgages/02.webp" alt="" width="500px" height="320px">
        <p class="button rightButton">&gt;</p>
        <p class="button leftButton">&lt;</p>
        <ul>
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

</html>

鸡杂不下面

关注

6
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
css学习——浅写小demo

记录一下今天下午学习css写的一些小demo文章目录记录一下今天下午学习css写的一些小demo一、利用相对、绝对定位实现水平竖直居中二、利用float实现页面布局三、利用float实现导航栏元素四、利用css的3d动画实现正方体五、利用相对、绝对定位实现轮播图UI一、利用相对、绝对定位实现水平竖直居中1.1效果1.2实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"
复制链接

扫一扫