淘宝-静态页面编写(2)--给淘宝写个头吧
程序员文章站
2022-03-07 12:12:12
标题...
标题
首先我们看到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>
</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/
登录后搜索想要的图标，然后将其加入购物车后下载代码即可，下载完后我们会得到如下的这样一个压缩包点开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"></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"></span>
</li>
<li>
<span class="iconfont mr5 c4"></span>
<a href="#">购物车</a>
<strong>0</strong>
<span class="iconfont arrow"></span>
</li>
<li>
<a href="#"><span class="iconfont mr5 stroe">㐲</span>收藏夹</a>
<span class="iconfont arrow"></span>
</li>
<li>
<a href="#">商品分类</a>
</li>
<li class="line">|</li>
<li>
<a href="#">千牛卖家中心</a>
<span class="iconfont arrow"></span>
</li>
<li>
<a href="#">联系客服</a>
<span class="iconfont arrow"></span>
</li>
<li>
<span class="iconfont c4 mr5"></span>
<a href="#">网站导航</a>
<span class="iconfont arrow"></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>
文件夹布局：
最后头部实现效果：
ps：博主在熬夜肝了，要是有帮助到大家，希望大家顺手点个赞鼓励一下博主，都是打工人，点个赞再走吧球球了。
有不懂的地方可以博客下面讨论，我会尽量给大家答疑。
本文地址：https://blog.csdn.net/weixin_42898315/article/details/110871235
上一篇： 羊骨头汤怎么保存
下一篇： 一文看懂h5+app拍照上传图片