纯HTML+CSS仿作京东页⾯纯HTML+CSS仿作京东页⾯
⼤⼀学了⼀个⽉的⽹页制作课程，就在今天，我对京东页⾯下⼿了。
我⽤的是旧版京东的素材。。。
先上效果图
接下来让我们看看HTML代码
<!DOCTYPE html>
<html lang="en">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet"type="text/css"href="css/bass.css"/>
<link rel="stylesheet"type="text/css"href="css/head.css"/>
<link rel="stylesheet"type="text/css"href="css/footer.css"/>
<link rel="stylesheet"type="text/css"href="css/index.css"/>
</head>
<body>
<!-- 顶部开始 -->
<div class="header">
<div class="w">
<a href="#"></a>
<span class="close">X</span>
</div>
</div>
<!-- 头部导航开始 -->
<div class="nav">
<div class="w">
<div class="l_address">
<div class="title">
<i><img src="img/dizhi.png"/></i>
<a href="#">⼴东</a>
</div>
<div class="content"></div>
</div>
<div class="r_list">
<ul>
<li><a href="#">请登⼊</a><a href="#">注册</a></li>
<li class="line"></li>
<li><a href="#">我的订单</a></li>
<li class="line"></li>
<li>
<a href="#">
我的京东
<i><img src="img/xiangxia.png"></i>
</a>
</li>
<li class="line"></li>
<li><a href="#">京东会员</a></li>
<li class="line"></li>
<li><a href="#">会员采购</a></li>
<li class="line"></li>
<li>
<a href="#">
客服服务
<i><img src="img/xiangxia.png"></i>
</a>
</li>
<li class="line"></li>
<li>
<a href="#">
⽹站导航
<i><img src="img/xiangxia.png"></i>
shows表示什么</a>
</li>
<li class="line"></li>
<li><a href="#">⼿机⽤户</a></li>
</ul>
</div>
</div>
</div>
</div>js数组在指定位置添加元素
<!-- logo开始 -->
<div class="logo w">
<!-- logo -->
<div class="l_logo">
<a href="#">我的京东</a>
</div>
<!-- 搜索框 -->
<div class="m_search">
<input type="text"value="低⾄5折"class="search"/>
<input type="button"value="搜索"class="btn"/>
</div>
<!-- 购物车 -->
<div class="cart">
<i><img src="img/gwc.png"/></i>
<a href="#">我的购物车</a>
<span>0</span>
</div>
<!-- 热词搜索 -->
<div class="hot_word">
<ul>
<li><a href="#">5折秒杀</a></li>
<li><a href="#">5折秒杀</a></li>
<li><a href="#">5折秒杀</a></li>
<li><a href="#">5折秒杀</a></li>
<li><a href="#">5折秒杀</a></li>
<li><a href="#">5折秒杀</a></li>
<li><a href="#">5折秒杀</a></li>
<li><a href="#">5折秒杀</a></li>
<li><a href="#">5折秒杀</a></li>
</ul>
</div>
<!-- 导航列表 -->
<div class="list">
<ul>
<li><a href="#">秒杀</a></li>
<li><a href="#">秒杀</a></li>
<li><a href="#">秒杀</a></li>
<li><a href="#">秒杀</a></li>
</ul>
<div class="hr"></div>
<ul>
<li><a href="#">服装⼚</a></li>
<li><a href="#">服装⼚</a></li>
<li><a href="#">服装⼚</a></li>
<li><a href="#">服装⼚</a></li>将一张图片生成静态网页
</ul>
<div class="hr"></div>
<ul>
<li>
<a href="#">京东⾦融</a>
</li>
</ul>
</div>
<!-- 宝藏 -->
<div class="treasure">
<a href="#"></a>
</div>
</div>
<!-- 主体内容开始 -->
<div class="banner_bg">
网站流量统计代码分享学生个人网页制作html代码css<a href="#"></a>
</div>
<!-- 主体⼴告开始 -->
<div class="main_banner w">
<div class="l_banner">
<ul>
<li><a href="#">家⽤电器</a></li>
<li><a href="#">家⽤电器</a></li>
<li><a href="#">家⽤电器</a></li>
<li><a href="#">家⽤电器</a></li>
<li><a href="#">家⽤电器</a></li>
<li><a href="#">家⽤电器</a></li>
<li><a href="#">家⽤电器</a></li>
<li><a href="#">家⽤电器</a></li>
<li><a href="#">家⽤电器</a></li>
<li><a href="#">家⽤电器</a></li>
<li><a href="#">家⽤电器</a></li>
<li><a href="#">家⽤电器</a></li>
<li><a href="#">家⽤电器</a></li>排名前十的主流编程语言
<li><a href="#">家⽤电器</a></li>
<li><a href="#">家⽤电器</a></li>
</ul>
</div>
<div class="m_banner">
<div class="top_banner">
<a href="#">
<img src="img/banner.jpg"/>
</a>
<div class="pages">
<a href="#"class="l_page"><</a>
<a href="#"class="r_page">></a>
</div>
<div class="numbers">
<ui>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ui>
</div>
</div>
<div class="bot_banner">
<a href="#">
<img src="img/img1.jpg">
</a>
<a href="#">
<img src="img/img2.jpg">
</a>
</div>
</div>
<div class="r_banner">
<div class="r_top_banner">
<div class="top_user clearfix">
<a href="#">
<img src="img/no_login.jpg">
</a>
<div class="userinfo">
<p class="p1">hi，请登⼊</p>
<p class="p2">
<a href="#">登⼊</a>
<a href="#">注册</a>
</p>
</div>
</div>
<div class="bot_btns">
<a href="#">新⼈福利</a>
<a href="#">PLUS会员</a>
</div>
</div>
<div class="r_mid_banner">留下</div>
<div class="r_bot_banner">
<ul>
<li>
<a href="#">
<i></i>
话费
</a>
</li>
<li><a href="#">话费</a></li>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。