码迷,mamicode.com
首页 > Web开发 > 详细

模仿主流网页

时间:2019-03-27 12:56:20      阅读:195      评论:0      收藏:0      [点我收藏+]

标签:line   width   ini   not   direct   骁龙   技术   splay   mes   

 

源码链接:

 

码云:https://gitee.com/dongshuaishuai/imitate_mainstream_web_pages.git

百度云:https://pan.baidu.com/s/1PpbcPrBEAtgZOb7y3vzOFQ 提取码:39ex 

 原网页截图

技术图片

模仿网页截图:

技术图片

技术图片

 

 

css:(包含动画效果)

  1 <style type="text/css">
  2             a{
  3                 color: black;
  4             }
  5             a:hover{
  6                 color: red;
  7                 font-size: 1.5em;
  8             }
  9             a:active{
 10                 color: blue;
 11             }
 12             div{ 
 13                 width: 85%;
 14                 margin: 10px auto;
 15             }
 16             #p1{/* 导航栏左侧 */
 17                 float: left;
 18                 width: 15%;
 19                 height: auto;
 20                 margin-top: 5px;
 21                 text-align: center;
 22                 text-decoration: none;/* 下划线 */
 23             }
 24             #p2{/* 导航栏右侧 */
 25                 float: right;
 26                 width: 10%;
 27                 height: auto;
 28                 margin-top: 5px;
 29                 text-align: center;
 30                 text-decoration: none;
 31             }
 32             #p3{
 33                 float: left;
 34                 width: 200px;
 35                 height: auto;
 36                 text-align: center;
 37                 border: 5px white solid;
 38                 margin-right: 10px;
 39             }
 40             #p3:hover{
 41                 border: 5px red solid;
 42                 transition: 1s;
 43             }
 44             #p4{
 45                 width: 200px;
 46                 height: auto;
 47                 margin-left: 7%;
 48                 text-align: center;
 49                 border: 5px white solid;
 50             }
 51             #box{/*搜索框*/
 52                 width: 80%;
 53                 margin: 0 auto;
 54                 font-family: "microsoft yahei";
 55                 font-size: 14px;
 56                 float: left;
 57                 margin-top: 4px;
 58             }
 59             #box input:nth-of-type(1){
 60                 width: 80%;
 61                 border: 1px solid #FF0000;
 62                 height: 30px;
 63                 background-image: url(img/search.JPG);
 64                 background-repeat: no-repeat;
 65                 background-position: 5px center;
 66                 padding: 0 0 0 45px;
 67                 
 68             }
 69             .search{
 70                 width: 78px;
 71                 height: 32px;
 72                 float: right;
 73                 background: red;
 74                 color: white;
 75                 text-align: center;
 76                 line-height: 32px;
 77                 cursor: pointer;
 78             }
 79             #border{
 80                 width: 80%;
 81                 height: 30px;
 82                 color: black;
 83                 border-bottom: 1px solid #D2691E;
 84                 border-top: 1px solid #D2691E;
 85                 border-left: 1px solid #D2691E;
 86                 border-right: 1px solid #D2691E;
 87                 border-width: 2px;
 88                 margin-top:10px ;
 89             }
 90             /*动画效果*/
 91             .img{
 92                 float: left;
 93             
 94                 animation: logo 1.5s infinite linear;
 95                 -webkit-animation: logo 1.5s infinite linear;
 96                 -moz-animation: logo 1.5s  infinite linear;
 97             }
 98             @keyframes logo{
 99                 0% {transform: perspective(200px)}  
100                 100% {transform: perspective(200px) rotateX(360deg)}
101             }
102             @-moz-keyframes logo{
103                  0% {transform: perspective(200px)}  
104                  100% {transform: perspective(200px) rotateX(360deg)}
105             }
106             @-webkit-keyframes logo{
107                 0% {transform: perspective(200px)}  
108                 100% {transform: perspective(200px) rotateX(360deg)}
109             }
110             
111         </style>

 body源码:

  1 <body>
  2         
  3         <div style="overflow: hidden;">
  4             <a href="https://www.tmall.com/?spm=a220m.1000858.a2226mz.1.32bd17e7QnJY2b" target="_blank" id="p1" >
  5                 天猫首页     
  6             </a> 
  7             <p id="p1">
  8                 喵,欢迎来天猫
  9             </p>
 10             <a href="https://login.tmall.com/?spm=a220m.1000858.a2226mz.2.32bd17e7EfmGvh&redirectURL=https%3A%2F%2Flist.tmall.com%2Fsearch_product.htm%3Fq%3D%25D0%25A1%25C3%25D7%25CA%25D6%25BB%25FA%26type%3Dp%26vmarket%3D%26spm%3D875.7931836%252FB.a2227oh.d100%26from%3Dmallfp..pc_1_searchbutton" target="_blank"  id="p1">
 11                 请登录
 12             </a>
 13             <a href="https://register.tmall.com/?spm=a220m.1000858.a2226mz.3.32bd17e7EfmGvh" target="_blank" id="p1">
 14                 免费注册
 15             </a>
 16             <a href="https://www.taobao.com/?spm=a220m.1000858.a2226mz.13.32bd17e7EfmGvh"id="p2">
 17                 淘宝网
 18             </a>
 19             <a href="https://cart.tmall.com/cart/myCart.htm?spm=a220m.1000858.a2226mz.8.32bd17e7EfmGvh&from=btop" target="_blank"id="p2">
 20                 购物车
 21             </a>
 22             <a href="https://i.taobao.com/my_taobao.htm?spm=a220m.1000858.a2226mz.4.32bd17e7EfmGvh" target="_blank" id="p2">
 23                 我的淘宝
 24             </a>
 25         </div>
 26         <div>
 27             <img src="img/天猫.JPG" class="img">
 28             <div id="box">
 29                 <input type="text" name="search" placeholder="请输入关键字">
 30                 <input type="button" class="search" value="搜索"/>
 31             </div>
 32         </div>
 33     </body>
 34     <body>
 35         <div>
 36             <a href="https://store.taobao.com/view_shop.htm?spm=a220m.1000858.0.0.7c9917e7AIP26v&shop_id=104736810&scm=1048.1.1.12&rn=1a69158972f0dac22246a2ca35e9b3c4" target="_blank">
 37                 <img src="img/小米9.JPG" height="222"width="100%">
 38             </a>
 39             <select id="border">
 40                 <option style="display: none;">分类</option>
 41                 <option>手机</option>
 42                 <option>平板</option>
 43                 <option>笔记本</option>
 44                 <option>文具</option>
 45             </select>
 46             <select id="border">
 47                 <option style="display: none;">网络类型</option>
 48                 <option>4G+</option>
 49                 <option>4G</option>
 50                 <option>全网通</option>
 51             </select>
 52         </div>
 53     </body>
 54     <body>
 55         <div style="overflow: hidden;width: 75%;">
 56             <div id="p3" style="float: left;">
 57                 <img src="img/1.jpg" height="200px"width="200px">
 58                 <p style="color: #FF0000;">¥1199</p>
 59                 <a href="https://detail.tmall.com/item.htm?spm=a220m.1000858.1000725.2.7c9917e7AIP26v&id=577342018417&skuId=3880304412833&areaId=630100&user_id=2616970884&cat_id=2&is_b=1&rn=1a69158972f0dac22246a2ca35e9b3c4"
 60                 target="_blank" >【4+64G低至1199】Xiaomi</a>
 61             </div>
 62             <div id="p3" style="float: left;">
 63                 <img src="img/2.jpg" height="200px"width="200px">
 64                 <p style="color: #FF0000;">¥2299</p>
 65                 <a href="https://detail.tmall.com/item.htm?spm=a220m.1000858.1000725.9.7c9917e7AIP26v&id=570958927139&skuId=3899166554994&areaId=630100&user_id=2616970884&cat_id=2&is_b=1&rn=1a69158972f0dac22246a2ca35e9b3c4"
 66                 target="_blank">
 67                     【领卷减200享6期免息】Xiaomi
 68                 </a>
 69             </div>
 70             <div id="p3"style="float: left;">
 71                 <img src="img/3.jpg"height="200px"width="200px" />
 72                 <p style="color: #FF0000;">¥1199</p>
 73                 <a href="https://detail.tmall.com/item.htm?spm=a220m.1000858.1000725.14.7c9917e7AIP26v&id=586035463216&skuId=4014760529229&areaId=630100&user_id=2616970884&cat_id=2&is_b=1&rn=1a69158972f0dac22246a2ca35e9b3c4"
 74                 target="_blank">
 75                     Xiaomi红米Note7 新品骁龙660
 76                 </a>
 77             </div>
 78             <div id="p3"style="float: left;">
 79                 <img src="img/4.jpg" height="200px" width="200px"/>
 80                 <p style="color: #FF0000;">¥1399</p>
 81                 <a href="https://detail.tmall.com/item.htm?spm=a220m.1000858.1000725.19.7c9917e7AIP26v&id=585756129824&skuId=3972839821362&areaId=630100&user_id=2616970884&cat_id=2&is_b=1&rn=1a69158972f0dac22246a2ca35e9b3c4"
 82                 target="_blank">
 83                     【现货速发】Xiaomi/小米 红米Note7
 84                 </a>
 85             </div>
 86             <div id="p3"style="float: left;">
 87                 <img src="img/5.jpg" height="200px"width="200px"/>
 88                 <p style="color: #FF0000;">¥799</p>
 89                 <a href="https://detail.tmall.com/item.htm?spm=a220m.1000858.1000725.24.7c9917e7AIP26v&id=571542829336&skuId=3938966167279&areaId=630100&user_id=2616970884&cat_id=2&is_b=1&rn=1a69158972f0dac22246a2ca35e9b3c4"
 90                 target="_blank">
 91                     【64G低至799】Xiaomi/小米 红米 6A
 92                 </a>
 93             </div>
 94             <div id="p3"style="float: left;">
 95                 <img src="img/6.jpg"height="200px"width="200px" />
 96                 <p style="color: #FF0000;">¥3299</p>
 97                 <a href="https://detail.tmall.com/item.htm?spm=a220m.1000858.1000725.44.7c9917e7AIP26v&id=580452175482&skuId=4038718607439&areaId=630100&user_id=2616970884&cat_id=2&is_b=1&rn=1a69158972f0dac22246a2ca35e9b3c4"
 98                 target="_blank">
 99                     【购机享6期免息】Xiaomi/小米Mix3
