Web_7 电商站首页布局
2020-01-13 本文已影响0人
kerooooo
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;
}
