H5 css 京东首页

最新推荐文章于 2022-07-26 14:42:38 发布

三尺秋水一点飞鸿

最新推荐文章于 2022-07-26 14:42:38 发布

阅读量347

点赞数 1

分类专栏： H5 笔记

本文链接：https://blog.csdn.net/qq_42467563/article/details/83150843

版权

这是一个关于京东首页的H5和CSS实现，包括页面布局、导航栏、搜索框、购物车、商品分类和广告区域的设计。CSS样式用于设置元素的宽高、颜色、背景、边框等，以实现京东首页的视觉效果。

摘要由CSDN通过智能技术生成

文件夹image 存储需要的图片ad.jpg，buy.jpg，jd_r2_c2.jpg，logo.jpg，phone.jpg

buy.jpg

jd_r2_c2.jpg

logo.jpg

phone.jpg

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>京东首页</title>
   <style>
       /*global css*/
       a,address,b,big,blockquote,body,center,cite,code,dd,del,div,dl,dt,em,fieldset,font,form,h1,h2,h3,h4,h5,h6,html,i,iframe,img,ins,label,legend,li,ol,p,pre,small,span,strong,u,ul,var{margin:0;padding:0}
       body{
           font-size:14px;
           color:#858585;
           font-family: "Microsoft Yahei";
       }
       .clearit{
           clear: both;
       }
       .red{
           color:#B44C50;
       }
       /*global css end*/

       /*header start*/
           header{
               width:1420px;
               height:255px;
               border-bottom: 3px solid #9D0000;

           }

           header .nav{
               width:1420px;
               height:30px;
               background:#F1F1F1;
           }
           .nav .area{
               width:87px;
               height:30px;
               line-height: 30px;
               margin-left: 120px;
               font-size:12px;
               float:left;

           }
           .nav ul{
               width:820px;
               height:30px;
               margin-right:80px;
               float:right;
           }

           .phone{
               display:inline-block;
               width:15px;
               height:19px;
               float:left;
               margin-top:5px;
               margin-left:2px;
           }