300字范文 > 淘宝-静态页面编写(2)--给淘宝写个头吧

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

时间：2023-12-30 08:19:08

标题

首先我们看到html页面的头部：

技术点：

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

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

并且在左侧插入图标

<link rel="icon" href="./index.png" >

脑袋

先新建一个index.css文件，用来存放当前页面所需样式。

然后我们先来实现这部分的简单样式：

可以将其划分为两部分:左边与右边,然后每一部分都可以用ul和li嵌套来完成

脑袋左侧

思路：

ul标签下包含四个li标签，用来写入相关内容由于在页面左侧，所以给ul加上之前写好的向左浮动标签。（这里注意这里的向左浮动指的是整个ul向左浮动，整个ul是一个整体，而后面写的li向左浮动才能显示出展示效果）

" 中国大陆"由于不是超链接，因此采用行级标签span其他则采用a标签进行超链接的包裹（这里仅使用#做空标签，想完善的可以去淘宝首页copy链接）一些相关小图标我们使用span进行占位

脑袋右侧

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

最终代码如下：

添加样式

接下来我们进行样式的添加，给文字粉刷一下！

这里我们讲一下小图标的添加方法：小图标目前都通过矢量图图标引入的方式来进行添加。

那么怎么添加呢？这里附上阿里的矢量图图标库：

登录后搜索想要的图标，然后将其加入购物车后下载代码即可，下载完后我们会得到如下的这样一个压缩包

点开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"><link rel="icon" href="./img/index.png"><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：博主在熬夜肝了，要是有帮助到大家，希望大家顺手点个赞鼓励一下博主，都是打工人，点个赞再走吧球球了。

有不懂的地方可以博客下面讨论，我会尽量给大家答疑。

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。