电商官网静态页面

其他 2020-03-24 15:28:17 阅读次数: 0

作为一个前端开发，基础页面布局和样式是必备，我们拿电商具体（模块、丰富度）都足够

在这里插入图片描述

仿小米官网静态页面

小米静态官网预览地址

html部分

<body>
    <div id="app">
        <div class="fix-tool">
            <a target="_blank" href="https://blog.csdn.net/jbj6568839z">导航1</a>
            <a target="_blank" href="https://blog.csdn.net/jbj6568839z">导航2</a>
            <a target="_blank" href="https://blog.csdn.net/jbj6568839z">导航3</a>
            <a target="_blank" href="https://blog.csdn.net/jbj6568839z">导航4</a>
            <a target="_blank" href="https://blog.csdn.net/jbj6568839z">导航5</a>
        </div>
        <div class="main-header">
            <div class="main-nav">
                <div class="list">
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">小米商城</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">MIUI</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">IoT</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">金融</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">有品</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">小爱开放平台</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">企业团购</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">资质证照</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">协议规则</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">下载app</a>
                </div>
                <div class="login">
                    <div class="item">登陆</div>
                    <div class="item">注册</div>
                    <div class="item">消息通知</div>
                </div>
            </div>
        </div>
        <div class="main-body">
            <!-- 盒子一  -->
            <div class="container-1">
                <img src="./img/logo-1.jpg">
                <div class="nav-list">
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">小米手机 </a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">Redmi 红米</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">电视</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">笔记本</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">家电</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">路由器</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">智能硬件</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">服务</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">社区</a>
                </div>
                <input type="text" placeholder="小米电视 小米音响">
                <a class="hid-content" target="_blank" href="https://blog.csdn.net/jbj6568839z">
                    <div class="item">
                        <img src="./img/hid-1.jpg" alt="">
                        <p>小米全面屏电视 E55A</p>
                        <p>1799元</p>
                    </div>
                    <div class="item">
                        <img src="./img/hid-1.jpg" alt="">
                        <p>小米全面屏电视 E55A</p>
                        <p>1799元</p>
                    </div>
                    <div class="item">
                        <img src="./img/hid-1.jpg" alt="">
                        <p>小米全面屏电视 E55A</p>
                        <p>1799元</p>
                    </div>
                    <div class="item">
                        <img src="./img/hid-1.jpg" alt="">
                        <p>小米全面屏电视 E55A</p>
                        <p>1799元</p>
                    </div>
                    <div class="item">
                        <img src="./img/hid-1.jpg" alt="">
                        <p>小米全面屏电视 E55A</p>
                        <p>1799元</p>
                    </div>
                    <div class="item">
                        <img src="./img/hid-1.jpg" alt="">
                        <p>小米全面屏电视 E55A</p>
                        <p>1799元</p>
                    </div>
                </a>
            </div>
            <!-- 盒子二  -->
            <div class="container-2">
                <ul class="left-nav">
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">手机 电话卡</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">电视 盒子</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">笔记本 显示器 平板</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">家电 插线板</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">出行 穿戴</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">智能 路由器</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">电源 配件</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">健康 配件</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">耳机 音箱</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">生活 箱包</a>
                    <div class="hid-content">
                        
                    </div>
                </ul>
                <div id="slider-box" class="slider-box slider-box-1">
                    <div class="switch">
                        <span class="btn" id="per" onclick="pre()">左</span>
                        <span class="btn" id="next" onclick="next()">右</span>
                    </div>
                    <ul class="nav">
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>
            <!-- 盒子三  -->
            <div class="container-3">
                <div class="nav-list">
                    <div class="item">
                        <img class="icon"
                            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48">
                        <span>小米秒杀</span>
                    </div>
                    <div class="item">
                        <img class="icon"
                            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48">
                        <span>小米秒杀</span>
                    </div>
                    <div class="item">
                        <img class="icon"
                            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48">
                        <span>小米秒杀</span>
                    </div>
                    <div class="item">
                        <img class="icon"
                            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48">
                        <span>小米秒杀</span>
                    </div>
                    <div class="item">
                        <img class="icon"
                            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48">
                        <span>小米秒杀</span>
                    </div>
                    <div class="item">
                        <img class="icon"
                            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48">
                        <span>小米秒杀</span>
                    </div>
                </div>
                <img class="img-con-3" src="./img/con-3-1.jpg">
                <img class="img-con-3" src="./img/con-3-2.jpg">
                <img class="img-con-3" src="./img/con-3-3.jpg">
            </div>
            <!-- 盒子四  -->
            <div class="container-4">
                <div class="box">
                    <div class="title">小米闪购</div>
                    <div class="content">
                        <div class="item item-1">
                            <div class="img"></div>
                            <p class="name">小米净水器500G 白色</p>
                            <p>感应出泡，高效清洁</p>
                            <div class="price"><span class="price-now">888元</span><span class="price-last">1120元</span>
                            </div>
                        </div>
                        <div class="item item-2">
                            <div class="img"></div>
                            <p class="name">小米净水器500G 白色</p>
                            <p class="desc">感应出泡，高效清洁</p>
                            <div class="price"><span class="price-now">888元</span><span class="price-last">1120元</span>
                            </div>
                        </div>
                        <div class="item item-3">
                            <div class="img"></div>
                            <p class="name">小米净水器500G 白色</p>
                            <p class="desc">感应出泡，高效清洁</p>
                            <div class="price"><span class="price-now">888元</span><span class="price-last">1120元</span>
                            </div>
                        </div>
                        <div class="item item-4">
                            <div class="img"></div>
                            <p class="name">小米净水器500G 白色</p>
                            <p class="desc">感应出泡，高效清洁</p>
                            <div class="price"><span class="price-now">888元</span><span class="price-last">1120元</span>
                            </div>
                        </div>
                        <div class="item item-5">
                            <div class="img"></div>
                            <p class="name">小米净水器500G 白色</p>
                            <p class="desc">感应出泡，高效清洁</p>
                            <div class="price"><span class="price-now">888元</span><span class="price-last">1120元</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 盒子五  -->
            <div class="container-5">
                <img src="./img/banner-2.jpg" alt="">
            </div>
            <!-- 盒子六  -->
            <div class="container-6">
                <div class="box">
                    <div class="title">
                        <span>手机</span>
                        <span>查看全部</span>
                    </div>
                    <div class="content">
                        <img class="phone-img" src="./img/phone-logo.jpg" alt="">
                        <div class="phone-box">
                            <div class="item">
                                <img src="./img/phone-1.jpg" alt="">
                                <p class="name">小米CC9 Pro</p>
                                <p class="desc">1亿像素 五摄四像</p>
                                <p class="price">2799元起</p>
                            </div>
                            <div class="item">
                                <img src="./img/phone-1.jpg" alt="">
                                <p class="name">小米CC9 Pro</p>
                                <p class="desc">1亿像素 五摄四像</p>
                                <p class="price">2799元起</p>
                            </div>
                            <div class="item">
                                <img src="./img/phone-1.jpg" alt="">
                                <p class="name">小米CC9 Pro</p>
                                <p class="desc">1亿像素 五摄四像</p>
                                <p class="price">2799元起</p>
                            </div>
                            <div class="item">
                                <img src="./img/phone-1.jpg" alt="">
                                <p class="name">小米CC9 Pro</p>
                                <p class="desc">1亿像素 五摄四像</p>
                                <p class="price">2799元起</p>
                            </div>
                            <div class="item">
                                <img src="./img/phone-1.jpg" alt="">
                                <p class="name">小米CC9 Pro</p>
                                <p class="desc">1亿像素 五摄四像</p>
                                <p class="price">2799元起</p>
                            </div>
                            <div class="item">
                                <img src="./img/phone-1.jpg" alt="">
                                <p class="name">小米CC9 Pro</p>
                                <p class="desc">1亿像素 五摄四像</p>
                                <p class="price">2799元起</p>
                            </div>
                            <div class="item">
                                <img src="./img/phone-1.jpg" alt="">
                                <p class="name">小米CC9 Pro</p>
                                <p class="desc">1亿像素 五摄四像</p>
                                <p class="price">2799元起</p>
                            </div>
                            <div class="item">
                                <img src="./img/phone-1.jpg" alt="">
                                <p class="name">小米CC9 Pro</p>
                                <p class="desc">1亿像素 五摄四像</p>
                                <p class="price">2799元起</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 小米官网的中间部分大同小异，甚至是粘贴复制盒子六都可以还愿的差不多，跳过！ -->
            <!-- 盒子七  -->
            <div class="container-7">
                <img src="./img/banner-1.jpg" alt="">
            </div>
        </div>
        <div class="main-footer">
            <div class="container">
                <div class="nav">
                    <div class="item">预约维修服务</div>
                    <div class="item">7天无理由退货</div>
                    <div class="item">15天免费换货</div>
                    <div class="item">满150元包邮</div>
                    <div class="item" >520余家售后网点</div>
                </div>
                <div class="feature-box">
                    <div class="feature">
                        <dl class="item">
                            <dt>帮助中心</dt>
                            <dd>账户管理</dd>
                            <dd>账户管理</dd>
                            <dd>账户管理</dd>
                        </dl>
                        <dl class="item">
                            <dt>帮助中心</dt>
                            <dd>账户管理</dd>
                            <dd>账户管理</dd>
                            <dd>账户管理</dd>
                        </dl>
                        <dl class="item">
                            <dt>帮助中心</dt>
                            <dd>账户管理</dd>
                            <dd>账户管理</dd>
                            <dd>账户管理</dd>
                        </dl>
                        <dl class="item">
                            <dt>帮助中心</dt>
                            <dd>账户管理</dd>
                            <dd>账户管理</dd>
                            <dd>账户管理</dd>
                        </dl>
                        <dl class="item" style="border-right: 1px solid #ccc;">
                            <dt>帮助中心</dt>
                            <dd>账户管理</dd>
                            <dd>账户管理</dd>
                            <dd>账户管理</dd>
                        </dl>
                    </div>
                    <div class="service">
                        <p class="center">WX: j565017805</p>
                        <p class="center">CSDN:https://blog.csdn.net/jbj6568839z<br/>欢迎点赞！！！</p>
                        <p class="center">博健</p>
                    </div>
                </div>
            </div>
        </div>
        <img class="footer-img" src="./img/footer.png" alt="">
    </div>

    <script src="./js/index.js"></script>
