diff --git a/04-前端基础练习/01-CSS基础练习：JD首页的制作（顶部和底部）.md b/04-前端基础练习/01-CSS基础练习：JD首页的制作（顶部和底部）.md index 3736bc7..9d80cbf 100644 --- a/04-前端基础练习/01-CSS基础练习：JD首页的制作（顶部和底部）.md +++ b/04-前端基础练习/01-CSS基础练习：JD首页的制作（顶部和底部）.md @@ -1,26 +1,19 @@ - - - ## 前言 京东是典型的电商类网站，学习这个网站的制作比较有价值。我们准备用WebStorm进行开发。 +京东首页的截图为： ### 页面规划：新建一个空的工程 我们首先新建一个空的工程： - ![](http://img.smyhvae.com/20180118_1733.png) - - - - ### CSS初始化（基本样式） @@ -103,7 +96,6 @@ s,i,em{font-style:normal;text-decoration:none;} /*去掉i标签和em的斜体 ``` - 上方代码解释： （1）**清除浮动**的方式： @@ -138,7 +130,6 @@ img标签中，我们通过`vertical-align:middle`属性**去掉图片底侧默 `s`是删除线，`i`和`em`是斜体。我们经常用它们做一些小装饰、小图标。 - ### 引入css文件 base.css初始化之后，我们需要在html文件中引入它。引入外部样式表的方式如下：（`stylesheet`指样式表） @@ -147,7 +138,6 @@ base.css初始化之后，我们需要在html文件中引入它。引入外部 ``` - 效果如下： ![](http://img.smyhvae.com/20180118_2002.png) @@ -158,12 +148,10 @@ base.css初始化之后，我们需要在html文件中引入它。引入外部 ### Favicon 小图标 - Favicon 图标指的是箭头处这个小图标： ![](http://img.smyhvae.com/20180118_2013.png) - 官网链接可以下载这个小图标。 我们把`favicon.ico`图片放到工程文件的根目录，通过下面这种方式进行加载： @@ -176,14 +164,11 @@ Favicon 图标指的是箭头处这个小图标： 代码位置： - - ![](http://img.smyhvae.com/20180118_2020.png) ## 顶部导航的制作 - 我们先制作下面这个部分，它位于网站的最顶部： ![](http://img.smyhvae.com/20180118_2040.png) @@ -250,7 +235,6 @@ Favicon 图标指的是箭头处这个小图标： 顶部导航栏需要加入的css样式如下：（放到base.css中） - ```css /*顶部导航start*/ .shortcut { @@ -324,13 +308,10 @@ css代码解释： } ``` - 然后将左侧的文字设置为左浮动，右侧的文字设置为右浮动。 - （2）完成左侧部分的文字。 - （3）右侧部分文字的结构：ul中放了九个li，用来存放文字。代码快捷键是`ul>li*9`（符号`>`是包含的关系）。 需要注意的是，“登录”和“注册”是同一个
  • 里面的两个``。它们是一个整体，所以要放到同一个li里。 @@ -342,7 +323,6 @@ css代码解释： 上图所示，我们发现，每个li之间都有`1像素宽、12像素高的间隔线`，这个也是用li做的。 - （5）增加文字右侧的小三角。 （6）在`手机京东`这个li中增加手机小图标，这里用到了css精灵图。 @@ -352,16 +332,12 @@ css代码解释： - - ## 顶部banner图 接下来我们只做顶部的banner图，效果如下： - ![](http://img.smyhvae.com/20180122_1020.png) - 也就是上图中“1元抢宝”的那个位置。 涉及到的html代码如下： @@ -408,11 +384,9 @@ css代码解释： 重点是`close-banner`这个class，也就是右上角的那个`X`。这里用到了子绝父相，注意，设置相对定位的父亲是`tp`这个class，因为要考虑到网页缩放的情况。 - `.close-banner:hover`这个属性里，我们设置的背景图的定位是bottom，意思是，保证精灵图和父亲的底边贴齐，就不用使用像素的方式对精灵兔图进行定位了。 - ## 搜索框 搜索框的UI如下： @@ -420,7 +394,6 @@ css代码解释： ![](http://img.smyhvae.com/20180122_1301.png) - 上图中，包含了四个部分： - 左侧的logo @@ -440,7 +413,6 @@ css代码解释：
    ``` - 相关的html代码如下： ```html @@ -477,7 +449,6 @@ css代码解释： ``` - 相关的css代码如下： ```css @@ -573,7 +544,6 @@ css代码解释： /*search部分end*/ ``` - 对于这四个部分，我们依次来讲解。 ### 1、左侧的logo @@ -705,19 +675,16 @@ css的代码如下； 上图中，需要实现的内容包括两个部分：左侧的购物指南和右侧的区域覆盖（我把这两个部分用红线隔开了）。 - ### 购物指南 需要使用的布局如下： ![](http://img.smyhvae.com/20170704_1727.png) - 这里的重点是要量出dt和dd的行高。 html代码如下： - ```html @@ -808,11 +775,8 @@ html代码如下： ``` - - css代码如下： - ```css /*覆盖区域 start*/ .coverage { @@ -841,21 +805,14 @@ css代码如下： 注意这里将精灵图设置为背景时，用到的定位属性是`left bottom`，意思是保证精灵图的左侧跟父亲左侧贴齐，下方和父亲下方贴齐。这样做的话，就不用通过像素来进行定位了。 - - - - ## 最底部 最底部的效果如下： ![](http://img.smyhvae.com/20180122_1909.png) - - 如上图所示，它包含了三个部分。 - 涉及到的html代码如下： ```html @@ -898,7 +855,6 @@ css代码如下： ``` - 涉及到的css代码如下： ```css @@ -936,7 +892,6 @@ css代码如下： ![](http://img.smyhvae.com/20180122_1920.png) - 对应的工程文件如下： - [2018-01-22-前端基础练习-JD顶部导航.rar](http://download.csdn.net/download/smyhvae/10218487)