Web_7 电商站首页布局

1 效果演示

电商首页效果.gif

2 CSS技巧

【1】通用CSS样式
编写html之前可以先规范好通用的CSS样式，比如网页的整体布局居中，可以使用container包裹器包裹，设定container的max-width为1080px，使网页自适应浏览器宽度；比如左右浮动的样式、母元素清除浮动的样式；设置多列并列的样式等，然后直接在div中添加类选择器就可以了；
【2】卡片组
把一整块内容放到container中，.col-x使其多列并列；
设置item的padding，将内容作为一个整体设置背景色等样式，使每个卡片有间隔——内容与内容之前的padding间隔；
【3】快捷键
Shift + Ctrl + I // 打开网页控制台
Ctrl + D //多光标同步输入
Shift+Alt + F //代码自动对齐
【4】图片生成器
https://dummyimage.com/1000x500/00bcd4/fff
直接修改网址中的颜色和尺寸即可
【5】添加背景颜色
在网页结构化分时，可以巧妙地给所有元素添加一个透明的背景颜色，这样可以通过颜色的深浅结构清晰的分辨出网页结构

*{
    background: rgba(255, 0, 0, .1); 
}
image.png

3 代码

3.1 index.html

<!DOCTYPE html>
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>香菇街-你的剁手街</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./normalize.css">
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <!--顶部的导航栏-->
    <div class="top-nav">
        <div class="container clear-float">
            <div class="fl">
                <a class="item" href="#">首页</a>
            </div>
            <div class="fr">
                <a class="item" href="#">我的订单</a>
                <a class="item" href="#">收藏夹</a>
                <a class="item" href="#">登录</a>
                <a class="item" href="#">注册</a>
            </div>
        </div>
    </div>
    <!--头部搜索栏-->
    <div class="header">
        <div class="container clear-float">
            <div class="col-2 logo">香菇街</div>
            <div class="col-5 search-bar"><input type="text"><button>搜索</button></div>
            <div class="col-3 cart"><a href="#">我的购物车</a></div>
        </div>
    </div>
    <!--主促销-->
    <div class="main-promote">
        <div class="container clear-float">
            <div class="col-2 cat">
                <div class="item">item / item</div>
                <div class="item">item / item</div>
                <div class="item">item / item</div>
                <div class="item">item / item</div>
                <div class="item">item / item</div>
                <div class="item">item / item</div>
                <div class="item">item / item</div>
                <div class="item">item / item</div>
                <div class="item">item / item</div>
            </div>
            <div class="col-6">
                <img src="./img/slider01.png" alt="">
                <div class="card">
                    <div class="col-5">
                        <img src="./img/slider02.png" alt="">
                    </div>
                    <div class="col-5">
                        <img src="./img/slider03.png" alt="">
                    </div>
                </div>
            </div>
            <div class="col-2 info">
                <div class="login clear-float">
                    <div class="avatar"></div>
                    <!--头像-->
                    <div>你好，欢迎剁手~</div>
                </div>
                <div class="anno">
                    <div class="title">公告</div>
                    <div class="content">
                        Lorem hupajju ddhak molestiae alias fugiat, incidunt illum. Magni ex assumenda veritatis quo
                        vel. Nesciunt magni placeat ipsum quia praesentium?
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta totam quos ducimus veritatis
                        voluptatum distinctio sint, consequatur corrupti vitae. Qui quos id, omnis inventore alias
                        tempore ipsam voluptatibus odit accusantium?</div>
                </div>
            </div>
        </div>
    </div>
    <!--类别促销-->
    <div class="sub-promote">
        <div class="container clear-float">
            <div class="title">女装</div>
            <div class="content">
                <div class="col-2 item">
                    <div class="card"></div>
                </div>
                <div class="col-3 item">
                    <div class="card"></div>
                </div>
                <div class="col-2 item">
                    <div class="card"></div>
                </div>
                <div class="col-3 item">
                    <div class="card"></div>
                </div>
            </div>

        </div>
        <div class="container clear-float">
            <div class="title">美妆</div>
            <div class="content">
                <div class="col-2 item">
                    <div class="card"></div>
                </div>
                <div class="col-3 item">
                    <div class="card"></div>
                </div>
                <div class="col-2 item">
                    <div class="card"></div>
                </div>
                <div class="col-3 item">
                    <div class="card"></div>
                </div>
            </div>

        </div>
        <div class="container clear-float">
            <div class="title">男装</div>
            <div class="content">
                <div class="col-2 item">
                    <div class="card"></div>
                </div>
                <div class="col-3 item">
                    <div class="card"></div>
                </div>
                <div class="col-2 item">
                    <div class="card"></div>
                </div>
                <div class="col-3 item">
                    <div class="card"></div>
                </div>
            </div>

        </div>
    </div>
    <!--页脚-->
    <div class="footer">
        <div class="container clear-float">
            <a href="#">链接</a>
            <a href="#">链接</a>
            <a href="#">链接</a>
            <a href="#">链接</a><br>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </div>
    </div>
