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

随机推荐

【】关闭QQ右下角各种弹框
[]关闭QQ右下角弹框一: 二: 超级会员设置过滤(屏蔽)广告后可以过滤哪些广告? 1.可以过滤QQ客户端好友聊天对话框右侧出现的Flash广告.左下角的文案广告: 如图: 2.可以 ...
Coloring Brackets （区间DP）
Once Petya read a problem about a bracket sequence. He gave it much thought but didn't find a soluti ...
【数学】codeforces B. The Golden Age
http://codeforces.com/contest/813/problem/B [题意] 满足n=x^a+y^b的数字为不幸运数字,a,b都是非负整数: 求闭区间[l,r]上的最长的连续幸运数 ...
数字游戏（codevs 1085）
题目描述 Description 丁丁最近沉迷于一个数字游戏之中.这个游戏看似简单,但丁丁在研究了许多天之后却发觉原来在简单的规则下想要赢得这个游戏并不那么容易.游戏是这样的,在你面前有一圈整数(一共 ...
[APIO2012] 派遣 dispatching
Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 4580 Solved: 2348 Description 在一个忍者的帮派里,一些忍者们被选中派遣给 ...
msp430入门编程30
msp430中C语言的文件管理
.NET Core 3.0之深入源码理解Configuration(一)
Configuration总体介绍微软在.NET Core里设计出了全新的配置体系,并以非常灵活.可扩展的方式实现.从其源码来看,其运行机制大致是,根据其Source,创建一个Builder实例,并 ...
P1918 保龄球洛谷
https://www.luogu.org/problem/show?pid=1918 题目描述 DL 算缘分算得很烦闷,所以常常到体育馆去打保龄球解闷.因为他保龄球已经打了几十年了,所以技术上不成问 ...
cmd的操作命令导出导入.dmp文件
利用cmd的操作命令导出,详情如下(备注:方法二是转载网上的教程): 1:G:\Oracle\product\10.1.0\Client_1\NETWORK\ADMIN目录下有个tnsname.ora ...
创立一个站点的前前后后（起因，域名，云平台，备案，CDN等等）(1)
起因写完<完美软件开发:方法与逻辑>这书后,原本想继续写书的,可出来參加了些社区活动后,我发现我写的书大家评价还行.但事实上不太理解.而接下来想写的书更加抽象点.准备叫<管理的解析 ...

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

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

总结：

实例

学习要点

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

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

随机推荐

热门专题