开发“小米商城官网首页”（静态页面）

一，项目题目：开发”小米商城官网首页”（静态页面）

二，项目需求

1.熟练运用所学知识还原小米商城官网首页静态页面* 不需要做动态效果，只实现静态页面， 后期学完js再回来实现动态效果

三，项目布局

四，效果对比

　　目前的官网图片和小编做的图片对比

官网图片

小编做的效果图

五，代码附上

链接：https://pan.baidu.com/s/1EVyF8RIgRXFvEIHQf42Pow密码：zqs4

index.html

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>xiaomi</title><link type="text/css" rel="stylesheet" href="css/index.css"></head>
<body><div class="wrap"><!--顶部导航栏--><div class='topBar'><div class = 'container1'><!--导航条--><div class="topBar-nav"><a href='#'>小米商城</a><span class="sep">|</span><a href='#'>MIUI</a><span class="sep">|</span><a href='#'>loT</a><span class="sep">|</span><a href='#'>云服务</a><span class="sep">|</span><a href='#'>金融</a><span class="sep">|</span><a href='#'>有品</a><span class="sep">|</span><a href='#'>小爱开放平台</a><span class="sep">|</span><a href='#'>政企服务</a><span class="sep">|</span><a href='#'>Select Region</a></div><!--购物车--><div class='topBar-cart'><a href="#"><span class="icon"></span><span class="shop-cart">购物车（0）</span></a></div><!--用户信息--><div class='topBar-message'><a href="#">登录</a>   <span class="sep">|</span><a href="#">注册</a>      <span class="sep">|</span><a href="#">消息通知</a></div></div></div><div class="header"><div class = 'container2'><!--小米logo--><div class="header-logo"><a href="#"><img class='logo' src='img/logo.png' alt='小米图标'></a></div><!--第二行 导航栏--><div class="header-nav"><ul><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><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 class="header-search"><label for="search"></label><input type="text" name="search" id="search"><span class="hot-words"><a href="#">小米8 </a><a href="#">小米MIX 2S </a></span><input type="submit" value="" id="submit">                   </div></div></div><div class='content'><div class = 'container3'><!--内容选择列表 前面部分--><div class='con-up'><div class="up-1"><ul><li><a href="#">手机 电话卡</a><span>></span></li><li><a href="#">电视 盒子</a><span>></span></li><li><a href="#">笔记本 平板</a><span>></span></li><li><a href="#">家电 插线板</a><span>></span></li><li><a href="#">出行 穿戴</a><span>></span></li><li><a href="#">智能 路由器</a><span>></span></li><li><a href="#">电源 配件</a><span>></span></li><li><a href="#">个护 儿童</a><span>></span></li><li><a href="#">耳机 音响</a><span>></span></li><li><a href="#">生活 箱包</a><span>></span></li></ul></div><div class='up-2'><a href='#'><img src="img/xiaomi.jpg" alt="内容图片" style="width: 1245px;height: 465px"></a></div></div><!--下部分--><div class='con-down'><div class='down-1'><ul><li><div class='p-1'></div><p>选购手机</p></li><li><div class='p-2'></div><p>企业团购</p></li><li><div class='p-3'></div><p>F码通道</p></li><li><div class='p-4'></div><p>不限量卡</p></li><li><div class='p-5'></div><p>以旧换新</p></li><li><div class='p-6'></div><p>话费充值</p></li></ul></div><div class='down-2'><ul><li><a href='#'><img src="img/xiaomiMIX 2S.jpg" alt='小米图片'</a></li><li><a href='#'><img src="img/hongmi6.jpg" alt='红米图片'</a></li><li><a href='#'><img src="img/saodijiqiren.jpg" alt='扫地机器人图片'</a></li></ul></div></div></div>   </div>        <div class="shop1"><div class = 'container4'><div class='left'>小米闪购</div><div class='right'><a href = '#' ><img src='img/right.jpg' alt='左右图'></a></div></div></div><div class='shop2'><!--选购引导-->    <div class = 'container5'><div class='advertising'><ul><li><a href = '#' ><img src='img/01.jpg' alt='闪购图1'></a></li><li><a href = '#' ><img src='img/02.jpg' alt='闪购图2'></a></li><li><a href = '#' ><img src='img/03.jpg' alt='闪购图3'></a></li><li><a href = '#' ><img src='img/04.jpg' alt='闪购图4'></a></li><li><a href = '#' ><img src='img/05.jpg' alt='闪购图5'></a></li></ul></div></div></div></div><!--右侧固定导航栏--><div class="back-top"><ul id='right-ul'><li><div class='fixed-1'></div><p>个人中心</p></li><li><div class='fixed-2'></div><p>联系客服</p></li><li><div class='fixed-3'></div><p>购物车</p></li><li><div class='fixed-4'></div><p>返回顶部</p></li></ul></div><!--底部内容--><div class='footer'><div class = 'container6'><!--小米logo--><div class="footer-logo"><a href="#"><img class='logo' src='img/logo.png' alt='小米图标'></a></div><!--第一行字--><div class="footer-one"><a href='#'>小米手机</a><span class="sep">|</span><a href='#'>MIUI</a><span class="sep">|</span><a href='#'>米家</a><span class="sep">|</span><a href='#'>多看</a><span class="sep">|</span><a href='#'>游戏</a><span class="sep">|</span><a href='#'>路由器</a><span class="sep">|</span><a href='#'>米粉卡</a><span class="sep">|</span><a href='#'>政企服务</a><span class="sep">|</span><a href='#'>小米天猫店</a><span class="sep">|</span><a href='#'>隐私政策</a><span class="sep">|</span><a href='#'>问题反馈</a><span class="sep">|</span><a href='#'>廉政举报</a><span class="sep">|</span><a href='#'>Select Region</a></div><!--第二行字--><div class="footer-two"><a href='#'>@mi.com</a><a href='#'>京ICP证110507号 京ICP证110507号 京ICP证110507号 京ICP证110507号</a></div><!--第三行字--><div class="footer-three"><a href='#'>违法和不良信息举报电话： </a><a href='#'>185-0130-1238， </a><a href='#'>本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</a></div><!--第4行图--><div class="footer-photo">       <ul><li><a href = '#' ><img src='img/footer1.png' alt='广告1'></a></li><li><a href = '#' ><img src='img/footer2.png' alt='广告2'></a></li><li><a href = '#' ><img src='img/footer3.png' alt='广告3'></a></li><li><a href = '#' ><img src='img/footer4.png' alt='广告4'></a></li><li><a href = '#' ><img src='img/footer5.png' alt='广告5'></a></li></ul></div></div><p>探索黑科技，小米为发烧而生！</p></div></body>
</html>