100                 </a>
101             </div>
102             <div id="p3"style="float: left;">
103                 <img src="img/7.jpg" height="200px" width="200px"/>
104                 <p style="color: #FF0000;">¥1499</p>
105                 <a href="https://detail.tmall.com/item.htm?spm=a220m.1000858.1000725.34.7c9917e7AIP26v&id=578310286181&skuId=4173006623408&areaId=630100&user_id=2616970884&cat_id=2&is_b=1&rn=1a69158972f0dac22246a2ca35e9b3c4"
106                 target="_blank">
107                     【3期免息】Xiaom/小米8 青春版
108                 </a>
109             </div>
110             <div id="p3"style="float: left;">
111                 <img src="img/8.jpg"height="200px"width="200px" />
112                 <p style="color: #FF0000;">¥1099</p>
113                 <a href="https://detail.tmall.com/item.htm?spm=a220m.1000858.1000725.39.7c9917e7AIP26v&id=584545231020&skuId=3950031408637&areaId=630100&user_id=2616970884&cat_id=2&is_b=1&rn=1a69158972f0dac22246a2ca35e9b3c4"
114                 target="_blank">
115                     【增一年流量 超值】Xiaomi/小米
116                 </a>
117             </div>
118             <div id="p3"style="float: left;">
119                 <img src="img/9.jpg" height="200px"width="200px" />
120                 <p style="color: #FF0000;">¥2499</p>
121                 <a href="https://detail.tmall.com/item.htm?spm=a220m.1000858.1000725.49.7c9917e7AIP26v&id=577534124165&skuId=3987722111838&areaId=630100&user_id=2616970884&cat_id=2&is_b=1&rn=1a69158972f0dac22246a2ca35e9b3c4"
122                 target="_blank">
123                     【6+128G版2499起再享6期免息】
124                 </a>
125             </div>
126             <div id="p3"style="float: left;">
127                 <img src="img/10.jpg"height="200px" width="200px"/>
128                 <p style="color: #FF0000;">¥3299000</p>
129                 <a href="https://detail.tmall.com/item.htm?spm=a220m.1000858.1000725.54.7c9917e7AIP26v&id=587001537827&skuId=3996123905480&areaId=630100&user_id=2616970884&cat_id=2&is_b=1&rn=1a69158972f0dac22246a2ca35e9b3c4"
130                 target="_blank">
131                     【29日10点开抢】Xiaomi/小米9
132                 </a>
133             </div>
134             
135         </div>
136         <div>
137             <div id="p4"style="float: left;">
138                 <img src="img/捕获1.JPG" height="100px"width="200px" />
139             </div>
140             <div id="p4"style="float: left;">
141                 <img src="img/捕获2.JPG" height="100px"width="200px" />
142             </div>
143             <div id="p4"style="float: left;">
144                 <img src="img/捕获4.JPG" height="100px"width="200px" />
145             </div>
146             <div id="p4"style="float: left;">
147                 <img src="img/捕获5.JPG" height="100px"width="200px" />
148             </div>
149         </div>
150     </body>
  • 附:
  • 关于响应式布局:由于使用的width使用的百分比,并没有使用媒体查询来实现响应式布局,但是可以达到同样的效果,在别的浏览器中同样可以实现。
  • 关于动画效果:将鼠标移至导航栏以及下面带横线的字体时可以变大变红,移至包含手机的地方会出现红色框,上面的天猫图片可以旋转。
  • 与原网页很多细节相差较大

模仿主流网页

标签:line   width   ini   not   direct   骁龙   技术   splay   mes   

原文地址:https://www.cnblogs.com/dongshuaishuai/p/10606660.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!