淘宝-静态页面编写(2)--给淘宝写个头吧

最新推荐文章于 2021-10-23 19:50:04 发布

VIP文章蒋宗正啊

最新推荐文章于 2021-10-23 19:50:04 发布

阅读量818

点赞数 10

分类专栏：前端面试文章标签： css html

本文链接：https://blog.csdn.net/weixin_42898315/article/details/110871235

版权

标题

首先我们看到html页面的头部：
在这里插入图片描述

技术点：

我们需要在标题内写入相关文字

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

并且在左侧插入图标

<!--图片楼下自取，icon表示文件格式为图标格式-->
   <link rel="icon" href="./index.png" >

在这里插入图片描述

脑袋

先新建一个index.css文件，用来存放当前页面所需样式。
然后我们先来实现这部分的简单样式：
在这里插入图片描述可以将其划分为两部分:左边与右边,然后每一部分都可以用ul和li嵌套来完成

脑袋左侧

思路：

ul标签下包含四个li标签，用来写入相关内容
由于在页面左侧，所以给ul加上之前写好的向左浮动标签。（这里注意这里的向左浮动指的是整个ul向左浮动，整个ul是一个整体，而后面写的li向左浮动才能显示出展示效果）
" 中国大陆"由于不是超链接，因此采用行级标签span
其他则采用a标签进行超链接的包裹（这里仅使用#做空标签，想完善的可以去淘宝首页copy链接）
一些相关小图标我们使用span进行占位

脑袋右侧

和左侧步骤一样，需要注意的是几个图标所在位置要一一对应起来。

最终代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝网 - 淘！我喜欢</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
    <!-- icon为图标格式，直接在head头部嵌入即可在标题左侧显示
    但是需注意该文件必须放在根目录下 -->
    <link rel="icon" href="./index.png">
    <!-- <base> 标签必须位于 head 元素内部。target表示打开网页方式，_blank表示在新标签页打开 -->
    <base target="_blank">
</head>

<body>

    <!-- 头部信息 -->
    <div id="headMessage" class="clearfix">
        <ul class="fl">
            <li>
                <span>中国大陆</span>
                <span></span>
            </li>
            <li>
                <a href="#">亲，请登录</a>
            </li>
            <li>
                <a href="#">免费注册</a>
            </li>
            <li>
                <a href="#">手机逛淘宝</a>
            </li>