使用HTML+CSS仿写小米官网首页

通过学习，仅使用HTML+CSS仿写小米首页，以下是我的制作过程。

一.项目准备

1.使用sublime编辑器

2.下载素材

二.页面结构

三.效果图

四.具体实现

1）.HTML部分

1.通过外链样式将创建好的 index.css文件导入到html文件中

<link rel="stylesheet" type="text/css" href="index.css">

2.导航栏部分

① 小米logo ② 编写导航栏标题

 <div id="wrapper"><!--头部  logo nav --><div id="header"><div class="logo"></div><div class="nav"><li>Phones</li><li>Mi Pad</li><li>Mi TV</li><li>Mi Band</li><li>Mi Power Bank</li><li>Headphones</li><li>Store</li></div></div><!-- bannner -->

3.中间部分图片分区

<div id="container"><div class="adv"></div><div class="goods"><div class="left"><h1>Mi 4i</h1><p>Innovation made compact</p><img src="data:image/11.png" /></div><div class="middle"><h1>MIUI</h1><p>Redefining Android.</p><img src="data:image/22.jpg" /></div><div class="right"><h1>Mi Headphones</h1><p>Our first audiophile-grade headphones.</p><img src="data:image/33.jpg" /></div></div></div>

4.尾部

                <div id="footer"><div style="float:left"><li>Store About us Management Contact us Privacy Policy User Agreement</li><div class="bt"><li><img src="data:image/i1.png" /></li><li><img src="data:image/i3.png" /></li><li><img src="data:image/i2.png" /></li></div></div>  <div style="float:left" id="bt2"><li>Copyright2010-2015 Xiaomi.All Rights Reserved</li><div class="select">Global Home<img src="data:image/sg_10.png"></div></div>

2）.CSS部分

1.清除误差设置默认值

*{margin:0;padding:0;list-style: none;
}

2.设置字体

body{font-family: "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;
}

3.导航栏分区样式

#wrapper{width:1000px;margin:0 auto;
}#header{height:80px;
}#header .logo{float:left;width: 60px;height:61px;background-image: url(image/logo.jpg);margin-top: 10px;margin-left: 50px;
}#header .nav{float:right;margin-top: 40px;margin-right: 50px;
}#header .nav li{float:left;list-style: none;font-size: 18px;color:#6d6d6d;border-right: 1px solid #dfdfdf;padding-right: 15px;padding-left: 15px;
}#header .nav li:last-child {border:0;}

4.导航栏标题下悬浮效果

#header .nav li:hover{border-bottom: 2px solid #FF4A00;cursor:pointer;
}

5.中间部分图片导入

#container .adv{height:550px;background-image: url(image/dianyuan.jpg);background-position: center;border-top: 1px solid #ff4a00;
}

6.设置三张小图的布局

#container .goods h1{font-size: 18px;
}#container .goods p{margin-top: 10px;margin-bottom: 10px;color:#434A45;
}

7.第一张小图的格式及浮动布局

#container .goods .left{padding-top: 30px;text-align: center;float:left; width: 330px;border-bottom: 1px solid #d6d6d6;border-right: 1px solid #d6d6d6;height:280px;
}

8.第二张小图的格式及浮动布局

#container .goods .middle{padding-top: 30px;text-align: center;float:left; width: 330px;border-bottom: 1px solid #d6d6d6;height:280px;
}

3.第三张小图的格式及浮动布局

#container .goods .right{padding-top: 30px;text-align: center;float:left; padding-left: 20px;border-bottom: 1px solid #d6d6d6;border-left:1px solid #d6d6d6;height:280px;
}

4.尾部布局

#footer{margin-bottom: 200px;float: left;border-left: 1px solid #d6d6d6;
}
#footer .bt li{float: left;}
.select{float: right;padding-left: 50px;border: 1px solid #d6d6d6;width: 150px;height: 30px;padding-top: 5px;
}
.select img{margin-left: 30px;
}

使用HTML+CSS仿写小米官网首页相关推荐

仿写小米官网简单的HTML+CSS练习
说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...
仿写小米官网右边工具导航栏
说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...
前端实战：仿写小米官网第一天
前端实战的第一天小米官网目前效果: 实现功能: 导航栏,首页切换,无淡入淡出效果的轮播图,搜索功能,产品展示栏下滑代码(便于记录,将js.css和html糅合在了一起): <!DOCTYP ...
html+css仿写NIKE官网静态页面
第一次较完整的网页,没有动画,纯静态,没有调式各种窗口大小,谷歌浏览器缩放90%为正常比例部分效果图 html <!DOCTYPE html> <html lang="e ...
仿写小米官网（登录、注册页面、首页、详情页、购物车）
功能介绍各网页公用功能返回顶部调用jquery的方法实现效果,页面滚动超过任意位置时右侧出现返回顶部按钮,点击后平滑返回顶部注册用户需要填写手机号.昵称.密码且勾选同意协议,如果是合法数据且 ...
HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(HTML+CSS)~动漫主题html5网页模板-HTML期末作业课程设计期末大作业动漫主题html5网页模板-html5网页设计源码...
HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(DIV+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没 ...
HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(HTML+CSS)~动漫主题html5网页模板-HTML期末作业课程设计期末大作业动漫主题html5网页模板-html5网页设计源码
HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(DIV+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没 ...
【Web】HTML+CSS（No.55）实现小米官网首页静态效果
模仿实现小米官网首页静态布局需要素材点击图片联系我或私信.评论效果图 HTML代码 <!DOCTYPE html> <html lang="en"> & ...
div+css静态网页设计游戏网站设计——仿阴阳师游戏官网首页(1页) 学生动手游页设计模板下载网游大学生HTML网页制作作品简单游戏网页设计成品 dreamweaver学生网站模板
HTML5期末大作业:仿阴阳师游戏网站设计--仿阴阳师游戏官网首页(1页) 学生动手游页设计模板下载网游大学生HTML网页制作作品简单游戏网页设计成品 dreamweaver学生网站模板常见网页 ...
HTML5期末大作业：仿阴阳师游戏网站设计——仿阴阳师游戏官网首页(1页) 学生动手游页设计模板下载网游大学生HTML网页制作作品简单游戏网页设计成品 dreamweaver学生网站模板
HTML5期末大作业:仿阴阳师游戏网站设计--仿阴阳师游戏官网首页(1页) 学生动手游页设计模板下载网游大学生HTML网页制作作品简单游戏网页设计成品 dreamweaver学生网站模板常见网页 ...