《京东首页》实操作业笔记

准备阶段

任务实施

• 创建京东首页文件夹
• 拷贝所有素材文件
• 创建 ./index.html 文件和 ./css/index.css 文件
• 编写 index.html 文件 head 部分，使用<link>标签链接外部 CSS 文件，使用 <script src=""></script> 引入外部 jQuery 库文件
• 编写 index.css 文件，设置默认样式
• 在 index.html 文件中定义最外层的 div <div class="SevenOne"></div> 并设置其宽高

顶部广告部分

任务实施

• 创建 div <div class="adver"></div> 设置宽、高、背景色样式
• 添加图片 <img src="./images/top.jpg"> 设置图片为块级元素，并居中显示

一级导航部分

任务实施

• 创建 div <div class="nav_one"></div>
• 在 <div class="nav_one"></div> 中创建 div <div class="nav_one_center"></div>
• 在 <div class="nav_one_center"></div> 中添加两个 P 标签，分别以 noc_p1 和 noc_p2 命名 class
• noc_p1 中设置定位图标以及城市
• noc_p2 中添加 9 条超链接和一张二维码图片 <img src="./images/erweima.png" id="er">
• 为 手机京东 添加 id id="phone"
• 为 id="phone" 添加鼠标移入、移出事件控制图片的隐藏/显示，具体代码如下

<script>
    $(function()
    {
        $("#phone").mouseover(function()
        {
            $("#er").css('display','block');
        });

        $("#phone").mouseleave(function()
        {
            $("#er").css('display','none');
        })
    })
</script>

二级导航部分

任务实施

• 创建 div <div class="nav_two"></div>
• 在 <div class="nav_two"></div> 中创建 div <div class="nav_two_center"></div> 并设置相对定位。
• 在 <div class="nav_two_center"></div> 中添加 logo 图片，设置图片绝对定位，调整 top 和 left 值，实现效果图中的效果。
• 设计二级标签的主要部分 <div class="ntc_main"></div>
• 在主要部分中设计搜索框 <div class="search"></div>
• 在 <div class="search"></div> 中加入输入框 <input type="text">，相机 <div class="camera"></div>，搜索链接 <div class="submit"></div>
• 设计购物车 <div class="shopping_carr"></div>
• 使用 p 标签设计搜索栏下方的文字
• 利用定位设计搜索框下方的导航

主体部分

任务实施

• 整体结构分为左、中、右三大部分
• 左侧 <div class="content_left"></div> 由16个 p 标签组成，每个标签对应一行文本。
• 中间 <div class="content_center"></div> 由顶部 div 和下面两张图片组成，顶部 div <div class="content_center_top"></div> 中包括 ul 和 ol 两部分，ul 中存放图片，ol 中存放导航点，利用定位设置他们的位置。
• 右侧分为上、中、下三个模块进行设计。顶部：<div class="content_right_top"></div> 由 图片和 P 标签组成。中间：<div class="content_right_center"></div> 由 P 标签和 ul 组成。底部：<div class="content_right_bottom"></div> 由 ul 构成。

尾部

任务实施

• 尾部采用 ul 无序列表布局。

整体结构