indesx.css

*{padding: 0;margin: 0;
}.wrap{width: 100%;/*有父子关系的margin 防止外边距合并*/overflow: hidden;/*设置透明度*//*background-color: rgba(245,245,245,0.98);*/
}ul>li{list-style: none;
}a{text-decoration: none;
}.topBar{height: 40px;line-height: 40px;font-size: 12px;background-color: black;
}.topBar a{color:#b0b0b0; /*字体颜色*/
}.topBar a:hover{    /* 伪类选择器 hover鼠标悬停时超链接状态*/color: white;
}.topBar .sep{color: #424242;margin: 0 2px;  /*外边距*/
}.container1{width: 1225px;overflow: hidden;margin: 0 auto;
}.topBar-nav{float: left;
}.topBar-cart,.topBar-message{float: right;
}.topBar-cart .icon{     /*给购物车添加背景图片*/background: url("../img/shop1.png") 3px 24px;width: 35px;height: 22px;display: inline-block;/*行内块元素 同时具有行内和和块级元素，和其他元素在一行，距离都可以设置*/position: relative;top:6px;
}.topBar-cart a{/*display: block; !*块级元素,每个块级元素都从新的一行开始，距离都可设置*!*/margin-left: 15px;padding: 0 15px;
}.topBar-cart a:hover{background-color: white;color: rgba(255,103,0,0.98);
}.header{height: 100px;line-height: 100px;overflow: hidden;
}.container2{width: 1225px;overflow: hidden;margin: 0 auto;
}.header-logo,.header-nav{float: left;height: 100px;
}.header-logo .logo{margin-right: 10px;margin-top: 20px;
}.header-search{float: right;position: relative;
}
.header-nav ul li{float: left;margin: 0 auto;padding: 0 10px;color: #000000;
}.header-nav ul li a{color: #333;font-size: 16px;
}.header-nav ul li a:hover{color: rgba(255,103,0,0.98);
}.header-search input[type="text"]{height: 44px;width: 243px;border: 1px solid #e0e0e0;margin-right: -1px;
}.header-search input[type="text"]:hover{border: 1px solid #b0b0b0;
}.header-search input[type="text"]:focus{    /*获取焦点时的样式*/outline:none;  /*轮廓是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用*/
}.hot-words{font-size: 12px;position: absolute;right: 40px;
}.hot-words a{background-color: #eee;color: #757575;padding: 3px 6px;position: relative;top: 2px;right: 16px;
}.hot-words a:hover{background-color: rgba(255,103,0,0.98);color: white;
}.header-search input[type='submit']{height: 45px;width: 45px;background: url("../img/search1.png") no-repeat 3px 6px; border: 1px solid #E0E0E0;position: relative;top: 17px;cursor: pointer;left: -5px;
}.header-search input[type="submit"]:hover{background: url("../img/search2.png") no-repeat 8px 8px;background-color: rgba(255,107,0,0.98);
}.content .con-up .up-1{background-color: rgba(0,0,0,0.6);width: 240px;position: absolute;
}.container3{width: 1225px;overflow: hidden;margin: 0 auto;
}.con-up ul:before,.con-up:after{/*用子盒子来填充父盒子 解决浮动产生的问题*/content: "";height: 26px;display: block;
}.con-up ul li{padding: 10px 25px;
}.con-up ul li:hover{background-color: #ff6700;
}.con-up ul li a{color: white;
}.con-up ul li span{float: right;color: white;
}.con-down{overflow: hidden;padding-top:10px ;
}
.con-down .down-1{width: 240px;overflow: hidden;background-color: #665e57;float: left;
}.con-down ul{overflow: hidden;
}.con-down .down-1 ul li{float: left;width: 78px;height: 83px;border: 1px solid #665e57;text-align: center;
}.down-1 ul li p{color: #b0b0b0;position: relative;font-size: 15px;
}.down-1 ul li p:hover{color: white;
}.down-1 .p-1{background: url("../img/tubiao.png") no-repeat center;background-size: 50px; height: 60px;}.down-1 .p-2{background: url("../img/tubiao.png") no-repeat center;background-size: 50px; height: 60px;}.down-1 .p-3{background: url("../img/tubiao.png") no-repeat center;background-size: 50px; height: 60px;}.down-1 .p-4{background: url("../img/tubiao.png") no-repeat center;background-size: 50px; height: 60px;}.down-1 .p-5{background: url("../img/tubiao.png") no-repeat center;background-size: 50px; height: 60px;}.down-1 .p-6{background: url("../img/tubiao.png") no-repeat center;background-size: 50px; height: 60px;}.con-down .down-2{float: left;
}.con-down .down-2 ul li{float: left;
}.down-2 img{width: 315px;height: 170px;margin-left: 13px;
}.down-2 img:hover{box-shadow: 0 5px 1px #b0b0b0; /*box-shadow 向框添加一个或多个阴影*/
}.shop1{height: 58px;line-height: 58px;font-size: 22px;color: #333333;
}.shop1 .left .right:hover{color: white;
}.container4{width: 1225px;overflow: hidden;margin: 0 auto;
}.shop1 .left{float: left;margin-top: 15px;font-size: 22px;font-weight: 200;line-height: 58px;color: #000000;
}
.shop1 .right{float: right;margin-top: 15px;
}
.shop2{margin: 0 auto;width: 1240px;height: 339px;padding-top: 39px;border-top-width: 1px;color: #e53935;
}.container5{width: 1225px;overflow: hidden;margin: 0 auto;
}
.shop2 ul li{float: left;width: 234px;margin-right: 11px;/*padding-right: 1px;*/color: #333;
}
.shop2 ul li a{color: #000000;font-size: 100%;}.shop2 ul li a:hover{ color: orange;
}.back-top{position: fixed;right: 0;top: 400px;background-color: white;
}.back-top ul li{font-size: 14px;padding: 10px;border: 1px solid #E0E0E0;
}.back-top ul li:hover{color: #757575;cursor: pointer;
}.back-top ul li p{text-align: center;padding-top: 5px;
}.back-top .fixed-1{background: url("../img/fixed.png") no-repeat center;background-size: 30px; height: 30px;
}.back-top .fixed-2{background: url("../img/erji.png") no-repeat center;background-size: 30px;height: 30px;
}.back-top .fixed-3{background: url("../img/shopping_cart.png") no-repeat center;background-size: 30px;height:30px ;
}.back-top .fixed-4{background: url("../img/back_top.png") no-repeat center;background-size: 30px;height:30px ;
}.footer{padding: 30px 0;font-size: 12px;background-color: #fafafa;
}.container6{width: 1225px;overflow: hidden;margin: 0 auto;
}.footer-logo a{margin-right: 10px;float: left;width: 57px;height: 57px;
}
.footer-one .footer-two .footer-two{float: left;
}.footer-photo{float: right;
}.footer-photo ul li{float: right;width: 83;height: 28px;margin-left: 0px;/*padding-right: 1px;*/color: #333;
}
.footer-photo ul li a{color: #000000;font-size: 100%;}.footer-photo ul li a:hover{ color: orange;
}.footer p{padding: 30px 0;text-align: center;color: #333;font-size: 14px;background: #fff;font-family: "楷体";min-width: 1226px;
}

