add jd url
This commit is contained in:
qianguyihao
parent
84bdd581c7
commit
a82c697adb
@ -1,26 +1,19 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 前言
|
||||
|
||||
京东是典型的电商类网站，学习这个网站的制作比较有价值。我们准备用WebStorm进行开发。
|
||||
|
||||
京东首页的截图为：<http://img.smyhvae.com/20180119_1653.jpg>
|
||||
|
||||
### 页面规划：新建一个空的工程
|
||||
|
||||
我们首先新建一个空的工程：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 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文件中引入它。引入外部
|
||||
<link rel="stylesheet" href="css/base.css">
|
||||
```
|
||||
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
@ -158,12 +148,10 @@ base.css初始化之后，我们需要在html文件中引入它。引入外部
|
||||
|
||||
### Favicon 小图标
|
||||
|
||||
|
||||
Favicon 图标指的是箭头处这个小图标：
|
||||
|
||||
|
||||
|
||||
|
||||
官网链接<https://www.jd.com/favicon.ico>可以下载这个小图标。
|
||||
|
||||
我们把`favicon.ico`图片放到工程文件的根目录，通过下面这种方式进行加载：
|
||||
@ -176,14 +164,11 @@ Favicon 图标指的是箭头处这个小图标：
|
||||
|
||||
代码位置：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 顶部导航的制作
|
||||
|
||||
|
||||
我们先制作下面这个部分，它位于网站的最顶部：
|
||||
|
||||
|
||||
@ -250,7 +235,6 @@ Favicon 图标指的是箭头处这个小图标：
|
||||
|
||||
顶部导航栏需要加入的css样式如下：（放到base.css中）
|
||||
|
||||
|
||||
```css
|
||||
/*顶部导航start*/
|
||||
.shortcut {
|
||||
@ -324,13 +308,10 @@ css代码解释：
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
然后将左侧的文字设置为左浮动，右侧的文字设置为右浮动。
|
||||
|
||||
|
||||
（2）完成左侧部分的文字。
|
||||
|
||||
|
||||
（3）右侧部分文字的结构：ul中放了九个li，用来存放文字。代码快捷键是`ul>li*9`（符号`>`是包含的关系）。
|
||||
|
||||
需要注意的是，“登录”和“注册”是同一个<li>里面的两个`<a>`。它们是一个整体，所以要放到同一个li里。
|
||||
@ -342,7 +323,6 @@ css代码解释：
|
||||
|
||||
上图所示，我们发现，每个li之间都有`1像素宽、12像素高的间隔线`，这个也是用li做的。
|
||||
|
||||
|
||||
（5）增加文字右侧的小三角。
|
||||
|
||||
（6）在`手机京东`这个li中增加手机小图标，这里用到了css精灵图。
|
||||
@ -352,16 +332,12 @@ css代码解释：
|
||||
|
||||
<http://download.csdn.net/download/smyhvae/10214943>
|
||||
|
||||
|
||||
|
||||
## 顶部banner图
|
||||
|
||||
接下来我们只做顶部的banner图，效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
也就是上图中“1元抢宝”的那个位置。
|
||||
|
||||
涉及到的html代码如下：
|
||||
@ -408,11 +384,9 @@ css代码解释：
|
||||
|
||||
重点是`close-banner`这个class，也就是右上角的那个`X`。这里用到了子绝父相，注意，设置相对定位的父亲是`tp`这个class，因为要考虑到网页缩放的情况。
|
||||
|
||||
|
||||
`.close-banner:hover`这个属性里，我们设置的背景图的定位是bottom，意思是，保证精灵图和父亲的底边贴齐，就不用使用像素的方式对精灵兔图进行定位了。
|
||||
|
||||
|
||||
|
||||
## 搜索框
|
||||
|
||||
搜索框的UI如下：
|
||||
@ -420,7 +394,6 @@ css代码解释：
|
||||
|
||||
|
||||
|
||||
|
||||
上图中，包含了四个部分：
|
||||
|
||||
- 左侧的logo
|
||||
@ -440,7 +413,6 @@ css代码解释：
|
||||
<div class="search-moreA"></div>
|
||||
```
|
||||
|
||||
|
||||
相关的html代码如下：
|
||||
|
||||
```html
|
||||
@ -477,7 +449,6 @@ css代码解释：
|
||||
<!--search部分end-->
|
||||
```
|
||||
|
||||
|
||||
相关的css代码如下：
|
||||
|
||||
```css
|
||||
@ -573,7 +544,6 @@ css代码解释：
|
||||
/*search部分end*/
|
||||
```
|
||||
|
||||
|
||||
对于这四个部分，我们依次来讲解。
|
||||
|
||||
### 1、左侧的logo
|
||||
@ -705,19 +675,16 @@ css的代码如下；
|
||||
|
||||
上图中，需要实现的内容包括两个部分：左侧的购物指南和右侧的区域覆盖（我把这两个部分用红线隔开了）。
|
||||
|
||||
|
||||
### 购物指南
|
||||
|
||||
需要使用的布局如下：
|
||||
|
||||
|
||||
|
||||
|
||||
这里的重点是要量出dt和dd的行高。
|
||||
|
||||
html代码如下：
|
||||
|
||||
|
||||
```html
|
||||
|
||||
<!--购物指南等 start-->
|
||||
@ -808,11 +775,8 @@ html代码如下：
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
|
||||
css代码如下：
|
||||
|
||||
|
||||
```css
|
||||
/*覆盖区域 start*/
|
||||
.coverage {
|
||||
@ -841,21 +805,14 @@ css代码如下：
|
||||
注意这里将精灵图设置为背景时，用到的定位属性是`left bottom`，意思是保证精灵图的左侧跟父亲左侧贴齐，下方和父亲下方贴齐。这样做的话，就不用通过像素来进行定位了。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 最底部
|
||||
|
||||
最底部的效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
如上图所示，它包含了三个部分。
|
||||
|
||||
|
||||
涉及到的html代码如下：
|
||||
|
||||
```html
|
||||
@ -898,7 +855,6 @@ css代码如下：
|
||||
|
||||
```
|
||||
|
||||
|
||||
涉及到的css代码如下：
|
||||
|
||||
```css
|
||||
@ -936,7 +892,6 @@ css代码如下：
|
||||
|
||||
|
||||
|
||||
|
||||
对应的工程文件如下：
|
||||
|
||||
- [2018-01-22-前端基础练习-JD顶部导航.rar](http://download.csdn.net/download/smyhvae/10218487)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user