</body>

CSS部分

#app{
    min-width: 1226px;
    margin-right: auto;
    margin-left: auto;
}
img{
    display: block;
}
.center{
    text-align: center;
}
/* 头部 */
.main-header{
    position: relative;
    z-index: 30;
    height: 40px;
    font-size: 12px;
    color: #b0b0b0;
    background: #333;
}
.main-header .main-nav{
    width: 1226px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
}
.main-nav .list,.login{
    display: flex;
}
.main-nav .list .item{
    color: #b0b0b0;
    margin-right: 15px;
}
.main-nav .list .item:hover{
    color: #fff;
}
.main-nav .login .item{
    color: #b0b0b0;
    margin-left: 15px;
}
/* 主内容 */
.main-body{
    width: 100%;
}
/* 盒子一 */
.container-1{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1226px;
    margin: 0 auto;
    height: 100px;
}
.container-1 img{
    display: block;
    width: 52px;
    height: 52px;
}
.container-1 .hid-content{
    position: absolute;
    top: 100px;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 0;
    background: #fff;
    overflow: hidden;
    transition: height .28s;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.container-1 .hid-content .item{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.container-1 .hid-content .item img{
    width: 160px;
    height: 110px;
    border-right: 1px solid #ddd;
}
.container-1 .nav-list .item{
    color: #333;
    font-size: 16px;
    transition: color .3s ease-in-out;
    margin-right: 15px;
}
.container-1 .nav-list .item:hover{
    color: #f40;
}
.container-1:hover  .hid-content{
    height: 200px;
    border-top: 1px solid #ccc;
    box-shadow: 0 3px 5px rgba(0,0,0,0.4);    
}
.container-1 input{
    width: 223px;
    height: 48px;
    border: 1px solid #e0e0e0;
    text-align: right;
    padding: 10px;
}

/* 盒子二 */
.container-2{
    position: relative;
    width: 1226px;
    margin: 0 auto;
}
.container-2 .left-nav{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 0;
    height: 460px;
    border: 0;
    color: #fff;
    background: rgba(105,101,101,.6);
}
.container-2 .left-nav:hover .hid-content{
    display: block;
}
.container-2 .left-nav .item{
    position: relative;
    display: block;
    padding-left: 30px;
    height: 42px;
    line-height: 42px;
    width: 230px;
    color: #fff;
    font-weight: 350;
}
.container-2 .left-nav .hid-content{
    position: absolute;
    top: 0;
    left: 230px;
    width: 400px;
    height: 100%;
    border: 1px solid #ccc;
    padding: 30px;
    background: #fff;
    display: none;
}
.container-2 .left-nav .item:hover{
    background: #ff6700;
}
.container-2 .slider-box{
    position: relative;
    width: 1226px;
    height: 460px;
}
.container-2 .slider-box-1{
    background: url('../img/1.jpg');
    background-size: cover;
}
.container-2 .slider-box-2{
    background: url('../img/2.jpg');
    background-size: cover;
}
.container-2 .slider-box-3{
    background: url('../img/3.jpg');
    background-size: cover;
}
.container-2 .slider-box-4{
    background: url('../img/4.jpg');
    background-size: cover;
}
.container-2 .slider-box-5{
    background: url('../img/5.jpg');
    background-size: cover;
}
.container-2 .slider-box .switch{
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -20px;
    width: 996px;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.container-2 .slider-box .switch .btn{
    width: 30px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: rgba(0,0,0,0.1);
    color: #eee;
}
.container-2 .slider-box .switch .btn:hover{
    color: #F40;
    cursor: pointer;
}
.container-2 .slider-box .nav{
    position: absolute;
    right: 50px;
    bottom: 0;
    width: 90px;
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.container-2 .slider-box .nav li{
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #bbb;
}

/* 盒子三 */
.container-3{
    display: flex;
    justify-content: space-between;
    margin: 20px auto 0;
    width: 1226px;
    padding-bottom: 20px;
}
.container-3 .nav-list{
    width: 234px;
    height: 170px;
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    text-align: center;
    color: #fff;
    background: #5f5750;
}
.container-3 .nav-list .item{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 78px;
    height: 85px;
    transition: all .28s;
}
.container-3 .nav-list .item:hover{
    cursor: pointer;
    opacity: 0.5;
}
.container-3 .nav-list .item .icon{
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto 4px;
}
.container-3 .img-con-3{
    width: 316px;
    height: 170px;
}

/* 盒子四 */
.container-4{
    width: 100%;
    background: #f5f5f5;
}
.container-4 .box{
    width: 1226px;
    margin: 0 auto;
}
.container-4 .box .title{
    font-size: 22px;
    line-height: 58px;
}
.container-4 .box .content{
    display: flex;
    justify-content: space-between;
}
.container-4 .box .content .item{
    width: 234px;
    height: 399px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.container-4 .box .content .item .img{
    width: 200px;
    height: 200px;
}
.container-4 .box .content .item .name{
    font-size: 16px;
    color: #000;
}
.container-4 .box .content .item .desc{
    font-size: 12px;
    color: #aaa;
    margin-top: 5px;
}
.container-4 .box .content .item .price{
    margin-top: 15px;
}
.container-4 .box .content .item .price .price-now{
    color: #f40;
}
.container-4 .box .content .item .price .price-last{
    color: #CCC;
    text-decoration: line-through;
    margin-left: 2px;
}
.container-4 .box .content .item .img{
    background: url('../img/con-4-1.jpg') center no-repeat;
    background-size: 200px 200px;
}
.container-4 .box .content .item{
    background: #fff;
}
.container-4 .box .content .item-1{
    border-top: 1px solid palevioletred;
}
.container-4 .box .content .item-2{
    border-top: 1px solid red;
}
.container-4 .box .content .item-3{
    border-top: 1px solid green;
}
.container-4 .box .content .item-4{
    border-top: 1px solid orange;
}
.container-4 .box .content .item-5{
    border-top: 1px solid blue;
}

/* 盒子五 */
.container-5{
    background: #f5f5f5;
    padding: 16px 0;
}
.container-5 img{
    width: 1226px;
    height: 120px;
    margin: 0 auto;
}

/* 盒子六 */
.container-6{
    background: #f5f5f5;
}
.container-6 .box{
    width: 1226px;
    margin: 0 auto;
}
.container-6 .box .title{
    display: flex;
    justify-content: space-between;
    font-size: 22px;
    line-height: 58px;
}
.container-6 .box .content{
    display: flex;
    justify-content: space-between;
}
.container-6 .box .content .phone-img{
    width: 234px;
    height: 634px;
}
.container-6 .box .content .phone-box{
    width: 978px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.container-6 .box .content .phone-box .item{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 234px;
    height: 310px;
    background: #fff;
    padding: 20px 0;
}
.container-6 .box .content .phone-box .item img{
    width: 160px;
    height: 160px;
}
.container-6 .box .content .phone-box .item .name{
    margin-top: 10px;
    margin-bottom: 3px;
}
.container-6 .box .content .phone-box .item .desc{
    line-height: 24px;
    color: #bbb;
}
.container-6 .box .content .phone-box .item .price{
    margin-top: 15px;
    font-size: 16px;
    color: #f40;
}

/* 盒子七 */
.container-7{
    background: #f5f5f5;
    padding: 16px 0;
}
.container-7 img{
    width: 1226px;
    height: 120px;
    margin: 0 auto;
}

.main-footer{

}
.main-footer .container{
    width: 1226px;
    margin-right: auto;
    margin-left: auto;
}
.main-footer .container .nav{
    display: flex;
    justify-content: space-between;
    height: 80px;
    padding: 27px 0;
    border-bottom: 1px solid #ccc;
}
.main-footer .container .nav .item{
    width: 243px;
    text-align: center;
    transition: color .28s;
}
.main-footer .container .nav .item:hover{
    color: #f40;
    cursor: pointer;
}
.main-footer .container .nav .item:not(:last-child){
    border-right: 1px solid #ccc;
}
.main-footer .container .feature-box{
    display: flex;
    justify-content: space-between;
}
.main-footer .container .feature-box .feature{
    display: flex;
    padding: 30px 0;
}
.main-footer .container .feature-box .feature .item{
    width: 180px;
}
.main-footer .container .feature-box .feature .item dt{
    height: 50px;
    line-height: 50px;
    font-size: 16px;
}
.main-footer .container .feature-box .feature .item dd{
    line-height: 30px;
    color: rgba(0,0,0,0.6);
}
.main-footer .container .feature-box .service{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 250px;
    padding: 30px 0;
}
.main-footer .container .feature-box .service p:nth-child(1){
    margin: 0 0 5px;
    font-size: 22px;
    line-height: 1;
    color: #ff6700;
}
.main-footer .container .feature-box .service p:nth-child(2){
    font-size: 12px;
    margin-top: 5px;
    margin-bottom: 20px;
}
.main-footer .container .feature-box .service p:nth-child(3){
    border: 1px solid #ff6700;
    background: #fff;
    color: #ff6700;
    width: 118px;
    height: 28px;
    font-size: 12px;
    line-height: 28px;
    cursor: pointer;
}
.footer-img{
    width: 1226px;
    height: auto;
    margin: 0 auto;
}

.fix-tool{
    position: fixed;
    top: 55%;
    display: flex;
    flex-direction: column;
    width: 60px;
    height: 300px;
    background: #fff;
    left: 50%;
    margin-left: 613px;
    border: 1px solid #ccc;
}
.fix-tool a{
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
}
.fix-tool a:hover{
    background: rgba(0,0,0,0.2);
}

注意如果粘贴过去的代码和示例不一样，那可能是因为我对一些标签样式进行了初始化，消除了诸如a标签，li标签等默认样式。

  • 创建basic.css文件
  • 将下方代码粘贴进去
  • 在html中用 link标签引入
/*公共样式--开始*/
html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select {
    margin: 0;
    padding: 0;
}
*{box-sizing: border-box;}
html, body {
    min-height: 100%;
}
body {
    font-family: "Microsoft YaHei";
    font-size:14px;
    color:#333;
}
h1, h2, h3, h4, h5, h6{font-weight:normal;}
ul,ol {
    list-style: none;
}
 
img {
    border: none;
    vertical-align: middle;
}
 
a {
    text-decoration: none;
    color: #232323;
}
 
table {
    border-collapse: collapse;
    table-layout: fixed;
}
 
input, textarea {
    outline: none;
    border: none;
}
 
textarea {
    resize: none;
    overflow: auto;
}
 
.clearfix {
    zoom: 1;
}
.clearfix:after {
    content: ".";
    width: 0;
    height: 0;
    visibility: hidden;
    display: block;
    clear: both;
    overflow:hidden;
}
 
.fl {
    float: left
}
 
.fr {
    float: right
}
 
.tl {
    text-align: left;
}
 
.tc {
    text-align: center
}
 
.tr {
    text-align: right;
}
 
.ellipse {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.inline{
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

如果帮助到了您，不妨去我的github仓库点个star吧～

点击传送门进入代码仓库

点击star

在这里插入图片描述

好像一个循序善诱的老奶奶。。。谢谢大家

PS：作为静态网页，练习的主要是布局能力，即DIV+CSS结合后的能力

我也考虑过在这基础上加上js（jQ）的代码更贴近真实的网页，更多的交互与否取决于你们的需要，如果对你们有帮助，请留言吧～

余光cornerLight
发布了263 篇原创文章 · 获赞 40 · 访问量 6万+
私信 关注

猜你喜欢

转载自blog.csdn.net/jbj6568839z/article/details/103462393
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
NEFU 117 素数个数的位数
Closest Common Ancestors (Lca,tarjan)
ELK部署
【转载】Hive笔记整理（三）
SQL语句（一）基本表的定义
关于Java web开发中的MySQL的事务语句
MFC创建自定义窗体
如何用一句话激怒程序员？
《逆袭大学》文摘——9.4 基础和应用的平衡中找到大学的节奏
【spring源码分析】@Value注解原理
每日归档
更多
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022