转载于:https://www.cnblogs.com/wj-1314/p/9384758.html

开发“小米商城官网首页”（静态页面）相关推荐

HTML5期末大作业：商城网站设计——小米商城官网首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码
HTML5期末大作业:商城网站设计--小米商城官网首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码常见网页设计 ...
HTML5期末大作业：网页设计——小米商城官网首页(1页) HTML+CSS+JavaScript web期末作业设计网页_清新淡雅个人网页大学生网页设计作业成品
HTML5期末大作业:网页设计--小米商城官网首页(1页) HTML+CSS+JavaScript web期末作业设计网页_清新淡雅个人网页大学生网页设计作业成品常见网页设计作业题材有个人. 美食 ...
网页设计作业——小米商城官网首页(1页) HTML+CSS+JavaScript web期末作业设计网页_清新淡雅个人网页大学生网页设计作业成品
HTML5期末大作业:网页设计--小米商城官网首页(1页) 文章目录 HTML5期末大作业:网页设计--小米商城官网首页(1页) 一.作品展示二.文件目录三.代码实现四.完整源码一.作品展示 ...
【Web】HTML+CSS（No.55）实现小米官网首页静态效果
模仿实现小米官网首页静态布局需要素材点击图片联系我或私信.评论效果图 HTML代码 <!DOCTYPE html> <html lang="en"> & ...
仿qq音乐官网部分静态页面
简介: 这是我在刚学html和css的时候看着qq音乐官网自己敲的部分静态页面, 一共有五个静态页面,如下图首页部分: 歌手部分: 新碟部分: 排行榜部分(可播放音乐): 分类歌单部分:
web前端项目（一）做一个网易考拉官网常规静态页面 + 页面放到http服务 + 前后端分离
1 新建文件夹分css img 文件夹 index.html 静态页面 2 将本地做的静态页面放到 http 服务 localhost:8080 设置nodejs静态目录 npm install e ...
仿小米商城官网首页模板(HTML+CSS)
一.效果展示二.目录结构三.代码实现
HTML5期末大作业：商城网站设计——防锤子手机商城官网首页模板(HTML+CSS+JavaScript ) 电商网页HTML代码
HTML5期末大作业:商城网站设计--防锤子手机商城官网首页模板HTML+CSS+JavaScript 电商网页HTML代码学生网页课程设计期末作业下载商城网页大学生网页设计制作成临近期末, 你 ...
HTML5期末大作业：商城网站设计——防锤子手机商城官网首页模板(HTML+CSS+JavaScript ) 电商网页HTML代码...
HTML5期末大作业:商城网站设计--防锤子手机商城官网首页模板HTML+CSS+JavaScript 电商网页HTML代码学生网页课程设计期末作业下载商城网页大学生网页设计制作成临近期末, 你 ...
小米商城官网（登录页，首页，详情页，我的购物车页，我的订单页，确认订单页）HTML+CSS+JS
文章目录前言一.登录页二.首页三.我的购物车页四.我的订单页五.确认订单页六.详情页七.整体结构和效果图总结前言仿小米商城官网项目是本人实训内容,实训老师带着做的首页和登录页,本 ...

开发“小米商城官网首页”（静态页面）

一，项目题目：开发”小米商城官网首页”（静态页面）

二，项目需求

三，项目布局

四，效果对比

官网图片

小编做的效果图

五，代码附上

index.html

indesx.css

开发“小米商城官网首页”（静态页面）相关推荐

最新文章

热门文章