前端自学笔记04

最新推荐文章于 2024-06-07 09:12:39 发布

adjwefkgpw

最新推荐文章于 2024-06-07 09:12:39 发布

阅读量159

点赞数

分类专栏：前端自学笔记

前端自学笔记专栏收录该内容

41 篇文章 0 订阅

订阅专栏

前端自学笔记04

1、盒子水平居中
margin-left:auto;
margin-right:auto;
或
margin:auto;
这里写图片描述

2、外边距合并
这里写图片描述
产品图片使用插入图片，Logo常使用背景图片，背景图片调整位置非常地方便

但一般不用*号以提高速度

3、padding不会撑开盒子的情况

不设置盒子宽度（比如说子盒子），对其设置padding将不会撑开盒子。子盒子块不设置宽，将默认与父盒子块同宽
这里写图片描述
4、圆角

border-radius:50%；
正圆
如果是有4个参数则控制从左上角顺时针四个角
如果有两个参数则第一个参数控制左上角及其对角，第二个控制右上角及其对角
5、阴影
常用颜色参数：
rgba(0,0,0,0.1)

transition:all 1s;渐隐1s效果
5、浮动
这里写图片描述
浮动最早是用来控制图片，以便达到其他元素（特别是文字）实现环绕图片的效果。可以让多个div在一行内显示。

这里写图片描述

代码

//一列固定宽度且居中
        <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <style type="text/css">
            .top{
                /*确定版心*/
                width: 900px;
                margin: auto;
                height: 80px;
                background-color: #eee;
                border: 1px dashed #ccc;
                margin-bottom: 10px;
            }
            .banner{
                height: 120px;
                width: 900px;
                background-color: #eee;
                border: 1px dashed #ccc;
                margin: auto;
                margin-bottom: 10px;
            }
            .main{
                height: 600px;
                width: 900px;
                background-color: #eee;
                border: 1px dashed #ccc;
                margin: auto;
                margin-bottom: 10px;
            }
            .footer{
                height: 120px;
                width: 900px;
                background-color: #eee;
                border: 1px dashed #ccc;
                margin: auto;

            }
        </style>
    </head>
    <body>
    <div class="top">1</div>
    <div class="banner">2</div>
    <div class="main">3</div>
    <div class="footer">4</div>

    </body>
    </html>

//左右型布局
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <style type="text/css">
        .top{
            width: 900px;
            height: 80px;
            background-color: pink;
            margin: auto;
        }
        .banner{
            width: 900px;
            height: 150px;
            background-color: purple;
            margin: auto;
        }
        .main{
            width: 900px;
            height: 500px;
            background-color: skyblue;
            margin: auto;
        }
        .left{
            width: 298px;
            height: 500px;
            background-color: white;
            margin: auto;
            float: left;
            border: 1px solid black;
        }
        .right: {
            width: 598px;
            height: 500px;
            background-color: deeppink;
            margin: auto;
            float: right;
            border: 1px solid pink;
        }

        .footer{
            width: 900px;
            height:120px;
            background-color: black;
            margin: auto;
        }

        </style>
    </head>
    <body>
    <div class="top"></div>
    <div class="banner"></div>
    <div class="main">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="footer"></div>

    </body>
    </html>

//通栏
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <style type="text/css">
        * {
            margin: 0;
            padding: 0;

        }
        .top {

            height: 80px;/*不用指定宽度*/
            background-color: pink;

        }
        .banner {
            width: 900px;
            height: 150px;
            background-color: purple;
            margin: auto;
        }
        .banner li{
            float: left;
            width: 225px;
            height: 150px;

        }
        .top-inner {
            width: 900px;
            height: 80px;
            background-color: green;
            margin: auto;
        }
        .main {
            width: 900px;
            height: 500px;
            background-color: skyblue;
            margin: auto;
        }
        .left {
            width: 298px;
            height: 500px;
            background-color: white;
            margin: auto;
            float: left;
            border: 1px solid black;
        }
        .two{
            background-color: red;
        }
        .four{
            background-color: yellow;
        }
        .right {
            width: 598px;
            height: 500px;
            background-color: deeppink;
            margin: auto;
            float: right;
            border: 1px solid pink;
        }

        .footer {
            width: 900px;
            height:120px;
            background-color: black;
            margin: auto;
        }

        </style>
    </head>
    <body>
    <div class="top">
        <div class="top-inner">
            23
        </div>
    </div>
    <div class="banner">
        <ul>
            <li></li>
            <li class="two"></li>
            <li></li>
            <li class="four"></li>
        </ul>
    </div>
    <div class="main">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="footer"></div>

    </body>
    </html>