页面基础布局

CSS基础样式

清除基本样式
**清除基本样式**
浮动设置
图片: 在这里插入图片描述
浮动设置
在这里插入图片描述

  1. 代码片段
  1. CSS布局

    *{
    padding: 0;
    margin: 0;
    }
    ul,ol{
    list-style: none;
    }
    a{
    text-decoration: none;
    color: inherit;
    }
    .fl{
    float: left;
    }
    .fr{
    float: right;
    }
    .clearfix::after{
    content: “”;
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
    }
    .center{
    width: 1090px;
    margin: 0 auto;
    }
    .header{
    height: 60px;
    padding-top: 20px;
    }
    .header .logo{
    width: 167px;
    height: 44px;
    }
    .header .nav{
    width: 690px;
    height:44px;
    }
    .header .nav > li{
    float: left;
    margin-left: 50px;
    line-height: 44px;
    color: #646464;
    font-size: 14px;
    }
    .banner{
    position: relative;
    }
    .banner > ul img{
    width: 100%;
    }
    .banner .banner-list{
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    }
    .banner .banner-list li{
    height: 8px;
    width: 8px;
    border-radius: 50%;
    border: 2px solid #fff;
    float: left;
    margin: 0 6px;
    }
    .banner .banner-list .active{
    background-color: #fff;
    }

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页