</body>

</html>

3.2 index.css

/*通用CSS，包括网页字体、颜色，container容器居中、大小，浮动，清除浮动，并列等*/
*{
    -webkit-box-sizing: border-box; /*以border开始算宽度*/
    box-sizing: border-box;
    transition:background 500ms;
}
body{
    font-size:14px;
    color:#444;
    background:#f9f9f9;
    line-height:1.7;
}
a{
    text-decoration: none;
}
/*图片宽度为母元素的宽度*/
img{
    display:block;
    max-width:100%;
}
.container{
    max-width:1080px;/*若窗口大于1080，就显示为1080；若窗口小于1080，就自适应为窗口的大小*/
    margin:0 auto;/*居中*/
}
.fl{
    float:left;
}
.fr{
    float:right;
}
/*清除浮动，否则高度为0，无法设置css样式*/
.clear-float:after,
.clear-float:before{
    content:" ";
    display:block;
    clear:both;
}
/*统一设置并列样式*/
.col-1,.col-2,.col-3,
.col-4,.col-5,.col-6,
.col-7,.col-8,.col-9{
    display:block;
    position:relative;
    float:left;
    min-height:1px;
}
.col-1{
    width:10%;
}
.col-2{
    width:20%;
}
.col-3{
    width:30%;
}
.col-4{
    width:40%;
}
.col-5{
    width:50%;
}
.col-6{
    width:60%;
}
.col-7{
    width:70%;
}
.col-8{
    width:80%;
}
.col-9{
    width:90%;
}
/*顶部导航栏样式*/
.top-nav{
    background:#eee;
}
.top-nav .item{
    display:inline-block;
    padding:6px 10px;
    color:#666;
}
.top-nav .item:hover{
    color:#333;
}
/*头部搜索栏*/
.header{
    padding:20px 0;
}
.header .logo{
    font-size:30px;
    color:#dd182d;
}
.header .search-bar{
    border:2px solid #dd182d;
    background:#dd182d;
}
.header .search-bar input,
.header .search-bar button{
    display:block;
    float:left;
    border:0;
    padding:10px;
    outline:0;
}
.header .search-bar input{
    width:80%;
}
.header .search-bar button{
    width:20%;
    background:#dd182d;
    color:#fff;
}
.header .search-bar input:focus{
    box-shadow: inset 0 0 2px 2px rgba(0,0,0,.3);
}
.header .search-bar button:hover{
    cursor:pointer;
    background:#ce1829;

}
.header .cart{
    text-align: center;
}
.header .cart a{
    float:right;/*设置浮动后默认为块级元素*/
    padding:10px;
    background:#fff;
    border:2px solid #eee;
    width:80%;
    color:#dd182d;
}
/*主促销区*/
.main-promote{
    background:#dedede;
} 
.main-promote .cat{
    background:#6e6568;
    color:#fff;

}
.main-promote .cat .item{
    padding:14px 20px;
}
.main-promote .cat .item:hover{
    background:rgba(0,0,0,.1);
}
.main-promote .info{
    padding:10px;
    background:#fff;
    color:#888;
    box-shadow:0 1px 2px rgba(0,0,0,.1);
}
.main-promote .info .avatar{
    width:50px;
    height:50px;
    background:#777;
    border-radius:50%;
    float:left;
    margin-right:10px;
}
.main-promote .info >*{
    margin-bottom:10px;
}
/*类别促销区*/
.sub-promote .title:before{/*小红杠*/
    content:"";
    display:inline-block;
    vertical-align:middle;/*纵向居中*/
    width:5px;
    height:30px;
    background:#dd182d;
    margin-right:10px;
}
.sub-promote .title{
    font-size:22px;
}
.sub-promote .item{
    padding:5px;
}
.sub-promote .card
{
    height:300px;
    background:#ccc;
    border-radius: 5px;
    box-shadow: 0 2px 2px rgba(0,0,0,.1);
}
.sub-promote .card:hover{
    background:rgba(212, 208, 208, 0.842)
}
.sub-promote .card2{
    background:#7e7edd;
}
/*页脚*/
.footer{
    margin-top:30px;
    padding:30px 0;
    text-align: center;
    color:#999;
    background:#eee;
    
}
.footer a{
    color:#999;
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • Interview-Questions(web)
    前端开发知识点 HTML&CSS对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型...
    Hebborn_hb阅读 4,272评论 0赞 1
  • CSS3的学习之路
    课程目标: 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握C...
    繁华退却阅读 5,701评论 0赞 0
  • 第一阶段
    day01­_起源和结构 结构：Xhtml xml 表现：CSS 行为：DOM ECMAScript 以上都属于W...
    Sakura_明妃阅读 4,994评论 0赞 1
  • Github_web_1
    一:在制作一个Web应用或Web站点的过程中，你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 5,019评论 0赞 1
  • 面试题
    •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么? ...
    Simon_s阅读 6,602评论 0赞 8

友情链接更多精彩内容