利用html和csss实现京东首页静态页面

最新推荐文章于 2024-07-28 18:45:43 发布

「已注销」

最新推荐文章于 2024-07-28 18:45:43 发布

阅读量5.5k

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/luyongxin666/article/details/77125443

本文介绍如何利用HTML和CSS实现京东首页的静态页面。内容包括使用UTF-8编码，通过外链CSS文件组织样式，以及将头部导航和底部服务栏的CSS代码放入base.css中。重点讲解了页面结构分析，如轮播图的设计，通过<div>、<ul>、<li>等元素布局，并应用浮动和定位属性。建议结合W3C手册进行实践学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

京东首页静态页面的代码书写，熟悉html和css的使用和网页页面的实现。

1.编码格式为UTF-8，由于页面代码冗长，选择外链式css文件来加入css代码。

2.京东首页整体分为页面头部导航，中部内容和页面底部服务栏，其中头部导航与底部服务在每个京东子页面里出现，可以将其css代码写入base.css中

3.编写html代码时重要的是进行结构分析，比如轮播图的设计，首先使用<div></div>标签构造一个大盒子，里面包裹分别用ul标签和ol标签包裹若干li标签，ol 里的 li 负责表现 ul 里的 li 的索引，在书写css代码时 ol 需要进行绝对定位，子绝父相，div 需要相对定位.ul 里的 li 需要左浮动，ul 需溢出隐藏。

4.html和css零碎知识多，结合W3C手册，书写web页面可以快速系统的练习和掌握。

上代码 html代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>不是所有的页面都叫京东</title>
    <link rel="stylesheet" href="css/base.css"/>
    <link rel="stylesheet" href="css/index.css"/>
    <link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
<!--京东的头部导航开始-->
<div class="shortcut">
    <div class="w">
        <div class="fl">
           <div class="dt"> 送至：北京
               <i><s>◇</s></i>
           </div>
        </div>
        <div class="fr">
            <ul>
                <li>
                    <a href="#">你好，请登录</a>   
                    <a href="#" class="col-red">免费注册</a>
                </li>
                <li class="line"></li>
                <li>我的订单</li>
                <li class="line"></li>
                <li class="fore">我的京东
                    <i><s>◇</s></i>
                </li>
                <li class="line"></li>
                <li>京东会员</li>
                <li class="line"></li>
                <li>企业采购</li>
                <li class="line"></li>
                <li class="fore tel-jd">
                    <em class="tel"></em>
                    手机京东
                    <i><s>◇</s></i>
                </li>
                <li class="line"></li>
                <li class="fore">
                    关注京东
                    <i><s>◇</s></i>
                </li>
                <li class="line"></li>
                <li class="fore">
                    客户服务
                    <i><s>◇</s></i>
                </li>
                <li class="line"></li>
                <li class="fore">
                    网站导航
                    <i><s>◇</s></i>
                </li>
            </ul>
        </div>
    </div>

</div>
<!--京东头部导航结束-->
<!--京东的topbanner部分-->
<div class="topbanner">
    <div class="w tp">
        <img src="images/topbanner.jpg" alt=""/>
        <a href="javascript:;" class="close-banner"></a>
    </div>
</div>
<!--京东的topbanner部分 end-->

<div class="w clearfix">
    <div class="logo">
        <a href="http://www.jd.com" target="_blank" class="jd-a" title="叮咚">京东</a>
        <div class="db11">
            <a href="#"><img src="images/dong.gif" alt=""/></a>
        </div>
    </div>
    <div class="search">
        <input type="text" name="" id="" value="图书开抢"/>
        <button>搜索</button>
    </div>
    <div class="car">
        <a href="#">俺的购物车</a>
        <span class="icon1"></span>
        <span class="icon2">></span>
        <span class="icon3">8</span>
    </div>
    <div class="hotwords">
        <a href="#" class="col-red">11月11天</a>
        <a href="#">11.11秒杀</a>
        <a href="#">买2免1</a>
        <a href="#">Note5 黑</a>
        <a href="#">12期免息</a>
        <a href="#">智能科技</a>
        <a href="#">清仓</a>
        <a href="#">国际服饰</a>
        <a href="#">优惠券</a>
    </div>
</div>

<!--nav 部分开始-->

<div class="jd-nav">
    <div class="w">
        <div class="dropdown">
            <div class="dt">
                <a href="#">全部商品分类</a>
            </div>
            <div class="dd">
                <div class="items">
                    <h3>家用电器</h3>
                    <span>></span>
                </div>
                <div class="items">
                    <h3>手机、数码、京东通信</h3>
                    <span>></span>
                </div>