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

程序员文章站 2022-06-17 10:20:53

标题...

标题

首先我们看到html页面的头部：
淘宝-静态页面编写(2)--给淘宝写个头吧

技术点：

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

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

并且在左侧插入图标

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

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

脑袋

先新建一个index.css文件，用来存放当前页面所需样式。
然后我们先来实现这部分的简单样式：
淘宝-静态页面编写(2)--给淘宝写个头吧可以将其划分为两部分:左边与右边,然后每一部分都可以用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>
        </ul>
        <ul class="rightHead fr">
            <li>
                <a href="#">我的淘宝</a>
                <span></span>
            </li>
            <li>
                <span></span>
                <a href="#">购物车</a>
                <strong>0</strong>
                <span></span>
            </li>
            <li>
                <a href="#">
                    <span></span>
                    收藏夹
                </a>
                <span></span>
            </li>
            <li>
                <a href="#">商品分类</a>
            </li>
            <li>|</li>
            <li>
                <a href="#">千牛卖家中心</a>
                <span></span>
            </li>
            <li>
                <a href="#">联系客服</a>
                <span></span>
            </li>
            <li>
                <span></span>
                <a href="#">网站导航</a>
                <span></span>
            </li>
        </ul>
    </div>

添加样式

接下来我们进行样式的添加，给文字粉刷一下！
这里我们讲一下小图标的添加方法：小图标目前都通过矢量图图标引入的方式来进行添加。
那么怎么添加呢？这里附上阿里的矢量图图标库：
https://www.iconfont.cn/
登录后搜索想要的图标，然后将其加入购物车后下载代码即可，下载完后我们会得到如下的这样一个压缩包
淘宝-静态页面编写(2)--给淘宝写个头吧点开html文件：

按照步骤使用即可。记得修改文件的路径！！！

我的index.css代码：

/* 
    @规则
		@charset    设置样式表的编码 
		@import		导入其它样式文件
		@meida		媒体查询
		@font-face	自定义字体
 */
 @import 'reset.css';

 @font-face {
     font-family: 'iconfont';
     src: url('../font/iconfont.eot');
     src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),
         url('../font/iconfont.woff2') format('woff2'),
         url('../font/iconfont.woff') format('woff'),
         url('../font/iconfont.ttf') format('truetype'),
         url('../font/iconfont.svg#iconfont') format('svg');
 }
 .iconfont {
	font-family: "iconfont" !important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* 头部信息 */
#headMessage li{
	float: left;
	line-height: 35px;
	padding: 0 6px;
	font-size: 0;
}
#headMessage a{
	color: #6c6c6c;
	font-size: 12px;
}
#headMessage a:hover{
	color: #f40;
}
#headMessage a.login{
	color: #f22e00;
}
#headMessage span{
	font-size: 12px;
}
#headMessage span.arrow{
	margin-left: 7px;;
}
#headMessage li strong{
	font-size: 12px;
	color: #f22e00;
}
#headMessage li span.stroe{
	color: #9c9c9c;
}
#headMessage li.line{
	font-size: 12px;
	color: #ddd;
	padding: 0 5px;
}

html代码：

<!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="./img/index.png">
    <!-- <base> 标签必须位于 head 元素内部。target表示打开网页方式，_blank表示在新标签页打开 -->
    <base target="_blank">
</head>

<body>

    <!-- 头部信息 -->
    <div id="headMessage" class="clearfix">
        <ul class="leftHead fl">
            <li class="title">
                <span>*</span>
                <span class="iconfont arrow">&#xe733;</span>
            </li>
            <li class="mr7">
                <a href="#">亲，请登录</a>
            </li>
            <li class="mr7">
                <a href="#">免费注册</a>
            </li>
            <li>
                <a href="#">手机逛淘宝</a>
            </li>
        </ul>
        <ul class="rightHead fr">
            <li>
                <a href="#">我的淘宝</a>
                <span class="iconfont arrow">&#xe733;</span>
            </li>
            <li>
                <span class="iconfont mr5 c4">&#xe63a;</span>
                <a href="#">购物车</a>
                <strong>0</strong>
                <span class="iconfont arrow">&#xe733;</span>
            </li>
            <li>
                <a href="#"><span class="iconfont mr5 stroe">&#x3432;</span>收藏夹</a>
				<span class="iconfont arrow">&#xe733;</span>
            </li>
            <li>
				<a href="#">商品分类</a>
			</li>
			<li class="line">|</li>
			<li>
				<a href="#">千牛卖家中心</a>
				<span class="iconfont arrow">&#xe733;</span>
			</li>
			<li>
				<a href="#">联系客服</a>
				<span class="iconfont arrow">&#xe733;</span>
			</li>
			<li>
				<span class="iconfont c4 mr5">&#xe66d;</span>
				<a href="#">网站导航</a>
				<span class="iconfont arrow">&#xe733;</span>
			</li>
        </ul>
    </div>
    <!-- 头部广告 -->
    <div id="headAd"></div>
    <!-- 头部搜索 -->
    <div id="headSearch"></div>
    <!-- 导航栏 -->
    <div id="nav"></div>
    <!-- 首屏内容 -->
    <div id="content"></div>
    <!-- 有好货&爱逛街 -->
    <div id="layer"></div>
    <!-- 右侧导航 -->
    <div id="tools"></div>

</body>

</html>