一个电商首页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电商首页</title>
</head>
<meta charset="UTF-8">
<title>bootstrap</title>
<meta name="viewport" content="width=device-width, user-sscalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="lib/bootstrap/css/style.css">
<script src="lib/jquery-3.3.1.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/index.css">
<body>
<div class="index-public-header">
<div class="public-header-top">
<div class="index-public-container clearfix">
<div class="header-top-left">
<a href="" class="collection">收藏</a>
</div>
<div class="header-top-right">
欢迎来到慕课网！<a href="">[登录]</a><a href="">[免费注册]</a>
</div>
</div>
</div>
<div class="public-header-bottom">
<div class="index-public-container clearfix">
<div class="header-bottom-logo fl">
<a href=""><img src="images/logo/yixun.png" alt="品牌"></a>
</div>
<div class="header-bottom-search fl">
<input type="text" class="search-text fl">
<input type="button" value="搜 索" class="search-btn fr">
</div>
<div class="header-bottom-car fr">
<span class="shopText fl">购物车</span>
<span class="shopNum fl">0</span>
</div>
</div>
</div>
<div class="public-header-nav">
<div class="index-public-container">
<div class="shop-class fl">
<h3>全部商品分类<i></i></h3>
<!-- 暂缺列表 -->
<div class="shop-class-show">
<dl class="class-show-item">
<dt><a href="">手机</a><a href="">数码</a><a class="show-item-bg" href="">合约机</a></dt>
<dd><a href="">荣耀3X</a> <a href="">单反</a><a href="">智能设备</a></dd>
</dl>
<dl class="class-show-item class-active">
<dt><a href="">手机</a><a href="">数码</a><a class="show-item-bg" href="">合约机</a></dt>
<dd><a href="">荣耀3X</a> <a href="">单反</a><a href="">智能设备</a></dd>
</dl>
<dl class="class-show-item">
<dt><a href="">手机</a><a href="">数码</a><a class="show-item-bg" href="">合约机</a></dt>
<dd><a href="">荣耀3X</a> <a href="">单反</a><a href="">智能设备</a></dd>
</dl>
<dl class="class-show-item">
<dt><a href="">手机</a><a href="">数码</a><a class="show-item-bg" href="">合约机</a></dt>
<dd><a href="">荣耀3X</a> <a href="">单反</a><a href="">智能设备</a></dd>
</dl>
<dl class="class-show-item">
<dt><a href="">手机</a><a href="">数码</a><a class="show-item-bg" href="">合约机</a></dt>
<dd><a href="">荣耀3X</a> <a href="">单反</a><a href="">智能设备</a></dd>
</dl>
</div>
<div class="shop-class-list ">
<div class="class-list-container">
<dl class="class-list-item">
<dt><a href="">电脑整机</a></dt>
<dd><a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a></dd>
</dl>
</div>
<div class="class-list-container">
<dl class="class-list-item">
<dt><a href="">电脑整机</a></dt>
<dd><a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a></dd>
</dl>
</div>
<div class="class-list-container">
<dl class="class-list-item">
<dt><a href="">电脑整机</a></dt>
<dd><a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a></dd>
</dl>
</div>
<div class="class-list-container">
<dl class="class-list-item">
<dt><a href="">电脑整机</a></dt>
<dd><a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a></dd>
</dl>
</div>
<div class="class-list-container">
<dl class="class-list-item">
<dt><a href="">电脑整机</a></dt>
<dd><a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a></dd>
</dl>
</div>
<div class="class-list-container">
<dl class="class-list-item">
<dt><a href="">电脑整机</a></dt>
<dd><a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a></dd>
</dl>
<div class="class-list-link">
<a href="">电脑整机频道<span class="list-link-icon"></span></a>
<a href="">硬件/频道<span class="list-link-icon"></span></a>
</div>
</div>
</div>
</div>
<ul class="nav ">
<li ><a href="" class="active">数码城</a></li>
<li><a href="">天黑黑</a></li>
<li><a href="">团购</a></li>
<li><a href="">发现</a></li>
<li><a href="">二手特卖</a></li>
<li><a href="">名品会</a></li>
</ul>
</div>
</div>
</div>
<div class="index-public-banner">
<div class="index-public-container clearfix">
<div class="public-banner-bar">
<a href=""><img src="images/banner/banner-01.jpg" alt=""></a>
</div>
</div>
</div>
<div class="index-public-menu">
<div class="index-public-container clearfix">
<div class="public-menu-title">
<a href=""></a>
<span class="icon"></span>
<h3>家用电脑</h3>
<a href="" class="more">更多>></a>
</div>
<div class="public-menu-left">
<img src="images/banner/banner-02.jpg" alt="">
</div>
<div class="public-menu-right">
<div class="menu-right-col fl">
<div class="menu-right-top">
<div class="right-top-img">
<a href=""><img src="images/banner/banner-03.jpg" alt=""></a></div>
<div class="right-top-text">
<h3>HTC新渴望8系列</h3>
<p>1899元</p>
</div>
</div>
<div class="menu-right-bottom">
<div class="right-bottom-img fl">
<a href=""><img src="images/banner/banner-04.jpg" alt="低音炮"> </a>
</div>
<div class="right-bottom-text fl">
<p>NFC技术一碰轻松 配对！接触屏幕</p>
<h3>￥149.00</h3>
</div>
</div>
</div>
<div class="menu-right-col fl">
<div class="menu-right-top">
<div class="right-top-img">
<a href=""><img src="images/banner/banner-03.jpg" alt=""></a></div>
<div class="right-top-text">
<h3>HTC新渴望8系列</h3>
<p>1899元</p>
</div>
</div>
<div class="menu-right-bottom">
<div class="right-bottom-img fl">
<a href=""><img src="images/banner/banner-04.jpg" alt="低音炮"> </a>
</div>
<div class="right-bottom-text fl">
<p>NFC技术一碰轻松 配对！接触屏幕</p>
<h3>￥149.00</h3>
</div>
</div>
</div>
<div class="menu-right-col fl">
<div class="menu-right-top">
<div class="right-top-img">
<a href=""><img src="images/banner/banner-03.jpg" alt=""></a></div>
<div class="right-top-text">
<h3>HTC新渴望8系列</h3>
<p>1899元</p>
</div>
</div>
<div class="menu-right-bottom">
<div class="right-bottom-img fl">
<a href=""><img src="images/banner/banner-04.jpg" alt="低音炮"> </a>
</div>
<div class="right-bottom-text fl">
<p>NFC技术一碰轻松 配对！接触屏幕</p>
<h3>￥149.00</h3>
</div>
</div>
</div>
<div class="menu-right-col fl">
<div class="menu-right-top">
<div class="right-top-img">
<a href=""><img src="images/banner/banner-03.jpg" alt=""></a>
</div>
<div class="right-top-text">
<h3>HTC新渴望8系列</h3>
<p>1899元</p>
</div>
</div>
<div class="menu-right-bottom">
<div class="right-bottom-img fl">
<a href=""><img src="images/banner/banner-04.jpg" alt="低音炮"> </a>
</div>
<div class="right-bottom-text fl">
<p>NFC技术一碰轻松 配对！接触屏幕</p>
<h3>￥149.00</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="index-public-menu">
<div class="index-public-container clearfix">
<div class="public-menu-title">
<a href=""></a>
<span class="icon"></span>
<h3>食品酒水</h3>
<a href="" class="more">更多>></a>
</div>
<div class="public-menu-left">
<a href=""><img src="images/banner/banner-05.jpg" alt=""></a>
</div>
<div class="public-menu-right">
<div class="menu-right-col fl">
<div class="menu-right-top">
<div class="right-top-img">
<a href=""><img src="images/banner/banner-06.jpg" alt=""></a></div>
<div class="right-top-text">
<h3>HTC新渴望8系列</h3>
<p>1899元</p>
</div>
</div>
<div class="menu-right-bottom">
<div class="right-bottom-img fl">
<a href=""><img src="images/banner/banner-07.jpg" alt="低音炮"> </a>
</div>
<div class="right-bottom-text fl">
<p>康比特 维他保咀 嚼片 10片</p>
<h3>￥100.00</h3>
</div>
</div>
</div>
<div class="menu-right-col fl">
<div class="menu-right-top">
<div class="right-top-img">
<a href=""><img src="images/banner/banner-06.jpg" alt=""></a></div>
<div class="right-top-text">
<h3>HTC新渴望8系列</h3>
<p>1899元</p>
</div>
</div>
<div class="menu-right-bottom">
<div class="right-bottom-img fl">
<a href=""><img src="images/banner/banner-07.jpg" alt="低音炮"> </a>
</div>
<div class="right-bottom-text fl">
<p>康比特 维他保咀 嚼片 20片</p>
<h3>￥200.00</h3>
</div>
</div>
</div>
<div class="menu-right-col fl">
<div class="menu-right-top">
<div class="right-top-img">
<a href=""><img src="images/banner/banner-06.jpg" alt=""></a></div>
<div class="right-top-text">
<h3>HTC新渴望8系列</h3>
<p>1899元</p>
</div>
</div>
<div class="menu-right-bottom">
<div class="right-bottom-img fl">
<a href=""><img src="images/banner/banner-07.jpg" alt="咀嚼片"> </a>
</div>
<div class="right-bottom-text fl">
<p>康比特 维他保咀 嚼片 40片</p>
<h3>￥400.00</h3>
</div>
</div>
</div>
<div class="menu-right-col fl">
<div class="menu-right-top">
<div class="right-top-img">
<a href=""><img src="images/banner/banner-06.jpg" alt=""></a>
</div>
<div class="right-top-text">
<h3>HTC新渴望8系列</h3>
<p>1899元</p>
</div>
</div>
<div class="menu-right-bottom">
<div class="right-bottom-img fl">
<a href=""><img src="images/banner/banner-07.jpg" alt="咀嚼片"> </a>
</div>
<div class="right-bottom-text fl">
<p>康比特 维他保咀 嚼片 60片</p>
<h3>￥600.00</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="index-public-footer">
<p>招纳贤士| 联系我们|客服热线：025-8888888</p>
<p> Copyright © 2006 - 2014 某市公安局备案编号：1234567899</p>
<p><a href=""><img src="images/banner/banner-08.jpg" alt="logo"></a>
<a href=""><img src="images/banner/banner-08.jpg" alt="logo"></a>
<a href=""><img src="images/banner/banner-08.jpg" alt="logo"></a>
<a href=""><img src="images/banner/banner-08.jpg" alt="logo"></a>
</p>
</div>
</body>
</html>
css部分:
/*公共样式*/
*{
font-size: 14px;
}
/*public-header-top部分*/
.index-public-container{
width: 1000px;
margin:auto;
}
.public-header-top{
height: 32px;
background: #f7f7f7;
/*单行文本行高等于元素高度，文本垂直居中*/
line-height: 32px;
}
.header-top-left{
float: left;
}
.header-top-left a{
font-size: 12px;
font-weight: bolder;
}
.header-top-right{
float: right;
}
/*五角星居中*/
.collection{
background: url("../images/icon/wujiaoxing.jpg") left center no-repeat;
padding-left: 19px;
}
.index-public-header a:hover{
color: red;
}
/*public-header-bottom部分*/
.public-header-bottom{
height: 86px;
background: #1d7ad9;
}
.header-bottom-logo{
padding-left: 40px;
padding-top: 18px;
}
.header-bottom-search{
width: 430px;
padding-top: 24px;
margin-left: 100px;
}
.header-bottom-search .search-text{
width:360px;
height: 36px;
/*css hack \9代表所有的ie浏览器*/
line-height: 36px\9;
padding: 0 5px;
border: none;
}
.header-bottom-search .search-btn{
width:70px;
height: 36px;
font-size: 14px;
font-family: "Microsoft YaHei";
background: #ff8c00;
border: none;
margin-left: 0px;
color:#fff;
}
/*购物车*/
.header-bottom-car{
width: 146px;
height: 35px;
background-color: #ff8c00;
margin-top: 24px;
}
.header-bottom-car .shopText{
font-size: 14px;
font-family: "Microsoft YaHei";
color:#fff;
width: 87px;
height: 100%;
border-right:1px solid #e27a00;
line-height: 35px;
background:url("../images/icon/shoppingcar.jpg") no-repeat 10px center;text-indent: 40px;
}
.header-bottom-car .shopNum{
width: 57px;
font-size: 14px;
color:#fff;
border-left:1px solid #ff9c01;
font-family: "Microsoft YaHei";
line-height: 35px;
background: url("../images/icon/jiantou.jpg") no-repeat 34px center;
text-indent: 20px
}
/*头部导航部分*/
.public-header-nav{
height: 36px;
background: #1d7ad9;
color: #fff;
}
.public-header-nav .shop-class{
height: 36px;
width: 190px;
}
.public-header-nav h3{
font-size: 16px;
font-family: "Microsoft YaHei";
color: #fff;
line-height: 36px;
text-align: center;
}
/*内嵌标签没有宽度与高度，要设置为行内块元素*/
.public-header-nav .shop-class i{
display: inline-block;
width: 11px;
height: 7px;
background: url("../images/icon/sanjiao.jpg") no-repeat left center;
overflow: hidden;
margin-left: 11px;
}
.public-header-nav nav{
display: block;
width: 100px;
text-align: center;
height: 36px;
}
.public-header-nav .nav a{
font-size: 14px;
font-family: "Microsoft YaHei";
color:#fff;
display: inline-block;
height: 36px;
padding: 0 36px;
line-height: 36px;
}
.public-header-nav .nav li{
float: left;
}
.public-header-nav .nav .active{
background: #4593fd;
}
/*商品弹出列表*/
.shop-class{
position: relative;
}
.shop-class-show{
position: absolute;left: 0;top: 36px;
}
.shop-class-show .class-show-item{
width: 190px;
height: 63px;
background: #4593fd;
padding:14px 10px;
border-bottom: 1px solid #3487f2;
border-top: 1px solid #5aa1fe;
}
.shop-class-show dt{
height: 22px;
background: url("../images/icon/sanjiao02.jpg") no-repeat right center;
}
.shop-class-show a{
margin-right: 8px;
display: inline-block;
}
.shop-class-show dt a{
font-size: 12px;
font-family: "NSimSun";
color: rgb( 255, 255, 255 );
}
.shop-class-show dd a{
font-size: 12px;
font-family: "SimSun";
color: rgb( 194, 217, 248 );
}
.shop-class-show .show-item-bg{
width:46px;
height:18px;
background: #106ac0;
text-align: center;
border-radius: 6px;
text-decoration: underline;
}
/*class-show-item active状态*/
.shop-class-show .class-active{
background: #fff;
border-left: 1px solid #4593fd;
}
.shop-class-show .class-active a{
color: #000;
}
.shop-class-show .class-active .show-item-bg{
text-decoration: none;
color: #fff;
}
/*弹出的菜单*/
.shop-class-list{
width: 570px;
position: absolute;left: 190px;top: 36px;
border:1px solid #dddddd;
}
.class-list-container{
padding: 5px 20px;
}
.shop-class-list dt dd{
font-size: 12px;
font-family: "SimSun";
color: rgb( 75, 136, 218 );
}
.class-list-item{
border-bottom: 1px solid #e5e5e5;
padding: 8px 0;
}
.shop-class-list dt{
font-weight: bolder;
height: 24px;
line-height: 24px;
}
.class-list-item dd{
padding-left: 68px;
margin-top: -24px;
line-height: 24px;
}
.class-list-item dd a{
margin-right: 14px;
}
.class-list-link a{
display: inline-block;
width: 105px;
height: 26px;
line-height: 26px;
background: #2785e6;
font-size: 12px;
font-family: "SimSun";
color: rgb( 255, 255, 255 );
padding: 0 8px;
margin-right: 10px;
}
.list-link-icon{
display: inline-block;
width: 6px;
height: 10px;
background: url("../images/icon/sanjiao02.jpg") no-repeat left center;
margin-left: 7px;
}
.class-list-link{
padding: 15px 0;
}
/*banner部分*/
.public-banner-bar img{
width: 240px;
height: 325px;
float: right;
}
/*菜单部分*/
.public-menu-title{
height: 44px;
margin-bottom: 15px;
margin-top: 16px;
}
.public-menu-title h3{
font-size: 24px;
font-family: "Microsoft YaHei";
color: rgb( 0, 0, 0 );
float: left;
line-height: 44px;
margin-left: 14px;
}
.public-menu-title span{
display: inline-block;
width: 44px;
height: 44px;
background:url("../images/icon/juxing.jpg") left center no-repeat;
float: left;
}
.public-menu-title .more{
float: right;
font-size: 12px;
font-family: "NSimSun";
color: rgb( 0, 0, 0 );
font-weight: bolder;
margin-top: 28px;
}
/*商品菜单列表*/
/*左侧*/
.index-public-menu .public-menu-left{
width: 190px;
height: 400px;
float: left;
}
.index-public-menu .public-menu-right{
width: 810px;
height: 400px;
float: left;
border: 1px solid #e5e5e5;
border-right: none;
border-bottom: 3px solid #ff7201;
}
/*右侧*/
/*商品菜单列表-上部*/
.menu-right-col{margin-right: -1px;}
.index-public-menu .menu-right-top{
width: 203px;
height: 280px;
border-bottom:1px solid #e5e5e5;
border-right:1px solid #e5e5e5;
text-align: center;
}
.menu-right-top .right-top-img{
width: 203px;
height: 220px;
padding-top: 44px;
}
.right-top-img img{
width: 136px;
height: 156px;
}
.right-top-text{
width: 203px;
padding-bottom: 24px;
}
.index-public-menu .right-top-text h3{
font-size: 16px;
font-family: "Microsoft YaHei";
color: rgb( 0, 0, 0 );
font-weight: bolder;
margin-bottom: 10px;
}
.index-public-menu .right-top-text p{
color: #ff7300;
}
/*商品菜单列表-下部*/
.index-public-menu .menu-right-bottom{
width: 203px;
height: 116px;
border-right: 1px solid #e5e5e5;
}
.menu-right-bottom .right-bottom-img{
width: 100px;
height: 116px;
text-align: center;
line-height: 116px;
}
.menu-right-bottom .right-bottom-text{
width: 99px;
height: 116px;
}
.menu-right-bottom .right-bottom-text p{
font-size: 12px;
font-family: "NSimSun";
color: rgb( 255, 115, 0 );
padding-top: 30px;
}
.menu-right-bottom .right-bottom-text h3{
font-size: 16px;
font-family: "Microsoft YaHei";
color: rgb( 24, 24, 24 );
font-weight: bolder;
}
.index-public-footer{
width: 100%;
height: 224px;
background: #d4d4d4;
margin-top: 42px;
margin-bottom: 8px;
text-align: center;
padding-top: 52px;
}
.index-public-footer p{
font-size: 12px;
font-family: "NSimSun";
color: rgb( 0, 0, 0 );
font-weight: bolder;
line-height: 24px;
}
.index-public-footer a{
display: inline-block;
margin-right: 26px;
}
posted on 2018-08-29 16:26 shidingzhang 阅读(225) 评论(0) 收藏 举报
浙公网安备 33010602011771号