淘宝静态页面-----Day 1 导航栏

2024-01-08 22:29:10

1.项目的准备

css文件夹中两个css文件:base.css与common.css，其中common.css用于相同的样式

fonts文件夹用于存放各种图标

images用于存放样式图片

uplaod用于存放产品图片

2.左上角小图标的制作

截取一张图片(jpg格式或png格式)，在比特虫网站里进行格式转换，转换为ico格式

之后在<head>中写入代码

<link rel="shortcut icon" href="taobao1.ico" />
    <!-- 左上角小图标 -->

3.网站的SEO优化

（1）title网站标题

（2）descript网站说明

（3）keywords关键字

<meta name="description"
        content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！" />
    <meta name="keyword"
        content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺" />

    <title>淘宝网-淘！我喜欢</title>

4.快捷导航栏分析

整体是一个大盒子，大盒子里有左盒子和右盒子。

左盒子：里面两个li,其中第二个li中有三个a

右盒子：里面八个li（小竖线也是li），每个li里有一个a（因为li是块级元素，这样有助于调整间距，而a不是块级元素）

5.左盒子制作

首先是整体的大盒子

 <div class="shortcut">

<div class="shortcutLeft">
            <ul>
                <li class="chooseWhere">*&nbsp;&nbsp;<span class="iconfont">&#xe62d;</span></li>

                <li>
                    <a href="#" class="denglu">&nbsp;&nbsp;&nbsp;&nbsp;亲，请登录&nbsp;</a>
                    <a href="#">免费注册&nbsp;&nbsp;&nbsp;</a>
                    <a href="#">手机逛淘宝</a>
                </li>
            </ul>
        </div>

使用阿里矢量图库，插入在字体的旁边

<span class="iconfont">&#xe60d;&nbsp;

注意引入图标的时候，@font-face中的url可能需要加"../"返回上级目录，直到找到fonts文件夹

使用左浮动，使元素排列在一行上。中间的空隙用 

6.右盒子制作

<div class="shortcutRight">
            <ul>
                <li><a href="#">我的淘宝&nbsp;&nbsp;<span class="iconfont">&#xe62d;</a></li>
                <li><a href="#"><span class="iconfont">&#xe618;&nbsp;购物车&nbsp;&nbsp;<span class="iconfont">&#xe62d;</a>
                </li>
                <li><a href="#"><span class="iconfont">&#xe60d;&nbsp;</span>收藏夹&nbsp;&nbsp;<span
                            class="iconfont">&#xe62d;</a>
                </li>
                <li><a href=#>商品分类</a></li>
                <li><a href="#">免费开店</a></li>
                <li class="shuxian"></li>
                <li><a href="#">千牛卖家中心&nbsp;&nbsp;<span class="iconfont">&#xe62d;</a></li>
                <li><a href="#">联系客服&nbsp;&nbsp;<span class="iconfont">&#xe62d;</a></li>
                <li><a href="#">网站导航&nbsp;&nbsp;<span class="iconfont">&#xe62d;</a></li>
            </ul>
        </div>

值得注意的是小竖线的制作:

.shortcutRight .shuxian{
    width:1px;
    height: 17px;
    margin-top:9px;
    margin-bottom: 9px;
    margin-right:17px;
    background-color: #dddddd;
}

另外一个值得注意的问题是：右侧盒子同样使用左浮动，因为浮动相当于把元素一个一个地往一个方向放，而不是整体放，因此如果写成右浮动的话，会导致“我的淘宝”出现在最右侧

去除li前面小点的代码：

list-style: none;

去除a的下划线的代码：

text-decoration: none;

整体效果：