如何制作网页的顶部和底部？

喜欢ヅ旅行 2021-12-16 08:17 350阅读 0赞

**本文笔记基于「千古壹号」的GitHub项目：[https://github.com/qianguyihao/web][https_github.com_qianguyihao_web]**

**目录**

1.引入外链设置

2.css通用设置

3.顶部导航

4.banner图

5.搜索框部分

6.搜索框下面部分

7.“多快好省”等口号

8.购物指南

9.地图

10.其他

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

基本div设置思路，从上到下，从左到右，层层嵌套，主要div框架如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjQzNjk0_size_16_color_FFFFFF_t_70][]

# 1.引入外链设置 #

*  在head标签内引入
 *  <link rel="stylesheet" href="css/base.css">   //导入css代码
 *  <link rel="shortcut icon" href="favicon.ico">  //导入JD图标，效果如下：

![20190705155038165.png][]

# 2.css通用设置 #

*  初始化

@charset "UTF-8";
    /*css 初始化 */
    html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }
    fieldset, img,input,button { border:none; padding:0;margin:0;outline-style:none; }

代替通用的  \* 设置，默认初始边距和框宽均为0，去掉轮廓

*  清除浮动

.clearfix:before, .clearfix:after {
        content: "";
        display: table;
    }
    
    .clearfix:after {
        clear: both;
    }
    
    .clearfix {
        *zoom: 1; /*IE/7/6*/
    }

*  鼠标悬停

.col-red{color: #C81623!important;}

*  公共类部分

.w { /*版心 */
        width: 1210px;
        margin: 0 auto;
    }
    .fl {/*左浮动*/
        float: left
    }
    
    .fr {/*右浮动*/
        float: right
    }
    .hide {/* 隐藏 */
        display: none
    }

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

# 3.顶部导航 #

需要先设置一个大的div，然后在里面设置一个div作为版心，使里面的内容居中显示，在版心内主要包含两个div内容，分别呈左右浮动的方式。

**（1）左浮动区域**

难点在于对◇进行裁剪，需要下半部分。另一种方法是截图，以图片的形式插入，但是清晰度不行，与背景颜色违和。

这部分的CSS代码分为3部分：

*  父相

.dt {
        padding: 0 20px 0 10px;
        position: relative;
    }

查看F12得dt的内容（包含内边距）为90px\*30px

*  子绝：

.dt i {
        width: 16px;
        height: 8px;
        font: 400 16px/16px "宋体";    
        position: absolute;
        top: 13px;
        right: 3px;
        overflow: hidden;
        
    }

设置一个16px\*8px的盒子，字体大小为16px\*16px，采取绝对定位，在dt内，距离内边距上端13px，右端3px处，溢出的地方隐藏。

*  孙绝：

.dt s{
        position: absolute;
        top: -8px;
        left: 0;
    }

相对于其父i，上移8px位置。

**（2）右浮动区域**

主要采用列表的形式，重点在于3部分：

*  超链接设置

“你好，请登录”与“免费注册”分别在两个超链接内，但初始颜色分别为红，黑，但悬停后者时需要设置为红色。

*  竖线

可以设置右边框线，但此图中较短，用右框线不好看。故可以设置为一个li，宽度很小，设置外边距和颜色。具体代码如下:

.fr .line {
        width: 1px;
        height: 12px;
        background-color: #ddd;
        margin-top: 9px;
        padding: 0;
    }

*  小手机图标

可以设置一个很小的盒子，将手机图标装进去，若图标的位置不是第一个，则需要设置background-position。

# 4.banner图 #

主要有两部分：

（1）大图

以图片超链接的形式插入

（2）小图叉号

父相子绝

# 5.搜索框部分 #

版心内设置4个div

（1）logo图

首先设置一个超链接，在CSS中将其转化为块状，插入logo背景图。

（2）搜索框

设置文本输入框和按钮

（3）购物车

![20190706212535426.png][]

设计一个div，里面由4部分构成：

*  购物车图标:设置绝对定位
 *  文字“我的购物车”：设置超链接
 *  符号“>”：用符号“&gt；”代替，同时设置绝对定位
 *  上标8：设置绝对定位，画圆角矩形代码：border-radius: 7px 7px 7px 0;

# 6.搜索框下面部分 #

html部分设置超链接，css中设置浮动、大小等设置

# 7.“多快好省”等口号 #

html中插入图片，包含4个span标签中，其中class="item slogen1"、class="item slogen2"等

css中对item统一设置绝对定位，left: 50%;然后可以每个标签具体设置，如

.slogen1 {
        margin-left: -608px;
    }

# 8.购物指南 #

html中：与table标签类似，采用dl（类似table），dt（标题），dd标签（每行）设置，效果如下：

![201907062148331.png][]

其中每行内容设置为超链接。css中对dl设置左浮动。

# 9.地图 #

html中设置文字，css中插入地图作为背景图。

# 10.其他 #

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/20211214/3bfd19f8f8554590ab163a96af5f5a40.png
[20190705155038165.png]: /images/20211214/02c52bf30bb94b2d8f69d9e0ece18b98.png
[20190706212535426.png]: /images/20211214/e1edaa7e980d4709a3236e9c1fdd2c2d.png
[201907062148331.png]: /images/20211214/09344295bf6841c5ad37e9947f5acc5e.png