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 ...

随机推荐

xtu read problem training 3 A - The Child and Homework
The Child and Homework Time Limit: 1000ms Memory Limit: 262144KB This problem will be judged on Code ...
（4）主成分分析Principal Component Analysis——PCA
主成分分析Principal Component Analysis 降维除了便于计算,另一个作用就是便于可视化. 主成分分析-->降维--> 方差:描述样本整体分布的疏密,方差越大-> ...
【HTML/XML 4】实例分析HTML和XML的不同
导读:上回书说到,XML和HTML有着各自的不同点,综合表现在:1,HTML只是Web显示数据的通用方法,而XML提供了直接处理Web数据的通用方法.2,HTML着重描述Web页面的显示格式,而XML ...
irules事件和命令
hdu 2063最大匹配
#include<stdio.h> #include<string.h> int link[600],mark[600],map[600][600],m,n; int find ...
[洛谷U22156]未曾届到游览（矩阵树定理）
题目背景又到了某任*堂开关中学一年一度的自主招生考试的时间了,在考试完后许多家长决定带着自己的孩子参观一下这所距千年名校还有890周年的百年学校: 题目描述这所学校的布局非常奇怪,是一个由N 个点 ...
[Bzoj4722]由乃（线段树好题）（倍增处理模数小快速幂）
4722: 由乃 Time Limit: 20 Sec Memory Limit: 512 MBSubmit: 360 Solved: 131[Submit][Status][Discuss] D ...
List和Map、Set的区别
首先 List 和 Set 是存储单列数据的集合,Map 是存储键和值这样的双列数据的集合:List 中存储的数据是有顺序,并且允许重复:Map 中存储的数据是没有顺序的,其键是不能重复的,它的值是可 ...
Java实验--继承与多态
---恢复内容开始--- 题目如下: [实验任务一]:面积计算(设计型). 1. 实验要求: 实验报告中要求包括程序设计思想.程序流程图.源代码.运行结果截图.编译错误分析等内容. 2.实验内容: ( ...
44444444444444444444444444444444dddddddddd66666666666666666666666666
dddddddddddddddddddddddddddddddddddddddddddddddddddd

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

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

总结：

实例

学习要点

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

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

随机推荐

热门专题