准备
- CDN(http://www.bootcdn.cn/)中搜索normalize的网址(https://cdn.bootcss.com/normalize/7.0.0/normalize.css),保存成 .css文件(名字为:nomalize.css,)。这个文件用来:统一浏览器样式。
- 下载并安装Sublime Text Build 3143 x64 Setup.exe。
- 自定义安装Sublime Text的插件(我们必须用到 EMMET 智能插件,高效便捷),可以自行百度推荐插件。
- iconfont 字体图标 (http://iconfont.cn):
进入网站后,选择需要的字体图标加入购物车,完成后点击网页右侧 购物车 ,选择 下载代码 下载;
解压下载的压缩包,文件内容包含字体文件(.eot .svg .ttf .woff)、css样式文件(iconfont.css)、demo示例文件(一般使用demo_fontclass.html 其中每个图标下的代码就是图标对应的class名)。 - 新建文件夹mi——>建三个子文件夹css,js,img,分别放置 .css,.js,图片。
- 将准备好的小米图标.png放到img文件夹下,nomalize.css放在css文件夹下。
- 新建 mi.html,mi.css(放在css文件夹中)。
- 将 iconfont字体图标 中的各类型文件放到 文件夹mi 中的各子文件夹中。
需要修改iconfont.css中的路径:
使用时给元素添加class(iconfont是必须的 ,另一个就是图标对应的class),例如
<span class="iconfont icon-caigou-xianxing"></span>
Sublime Text操作技巧
- ! + Tab 软件自动写出HTML基本框架
- ctrl + / 添加/解除注释
- 多窗口编辑:View——>Layout——>Columns:2 (快捷键 Alt+Shift+2)
- Ctrl + 点击 多行编辑(编辑后按Esc退出多行编辑)
- ul>li>a + Tab:写出
<ul><li><a href=""></a></li></ul>
过程
- 在 mi.html 中引入.css文件,包括 mi.css 和 iconfont.class
- 画出层级关系,明确分为几块,理清思路
- 广告位
html中:
<a class="bd" href="#"></a>
css中:
.bd{
display: block;
height: 120px;
background: url(../img/bd.png);
background-size: cover;
}
- 通用 安全宽度的盒子
html中:
<div class="top-nav"><div class="container"></div></div>
css中:
.container{width: 1226px; margin: 0 auto;}
- 预定义样式
/*左浮动*/
.fl{ float: left; }
/*右浮动*/
.fr{ float: right; }
/*清除浮动的class*/
.clearfix:after{
content: '';
display: block;
height: 0;
visibility: hidden;
clear: both;
}
- 顶部导航栏
- 左侧导航列表
<ul class="fl top-nav-left">
<li class="fl"><a href="#">小米商城</a></li>
<li class="fl"><a href="#">MIUI</a></li>
<li class="fl"><a href="#">IoT</a></li>
<li class="fl"><a href="#">云服务</a></li>
<li class="fl"><a href="#">水滴</a></li>
<li class="fl"><a href="#">金融</a></li>
<li class="fl"><a href="#">有品</a></li>
<li class="fl"><a href="#">Selecrt Region</a></li>
</ul>
.top-nav{ backgroud-color: #333; }
.top-nav li{
height: 40px;
text-align: center;
line-height: 40px;
}
.top-nav a{
font-size: 12px;
padding: 0 10px;
border-right: 1px solid #3e3e3e;
color: #999;
}
/*最后一个li中a 标签的边框去掉*/
.top-nav li:last-of-type a{ border: none; }
.top-nav a:hover{ color: #fff; }
- 右侧导航列表
<div class="fr cart-box">
<a href="#" class="cart-btn">
<i class="iconfont icon-caigou-xianxing">购物车(0)</i>
</a>
</div>
<ul class="fr">
<li class="fr"><a href="#">登录</a></li>
<li class="fr"><a href="#">注册</a></li>
<li class="fr"><a href="#">消息通知</a></li>
</ul>
/*购物车按钮*/
.top-nav a.cart-btn{
display: block;
height: 40px;
line-height: 40px;
padding: 0 30px;
border: none;
background-color: rgba(255,255,255,.1);
}
.cart-box:hover .cart-btn{
background-color: #fff;
color: #ff6700;
}
.cart-box .icon-caigou-xianxing{
font-size: 20px;
vertical-align: -3px;
font-weight: 600;
}
- 购物车
<div class="fr cart-box">
<a href="#" class="cart-btn"><i class="iconfont icon-caigou-xianxing"></i>购物车(0)</a>
<div class="cart-lists">
购物车中还没有商品,赶紧选购吧!
</div>
</div>
/*购物车清单*/
.cart-btn{
background: rgba(255,255,255,.1);
}
.cart-lists{
display: none;
z-index: 9;
position: absolute;
right: 0;
top: 40px;
width: 320px;
height: 100px;
text-align: center;
line-height: 100px;
background-color: #fff;
color: #333;
font-size: 14px;
box-shadow: 0 2px 10px #dddbdb;
}
.cart-box:hover .cart-lists{
display: block;
}
- logo
<h1 class="fl logo">
<a href="#">小米科技</a>
</h1>
<div class="fl hot">
<a href="#"></a>
</div>
.logo{
margin: 3px 15px 0 0;
width: 54px;
}
.logo a{
display: block;
height: 54px;
text-indent: -9999px;
background: url(../img/mi-logo.png) no-repeat center;
background-size: 54px;
background-color: #ff6700;
}
.hot a{
display: block;
width: 160px;
height: 60px;
background: url(../img/hot.gif) no-repeat center;
background-size: auto 60px;
}
- nav
<!--导航-->
<ul class="nav fl">
<li class="fl"><a href="#">小米手机</a></li>
<li class="fl"><a href="#">红米</a></li>
<li class="fl"><a href="#">笔记本</a></li>
<li class="fl"><a href="#">电视</a></li>
<li class="fl"><a href="#">盒子</a></li>
<li class="fl"><a href="#">新品</a></li>
<li class="fl"><a href="#">路由器</a></li>
<li class="fl"><a href="#">智能硬件</a></li>
<li class="fl"><a href="#">服务</a></li>
<li class="fl"><a href="#">社区</a></li>
</ul>
/*nav*/
.nav li{margin-left: 20px;}
.nav>li>a{
display: block;
height: 60px;
line-height: 60px;
}
.nav>li>a:hover{color: #ff6700;}
- search
<!--搜索-->
<div class="search-bar fr">
<form class="fl">
<input class="search" type="text">
<div class="quick-link">
<a href="#">红米5 Plus</a>
<a href="#">小米Note 3</a>
</div>
</form>
<a class="fl search-btn" href=""><i class="iconfont icon-sousuo"></i></a>
</div>
/*search*/
.search-bar{margin-top: 3px;}
.search-bar form{
position: relative;
widows: 260px;
}
.search{
box-sizing: border-box;
padding:0 10px;
width: 260px;
height: 54px;
border: 1px solid #ccc;
}
.search:focus{
outline: none;
border: 1px solid #ff6700;
}
.search-btn{
display: block;
box-sizing: border-box;
margin-left: -1px;
width: 55px;
height: 54px;
text-align: center;
line-height: 54px;
border: 1px solid #ccc;
}
.search-btn .icon-sousuo{
font-size: 20px;
}
.search-btn:hover{
background-color: #ff6700;
color: #fff;
}
.quick-link{
position: absolute;
right: 10px;
top: 16px;
}
.quick-link a{
font-size: 12px;
background-color: #eee;
padding:0 5px;
}
.quick-link a:hover{
background-color: #ff6700;
color: #fff;
}
- banner
<div class="banner">
<ul class="banner-imgs">
<li class="active"><a href="#" ><img src="img/banner_01.jpg" alt="01"/></a></li>
<li><a href="#"><img src="img/banner_02.jpg" alt="02"/></a></li>
<li><a href="#"><img src="img/banner_03.jpg" alt="03"/></a></li>
<li><a href="#"><img src="img/banner_04.jpg" alt="04"/></a></li>
<li><a href="#"><img src="img/banner_05.jpg" alt="05"/></a></li>
<li><a href="#"><img src="img/banner_06.jpg" alt="06"/></a></li>
</ul>
<a href="#" class="arrow arrow-left">
<i class="iconfont icon-shangyiyehoutuifanhui"></i>
</a>
<a href="#" class="arrow arrow-right">
<i class="iconfont icon-xiayiyeqianjinchakangengduo"></i>
</a>
<div class="indicator">
<ul class="clearfix">
<li class="fl active"><a href="#"></a></li>
<li class="fl"><a href="#"></a></li>
<li class="fl"><a href="#"></a></li>
<li class="fl"><a href="#"></a></li>
<li class="fl"><a href="#"></a></li>
<li class="fl"><a href="#"></a></li>
</ul>
</div>
</div>
/*banner*/
.banner-bar{position: relative;}
.banner-imgs li{
display: none;
}
.banner-imgs li.active{
display: block;
}
.banner-imgs img{
display: block;
width: 100%;
}
- 树形导航
<div class="nav-pills">
<ul>
<li><a href="#">手机 电话卡<i class="iconfont icon-xiayiyeqianjinchakangengduo"></i></a></li>
<li><a href="#">电视 盒子<i class="iconfont icon-xiayiyeqianjinchakangengduo"></i></a></li>
<li><a href="#">笔记本<i class="iconfont icon-xiayiyeqianjinchakangengduo"></i></a></li>
<li><a href="#">智能 家电<i class="iconfont icon-xiayiyeqianjinchakangengduo"></i></a></li>
<li><a href="#">健康 家具<i class="iconfont icon-xiayiyeqianjinchakangengduo"></i></a></li>
<li><a href="#">出行 儿童<i class="iconfont icon-xiayiyeqianjinchakangengduo"></i></a></li>
<li><a href="#">路由器 手机配件<i class="iconfont icon-xiayiyeqianjinchakangengduo"></i></a></li>
<li><a href="#">移动电源 插线板<i class="iconfont icon-xiayiyeqianjinchakangengduo"></i></a></li>
<li><a href="#">耳机 音响<i class="iconfont icon-xiayiyeqianjinchakangengduo"></i></a></li>
<li><a href="#">生活 米兔<i class="iconfont icon-xiayiyeqianjinchakangengduo"></i></a></li>
</ul>
</div>
/*树形导航*/
.nav-pills{
position: absolute;
left: 0;
top: 0;
width: 234px;
height:440px;
padding-top: 20px;
background-color: rgba(0,0,0,.5);
}
.nav-pills>ul>li>a{
display: block;
height: 42px;
line-height: 42px;
font-size: 14px;
padding: 0 20px 0 26px;
color: #fff;
}
.nav-pills>ul>li>a:hover{
background-color: #ff6700;
}
.nav-pills .icon-xiayiyeqianjinchakangengduo{
float: right;
color: rgba(255,255,255,.7);
}