标题

首先我们看到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">&#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>

文件夹布局：

最后头部实现效果：

ps：博主在熬夜肝了，要是有帮助到大家，希望大家顺手点个赞鼓励一下博主，都是打工人，点个赞再走吧球球了。
有不懂的地方可以博客下面讨论，我会尽量给大家答疑。

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

淘宝-静态页面编写（4）--头部搜索/导航栏
头部搜索分块首先我们观察这部分,可清晰的将它分成三个模块,左边的淘宝网,中间的搜索栏以及右边的二维码.这里我们需想一下怎么把中间的搜索栏放入中间位置,我采用的是先将左右两侧靠边放置并设置浮动,那么 ...
淘宝静态页面html+css部分
淘宝静态页面html+css部分未来前端程序员为你提供一小点点的帮助,希望能够帮助你. 这是一个简简单单的淘宝静态页面,没有用到JavaScript部分.相信大家都知道,淘宝静态网页也不是特别的简单 ...
HTML+CSS实现淘宝静态页面
刚入门HTML+CSS,学习了一段时间后,为了练手,便写了这样一个静态的淘宝页面.就在刚才,终于完工.不得不说,内心有点小激动- 代码有点多,贴出来不太方便.如果大家有需要的话,直接去演示页面查看源代 ...
超详细实现淘宝静态页面(附全部代码)
文章目录一:基本结构与样式二:头部信息结构 1.淘宝小图标 2.目前效果 3.代码三:头部信息样式与自定义图标 1.设置收藏夹图标注意: 四:头部广告结构与样式 1.h标签的应用五:全部代码 ...
html,css 淘宝静态页面
源码素材下载地址点击我下载
静态页面复习--用semantic UI仿写豆瓣主页
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>豆瓣& ...
仿淘宝电商官网静态页面（HTML+CSS+JS）+ 常见布局解析，学会如果做是关键！
仿淘宝电商官网静态页面作为一个前端开发,布局+样式已经成为了必备的技能,你做得好是应该的,做的不好可以原谅,但当你意识到不足时,补足它这是我刚"入坑"的时候写的Demo,因为当 ...
HTML简单静态页面的编写
文章目录前言一.头部标签的编写 1.顶部的前半部分 2.顶部的后半部分二.中间标签的编写 1.中间部分二.底部标签的编写 1.底部前半部分 2.底部后半部分总结前言接下来的内容是,利用H ...
小辣鸡之——淘宝首屏静态页面的编写
html结构--css样式--js行为由于只是静态页面的编写,所以不涉及到js. 刚入门前端2个星期,写了这么个入门页面,mark这篇给自己看. 心得: 1.要先规划好区域.比如导航条.搜索条.主要 ...

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

标题

脑袋