如何制作网页的快捷导航栏部分？

快来打我* 2021-12-13 22:17 325阅读 0赞

**本文笔记基于「千古壹号」的GitHub项目：[https://github.com/qianguyihao/web][https_github.com_qianguyihao_web]  
转载请注明出处!**

**目录**

1.全部商品分类部分

2.具体商品分类部分

3.右侧logo

4.网页两侧的广告

5.轮播图

6.京东快报+充话费等

7.今日推荐

--------------------

主要布局如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjQzNjk0_size_16_color_FFFFFF_t_70][]

# 1.全部商品分类部分 #

*  html：设置div，第一行内容为超链接，其余行内容为列表形式；“>”放于标签i内，标签i的css设置请查阅博客“项目实战5”。
 *  css：z-index: 1; /\*通过z-index属性将层级放到最高\*/；超链接需要设置为块状，列表需要设置浮动，鼠标悬停时改变字体颜色，“>”符号设置绝对定位。

# 2.具体商品分类部分 #

*  html部分：设置列表，存放超链接
 *  css部分：设置浮动，鼠标悬停等

# 3.右侧logo #

两种方法：

*  设置超链接图片
 *  设置超链接文字，css中插入背景图，但是需要设置：text-indent: -9999em;隐藏文字

# 4.网页两侧的广告 #

*  设置超链接图片

# 5.轮播图 #

主要有3部分：图，箭头，索引序列

*  图：设置超链接图片
 *  箭头

html中设置2个超链接，内容分别为<>

css中设置绝对定位，鼠标悬停等效果，框为矩形的变形，其中左箭头为border-radius: 10px 0 0 10px;

*  索引序列

html中设置列表形式，css中设置浮动和绝对定位，序号为圆角矩形，设置代码为主要有：

border-radius: 50%;   /*圆角矩形*/
     cursor: pointer;   /*鼠标悬停时变成小手*/

# 6.京东快报+充话费等 #

*  京东快报

html中设置超链接文字，css中设置边框等

*  新闻

html中设置列表形式，但是每行的文字有两个格式，可以设置span再额外设置。

*  充话费

设置列表，单元格内容为一个超链接，超链接内为2部分内容：空盒子和文字，其中空盒子里插入图标，设置绝对浮动。

*  图片

插入超链接图片

# 7.今日推荐 #

主要由左侧1幅图和右侧若干图组成。

*  左侧

可以设置超链接图片也可以设置超链接，在css中再插入背景图。

*  右侧

html中设置列表——>超链接图片，在css中设置浮动和相对定位等，箭头设置绝对定位，设置方式与轮播图一样。

[https_github.com_qianguyihao_web]: https://github.com/qianguyihao/web
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjQzNjk0_size_16_color_FFFFFF_t_70]: /images/20211213/5d291fd3c67d4163a7fea14773a1e108.png