H5 css编写京东首页

最新推荐文章于 2025-07-31 10:54:09 发布

三尺秋水一点飞鸿

最新推荐文章于 2025-07-31 10:54:09 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： H5 笔记

本文链接：https://blog.youkuaiyun.com/qq_42467563/article/details/80921493

这个博客展示了如何使用HTML和CSS编写京东首页。主要内容包括全局样式设置、头部区域（包含导航、广告、搜索和购物车）的CSS布局，以及首页的第一部分内容布局。通过CSS实现各个部分的样式和交互效果，如导航链接、搜索框、购物车图标等。

文件夹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