html5--项目实战-仿天猫（移动端页面）

总结：

1、标准搜索栏的做法：这里是弹性布局，放大镜和小话筒是background img

2、手机尾部导航做法：这是一个个 li 标签，每个li标签占%25

3、手机尾部导航固定方法：相对定位外加距离底部为0

position: fixed;
bottom: 0;

4、标题栏做法：浮动布局，一部分左浮动，一部分右浮动

5、背景渐变效果：效果很好

background-image: linear-gradient(to bottom,#B0C4DE, #87CEFA);

6、文字阴影效果：浅色文字加深度阴影

text-shadow: 0 1px 1px rgba(0,0,0,0.8);

实例

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>仿天猫</title>

     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width,initial-scale=1.0"/>

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

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

 </head>

 <body>

      <header id="header" class="home">

          <figure class="fl ff">

            <img src="data:image/fl.png" alt="分类" class="flp">

            <figcaption>分&nbsp类</figcaption>

         </figure>

         <input type="text" class="ss" name="ss" placeholder="&nbsp&nbsp&nbsp&nbsp&nbsp搜索双11，好货马上到手">

         <figure class="fr ff">

            <img src="data:image/sys.png" alt="扫一扫" class="frp">

            <figcaption>扫一扫</figcaption>

         </figure>    

      </header>

      <section class="main">

         <h3 class="title">行业精选</h3>

             <figure class="sp sp1">

                 <img src="data:image/index_img_i1.png" alt="">

                 <figcaption>

                    女装<br>最新款式

                 </figcaption>

             </figure>

             <figure class="sp sp1">

                 <img src="data:image/index_img_i9.png" alt="">

                 <figcaption>

                    运动<br>爱运动

                 </figcaption>

             </figure>

              <figure class="sp sp1">

                 <img src="data:image/index_img_i3.png" alt="">

                 <figcaption>

                    女鞋<br>抢秋冬新款

                 </figcaption>

             </figure>

             <figure class="sp sp1">

                 <img src="data:image/index_img_i4.png" alt="">

                 <figcaption>

                    男装<br>潮男搭配

                 </figcaption>

             </figure>

             <figure class="sp sp1">

                 <img src="data:image/index_img_i5.png" alt="">

                 <figcaption>

                    箱包<br>包你满意

                 </figcaption>

             </figure>

             <figure class="sp sp1">

                 <img src="data:image/index_img_i6.png" alt="">

                 <figcaption>

                    男鞋<br>英伦休闲季

                 </figcaption>

             </figure>

      </section>

      <footer id="footer">

      <!--     <nav> -->

              <ul id="footer_list">

             <li class="list_li home active">

                 <a href="index.html" class="text">天猫</a>

             </li>

             <li class="list_li follow" >

                 <a href="" class="text">关注</a>

             </li>

             <li class="list_li cart">

                 <a href="buy.html" class="text">购物车</a>

             </li>

             <li class="list_li profile">

                 <a href="" class="text">我</a>

             </li>

         </ul>

     <!--      </nav> -->

      </footer>

 </body>

 </html>

index.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>仿天猫</title>

     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width,initial-scale=1.0"/>

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

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

 </head>

 <body>

 <!--      <header id="header" class="home">

          <figure class="fl ff">

            <img src="data:image/fl.png" alt="分类" class="flp">

            <figcaption>分&nbsp类</figcaption>

         </figure>

         <input type="text" class="ss" name="ss" placeholder="&nbsp&nbsp&nbsp&nbsp&nbsp搜索双11，好货马上到手">

         <figure class="fr ff">

            <img src="data:image/sys.png" alt="扫一扫" class="frp">

            <figcaption>扫一扫</figcaption>

         </figure>

      </header> -->

      <section class="main">

         <div class="cart-top">

             <h2 class="cart-fl">购物车</h2>

             <img src="data:image/tm2.png" alt="" width="60">

             <div class="cart-fr">已选2件</div>

         </div>

         <ul>

             <li class="cart-item">

                 <span class="pic">

                     <img src="data:image/dbcd.jpg" alt="">

                 </span>

                 <span class="des">

                    迷你移动电源<br>卡通大白充电宝

                 </span>

                 <span class="price">

                      ¥ 149.00

                 </span>

             </li>

             <li class="cart-item">

                 <span class="pic">

                     <img src="data:image/dbcd.jpg" alt="">

                 </span>

                 <span class="des">

                    迷你移动电源<br>卡通大白充电宝

                 </span>

                 <span class="price">

                      ¥ 149.00

                 </span>

             </li>

             <li class="sum">

                 共计¥298

                 <input type="button" class="cart-button" value="结算">

             </li>

         </ul>

      </section>

      <footer id="footer">

      <!--     <nav> -->

              <ul id="footer_list">

             <li class="list_li home active">

                 <a href="index.html" class="text">天猫</a>

             </li>

             <li class="list_li follow" >

                 <a href="" class="text">关注</a>

             </li>

             <li class="list_li cart">

                 <a href="buy.html" class="text">购物车</a>

             </li>

             <li class="list_li profile">

                 <a href="" class="text">我</a>

             </li>

         </ul>

     <!--      </nav> -->

      </footer>

 </body>

 </html>

buy.html

 /*公共部分*/

 *{

     margin:;

     padding:;

 }

 .html,body,.wrap{

     height: 100%;

     width: 100%;

 }

 body{

     background: rgba(90,60,30,0.3);

 }

 ul{

     list-style-type: none;

 }

 a{

     text-decoration: none;

     color: #fff;

 }

 a:active{

     text-decoration: underline;

     color: #000;

 }

 /*header部分*/

 header{

     background:rgba(120,30,30,0.6);

     width: 100%;

     height: 50px;

     display: flex;

     font-size: 10px;

     color: #fff;

 }

 .ff{

     width: 40px;

     height: 50px;

 }

 .frp,.flp{

     height: 20px;

     width: 25px;

     margin: 8px 8px auto;

 }

 .ss{

     flex:;

     margin: 10px 0;

     height:30px;

     border-radius: 5px;

     background-image:url(../image/search.png), url(../image/ht.png);

     background-size:20px,20px;

     background-repeat: no-repeat;

     background-position:left,right;

 }

 header figcaption{

     text-align: center;

 }

 /*footer部分*/

 footer{

     width: 100%;

     height: 50px;

     background:rgba(90,60,30,1);

     position: fixed;

     bottom:;

 }

 #footer_list .list_li{

     float: left;

     height: 50px;

     line-height: 50px;

     width: 25%;

     font-size: 10px;

     text-align: center;

 }

 #footer_list .list_li:nth-child(1){

     background: url(../image/icon_tab_home_nomal.png) no-repeat;

     background-size: 22px 21px;

     background-position: top;

 }

 #footer_list .list_li:nth-child(1):active{

     background: url(../image/icon_tab_home_selected.png) no-repeat;

     background-size: 22px 21px;

     background-position: top;

 }

 #footer_list .list_li:nth-child(2){

     background: url(../image/icon_tab_featured_normal.png) no-repeat;

     background-size: 22px 21px;

     background-position: top;

 }

 #footer_list .list_li:nth-child(2):active{

     background: url(../image/icon_tab_featured_selected.png) no-repeat;

     background-size: 22px 21px;

     background-position: top;

 }

 #footer_list .list_li:nth-child(3){

     background: url(../image/icon_tab_cart_normal.png) no-repeat;

     background-size: 22px 21px;

     background-position: top;

 }

 #footer_list .list_li:nth-child(3):active{

     background: url(../image/icon_tab_cart_selected.png) no-repeat;

     background-size: 22px 21px;

     background-position: top;

 }

 #footer_list .list_li:nth-child(4){

     background: url(../image/bottombtn0201.png) no-repeat;

     background-size: 22px 21px;

     background-position: top;

 }

 #footer_list .list_li:nth-child(4):active{

     background: url(../image/bottombtn0202.png) no-repeat;

     background-size: 22px 21px;

     background-position: top;

 }

