1. 快捷导航shortcut制作

1.1 如何分块

分析如下

1.2 如何添加“| ”分隔符

1.3 如何添加小箭头

字体图标下载地址： IcoMoon App - Icon Font, SVG, PDF & PNG Generator
选好以后打开文件夹复制fonts文件和style.css文件的第一个css代码
复制fonts到我自己的fonts文件
复制style.css的第一个：@font-face{……}到我的common.css第一行，注意路径前面加上…/

/* 版心 */
.w{width: 1200px;margin: 0 auto;
}
.fl{float: left;
}
.fr{float: right;
}
.style_red{color:#c81623;
}
.shortcut{height: 31px;line-height: 31px;background-color: #f1f1f1;font-size: 15px;
}
.shortcut ul li{float: left;
}
.shortcut .fr ul li:nth-child(even){width: 1px;height: 17px;background-color: rgb(90, 90, 90);margin: 7px 12px;
}
.arrow-icon::after {content: '';font-family: 'icomoon';margin-left: 6px;
}

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>昕之优选购物网站-正品低价、品质保障、配送及时、轻松购物！</title><meta name="description"content="昕之优选购物网站-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。" /><meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东" /><link rel="stylesheet" href="css/base.css" /><link rel="stylesheet" href="css/common.css"/><link rel="shortcut icon" href="images/logo.ico" type="image/x-icon" />
</head><body><!-- 头部导航栏 --><div class="shortcut"><div class="w"><!-- 左侧 登录注册--><div class="fl"><ul><li>昕之优选欢迎您！&nbsp;</li><li><a href="">请登录</a>&nbsp;<a href="" class="style_red">免费注册</a></li></ul></div><!-- 右侧 导航列表--><div class="fr"><ul><li>我的订单</li><li></li><li class="arrow-icon">个人主页</li><li></li><li>会员</li><li></li><li>企业采购</li><li></li><li class="arrow-icon">关注我们</li><li></li><li class="arrow-icon">客户服务</li><li></li><li class="arrow-icon">网站导航</li></ul></div></div></div></body></html>

购物网站制作——顶部导航栏（index.html)相关推荐

微信小程序制作顶部导航栏
1问题描述使用微信小程序开发者工具制作顶部导航栏. 2算法描述首先就是对微信小程序开发者工具的配置,官网搜索后进入,选择稳定版,Windows64位下载. 然后点开开发者工具,选择小程序,点击图片 ...
仿写小米网站首页顶部导航栏部分
说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...
购物网站制作——头部header（index.html)
1. 头部header 1.1 logo图片定位 css代码写在common.css里面调用了.w类:版心 .w {width : 1200px;margin: 0 auto; } .header ...
演练网站的头部导航栏的制作 1014 HTML
演练网站的头部导航栏的制作 1014 HTML 视频演练菜单按钮的制作 HTML5 2216 - 西瓜视频 https://www.ixigua.com/6883480625635033613/ ...
微信小程序之顶部导航栏（选项卡）实例 —— 微信小程序实战系列（1）
需求:顶部导航栏效果图: wxml:  <view class="navbar"><text wx:for="{{na ...
小米商城项目实战(一)顶部导航栏
顶部导航栏需求小米商城官方网站: https://www.mi.com/index.html 小米商城官方Logo下载网址: https://s01.mifile.cn/favicon.ico 项目 ...
uniapp添加顶部导航栏并且更换图标
uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架. 开发者通过编写 Vue.js 代码,uni-app 将其编译到iOS.Android.微信小程序等多个平台,保证其正确运行并达到优 ...
Android studio实现底部导航,AndroidStudio制作底部导航栏以及用Fragment实现切换功能...
前言大家好,我是 Vic,今天给大家带来AndroidStudio制作底部导航栏以及用Fragment实现切换功能的概述,希望你们喜欢学习目标 AndroidStudio制作底部导航栏以及用Fra ...
uni-app开发：tabar组件与顶部导航栏（功能开发篇）
uni-app开发:tabar组件与顶部导航栏(含右侧icon点击功能)[结合:案例Demo截图] 一.效果图 · 截图: 二. tabar组件 + 顶部导航栏(含右侧icon点击功能) 组件的代码调 ...

购物网站制作——顶部导航栏（index.html)

1. 快捷导航shortcut制作

1.1 如何分块

1.2 如何添加“| ”分隔符

1.3 如何添加小箭头

购物网站制作——顶部导航栏（index.html)相关推荐

最新文章

热门文章