html+css

最新推荐文章于 2024-10-06 23:37:55 发布

2203_75324626

最新推荐文章于 2024-10-06 23:37:55 发布

阅读量46

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/2203_75324626/article/details/130911857

版权

该文章展示了一段HTML和CSS代码，用于创建一个包含上中下三个主要部分的页面布局。中部分别有多个绝对定位的盒子，用于展示不同的内容，如登录表单、时间输入等。CSS中使用了position属性来简化布局，避免了大量使用浮动元素。

摘要由CSDN通过智能技术生成

在这里插入图片描述
使用html+css制作一个简易的布局，这个可以用浮动做，上中下三个大盒子，中间还需要许多盒子，比较麻烦，所以我选择用定位做更简单直接。代码如下

<!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 {
            height: 100px;
            width: 1000px;
        }

        .navleft {
            float: left;
            display: inline-block;
            font-size: 35px;
            height: 100px;
            width: 425px;
            text-align: center;
            background-color: pink;
        }

        .navright {
            float: right;
            display: inline-block;
            height: 50px;
            width: 575px;
        }

        .navrightt {
            float: right;
            right: 0;
            text-align: center;
            font-size: large;
            height: 50px;
            width: 100px;
            background-color: rgb(0, 128, 11);

        }

        .navrightb {
            text-align: center;
            font-size: large;
            margin-left: 5px;
            float: right;
            height: 50px;
            width: 570px;
            background-color: rgb(0, 128, 128);

        }

        .zhong {
            position: relative;
            height: 400px;
            width: 1000px;
        }

        .zhong1 {
            position: absolute;
            left: 0;
            margin-top: 5px;
            margin-bottom: 1px;
            display: inline-block;
            background-color: rgba(238, 255, 0, 0.475);
            height: 400px;
            width: 400px;
        }

        .zhong2 {
            position: absolute;
            top: 0;
            left: 405px;
            /* display: inline-block; */
            margin-bottom: 1px;
            text-align: center;
            line-height: 50px;
            height: 175px;
            width: 450px;
            background-color: rgb(0, 247, 255);
        }

        .zhong3 {
            position: absolute;
            top: 176px;
            left: 405px;
            text-align: center;
            line-height: 30px;
            margin-bottom: 1px;
            height: 125px;
            width: 450px;
            background-color: rgb(0, 242, 255);
        }

        .zhong4 {
            position: absolute;
            left: 405px;
            top: 302px;
            margin-bottom: 1px;
            height: 50px;
            width: 450px;
            background-color: rgb(0, 255, 247);
        }

        .zhong5 {
            position: absolute;
            left: 405px;
            top: 353px;
            margin-bottom: 1px;
            height: 50px;
            width: 600px;
            background-color: pink;
        }

        .zhong6 {
            position: absolute;
            text-align: center;
            right: 0;
            height: 350px;
            width: 145px;
            background-color: blue;
        }

        .zhong6 img {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto auto;
            height: 50px;
            width: 50px;
        }

        .but {
            height: 30px;
            width: 50px;
            background-color: pink;

        }

        .kuai {
            position: absolute;
            bottom: 50px;
            left: 50px;
            height: 175px;
            width: 200px;
            background-color: black;
        }

        .foot {
            height: 50px;
            margin-top: 10px;
            width: 1000px;
            background-color: yellow;
        }

        .q1 {
            position: absolute;
            top: 20px;
            left: 25px;
            height: 20px;
            width: 20px;
            border-radius: 50%;
            border-style: solid;
            border-color: black;
        }

        .q2 {
            position: absolute;
            top: 45px;
            left: 50px;
            height: 10px;
            width: 10px;
            border-radius: 50%;
            border-style: solid;
            border-color: black;
        }

        .q3 {
            position: absolute;
            top: 60px;
            left: 60px;
            height: 5px;
            width: 5px;
            border-radius: 50%;
            border-style: solid;
            border-color: black;
        }

        .sanjiao {
            position: absolute;
            bottom: 225px;
            left: 30px;
            height: 0px;
            width: 0px;
            border: 120px solid transparent;
            border-bottom: 120px solid aqua;
        }
    </style>
</head>

<body>
    <div class="nav">

        <div class="navleft">logo</div>
        <div class=navright>
            <div class="navrightt">English</div>
            <div class="navrightb">导航</div>
        </div>
    </div>
    <div class="zhong">
        <div class="zhong1">
            <div class="q1"></div>
            <div class="q2"></div>
            <div class="q3"></div>
            <div class="sanjiao"></div>
            <div class="kuai"></div>
        </div>
        <div class="zhong2">
            用户名:<input type="text"><br>
            密码:<input type="password"><br>
            <input class="but" type="button" value="登录">&nbsp;&nbsp;&nbsp;&nbsp;<input class="but" type="button"
                value="注册">
        </div>
        <div class="zhong3">
            现在是<input type="datetime"><br>
            今天是<input type="date"><br>
            <del>111111</del>&nbsp;12345
        </div>
        <div class="zhong4"></div>
        <div class="zhong5"></div>
        <div class="zhong6">
            <img src="../前端学习/img.png"></a>
        </div>
    </div>
    <div class="foot"></div>
</body>

</html>