gg.css

 .title{

     background-image:linear-gradient(to bottom,#DAAAAA,#E87373 80%,#DAAAAA);

      height: 30px;

     line-height: 30px;

 }

 .main{

     width: 320px;

     color:  #000;

     background: #eee;

 }

 .sp{

      width: 50%;

      float: left;

      margin-top: 0.5em;

      margin-bottom: 0.5em;

      background: #a9a9a9;

      text-align: center;

 }

index.css

 .cart-top{

     height: 25px;

     line-height: 25px;

     background-image:

     linear-gradient(to bottom,#FFF0F5,#FF7F50 80%,#D2691E);

     padding: 8px;

     font-size: 14px;

     font-weight: bold;

     color: #eee;

     text-shadow: 0 1px 1px rgba(0,0,0,0.8);

     border-bottom: 1px solid #FF7F50;

     border-radius: 3px 3px 0 0;

 }

 .cart-fl{

     display: inline-block;

     font-size: 14px;

 }

 .cart-fr{

     float: right;

 }

 /******购物车物品列表样式********/

 .cart-item{

     line-height: 25px;

     padding: 10px 10px 10px 15px;

     font-weight: bold;

     background-image: linear-gradient(to bottom,#FFC0CB,#FFF0F5);

     overflow: hidden;

 }

 .pic{

     float: left;

     margin-bottom:5px;

     margin-right:5px;

 }

 .des{

     float: left;

     color: #eee;

     text-shadow: 0 1px 1px rgba(0,0,0,0.8);

 }

 .price{

     float: right;

     color: #eee;

     text-shadow: 0 1px 1px rgba(0,0,0,0.8);

 }

 /*购物车总计样式*/

 .sum{

     line-height: 32px;

     padding: 10px 10px 10px 15px;

     font-weight: bold;

     background-image: linear-gradient(to bottom,#D3D3D3,#E0FFFF);

 }

 /*购物车按钮样式*/

 .cart-button{

     float: right;

 /*margin-left: 120px;*/

     line-height: 29px;

     padding: 0 25px;

     color: white;

     border-radius: 4px;

     background-image: linear-gradient(to bottom,#B0C4DE, #87CEFA);

 }

buy.css

学习要点

综合运用我们之前学过的知识来构建一个移动端的web页面。
了解测试工具
了解分别率有关的几个基本概念
meta标签viewport的使用
固定底部导航的办法
css代码的分离

了解几个基本概念

物理分辨率、逻辑分辨率、倍率与像素密度

物理分辨率和逻辑分辨率，物理分辨率是硬件所支持的，逻辑分辨率是软件可以达到的。
倍率与像素密度：以iPhone 5s为例，屏幕的分辨率是640x1136，倍率是2。浏览器会认为屏幕的分辨率是320x568，仍然是基准倍率的尺寸。所以在制作页面时，只需要按照基准倍率来就行了。无论什么样的屏幕，倍率是多少，都按逻辑像素尺寸来设计和开发页面。
iPhone的屏幕尺寸各不相同，从市场占有率数据来看，目前最多的是iPhone5/5s的屏幕。倍率为2，逻辑像素320x568。上升势头最猛，未来有望登上第一的是iPhone 6的屏幕。倍率为2，逻辑像素375x667。
都说Android碎片化严重，但它现在反而比iOS好处理。因为如今的Android屏幕逻辑像素已经趋于统一了：360x640，只是倍率不同。
手机端网页没有统一标准了，比较流行的做法是按照iPhone5的尺寸来设计。倍率2，逻辑像素320x568。倍率2的屏幕无论在iOS还是Android方面都是主流，而且又是2倍屏幕中逻辑像素最小的。

meta标签viewport的使用

width、height 可以定义值，或者 device-width | device-height 设备的宽高。
如width=device-width：宽度定义为设备宽度
initial-scale 初始缩放比例，即页面第一次 load 的时候缩放比例。这是一个浮点值，是页面大小的一个乘数。例如，如果你设置初始缩放为“1.0”，那么，web页面在展现的时候就会以target density分辨率的1:1来展现。如果你设置为“2.0”，那么这个页面就会放大为2倍。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放，如果设置为yes则是允许用户对其进行改变，反之为no。默认值是yes。

小技巧

清除浮动的技巧：消除子元素浮动对父元素背景/边框/不能被子元素撑开的方法：

建议将LOGO放在h1标签里面，方便搜索引擎抓取关键字。同时一个页面只建议使用一个h1标签。
父元素结尾处增加一空元素 div；并清除其浮动。缺点：如果布局复杂需要增加许多空标签
在父元素定义overflow:hidden（浏览器会自动检查浮动区域的高度，注.不必理会原理，知道用法即可。缺点：超出部分会被隐藏
利用伪类：after 父元素内容后增加空元素，并清除浮动。

将代码重用部分比如header footer分离出来，其他需要的文件重复引用即可
图片自适应:将图片设为"display: block;max-width:100%"

未完，待续...........

代码优化

优化代码使更加符合HTML5大纲算法.步骤如下

查看页面目录结构，逐项修改有问题部分。
1. nav中添加标题并将它隐藏。

小技巧

当width为100%时。可用用min-width来规定一个最小宽度，防止缩放时变形，尤其是背景图片。
将定位和外边距结合让图片以中心点居中。
用opcity设置半透明遮罩层。
inline-block可以使用text-align 居中；
可以给background同时设置半透明渐变和背景图片，来增加背景图片的模糊度来突出背景上的文字。

html5--项目实战-仿天猫（移动端页面）的更多相关文章

HTML5新结构标签和移动端页面布局
--------------------HTML5新结构标签--------------------1.h5新增的主要语义化标签如下: 1.header 页面头部.页眉 2.nav 页面导航 3.ar ...
钉钉h5项目实战|仿钉钉聊天|h5移动端钉钉案例
最近一直着手开发h5仿钉钉项目,使用到了h5+css3+zepto+wcPop2等技术进行开发,实现了消息.表情.动图发送,仿QQ多人拼合图像,可以选择本地图片,并可以图片.视频预览,仿微信发红包及打 ...
第 31 章项目实战-PC端固定布局[1]
学习要点: 1.准备工作 2.创建项目 3.网站结构 4.CSS选择器 5.完成导航主讲教师:李炎恢本章主要开始使用学习用HTML5和CSS3来构建Web页面,第一个项目采用PC端固定布局来实现 ...
angularJs项目实战！02：前端的页面分解与组装
自从上一篇文章到现在已经有将近一个月的时间,我将精力放在了前端页面分解与组装,和angularjs如何与jquery.bootstrap.D3等一系列其他类库结合使用的经验总结上.由于公司新招了一些员 ...
移动端页面V2.0项目改版总结
移动端页面已经进行的第三次改版,这个版本遇到的最大难题就是页面跳转的问题. 项目需求: 页面上有分别有优惠估价.我要估价.历史竞拍这三个Tab选项卡,当用户点击估价,选择品牌以后,前端需要去请求品牌接 ...
html5移动端页面分辨率设置及相应字体大小设置的靠谱使用方式
对于html5移动端网页编写CSS网上有很多介绍的文章,但在实际使用过程中还是会纠结. 网上的资料太多,且大多都是技术介绍型,特别是针对android上,网上写的各种麻烦,各种复杂,各种不接地气儿.. ...
ThinkPHP3.2开发仿京东商城项目实战视频教程
ThinkPHP3.2仿京东商城视频教程实战课程,ThinkPHP3.2开发大型商城项目实战视频第一天 1.项目说明 2.时间插件.XSS过滤.在线编辑器使用 3.商品的删除 4.商品的修改完成-一 ...
移动端自动化测试Appium 从入门到项目实战Python版☝☝☝
移动端自动化测试Appium 从入门到项目实战Python版 (一个人学习或许会很枯燥,但是寻找更多志同道合的朋友一起,学习将会变得更加有意义✌✌) 说到APP自动化测试,Appium可是说是非常流 ...
【第二版】高仿Android网易云音乐企业级项目实战课程介绍
这是一门付费Android项目课程,我们只做付费课程:同时也感谢大家的支持. 这一节,对本课程做一个简单介绍,以及放一些项目效果图,如果想直接查看项目视频演示,可以直接在腾讯课堂查看[高仿Androi ...

随机推荐

php基础语句变量符号
中心主题标记与注释 // /* */ 输出语句 echo输出 echo可以输出多个字符串,逗号隔开 print输出 print只能输出一个字符串,返回true或false print_r() 可以把 ...
Linux（2）：基础命令
linux 的规则: 1. linux 命令行组成结构:如下 [root@neo ~]# [用户名@主机名当前工作路径]# ~ 用户的家目录 2. linux系统命令操作语法的格式(命令的样子): ...
vscode 打开新文件覆盖窗口，始终显示一个窗口
一直在使用vscode 编辑器,里面的扩展用的比较舒服,但是最近遇到一个小问题,一直也没有找好的解决办法,今天无意中把问题给解决了.具体如下之前使用编辑器,可以同时打开多个文件,而且是多窗口展示的, ...
小米自动砸蛋机器js代码
02 //地址:http://static.xiaomi.cn/515 03 //@author:liuzh 04 //@url:http://blog.csdn.net/isea533 05 var ...
从零开始写STL-string类型
class string { public: typedef size_t size_type; typedef char* iterator; typedef char value_type; pr ...
MongoDB学习day09--Mongoose数据校验
一.Mongoose检验参数 required : 表示这个数据必须传入max: 用于 Number 类型数据, 最大值 min: 用于 Number 类型数据, 最小值 enum:枚举类型, 要求数 ...
DELPHI跨平台的临界替代者
在WINDOWS里面使用临界来保护多线程需要访问的共享对象,现在,DELPHI有了新的跨平台临界保护者--System.TMonitor 代码演示如下: FConnections := TObject ...
《gis空间分析及应用案例解析》培训总结
<gis空间分析及应用案例解析>培训总结来源:常德水情作者:唐校准发布日期:2014-01-02 2013年12月2630日由中国科学院计算技术研究所教育中心组织的< ...
Meteor环境安装配置
在本教程中,我们将展示如何在windows操作系统安装Meteor .在我们开始学习使用Meteor 之前,我们将需要NodeJS.如果你还没有安装它,则可以点击下表中的链接. 必须条件 Meteor ...
sdk manager 创建的虚拟机启动的时候总是在Android字样解决
一直显示Android字样.仅仅须要删除文件夹下的snapshots.img 找到sdk的文件夹下的\tools\lib\emulator,然后删除上面的文件snapshots.img就可以,我的sd ...

html5--项目实战-仿天猫（移动端页面）

html5--项目实战-仿天猫（移动端页面）

总结：

实例

学习要点

物理分辨率、逻辑分辨率、倍率与像素密度

html5--项目实战-仿天猫（移动端页面）的更多相关文章

随机推荐

热门专题