仿小米导航栏html+css

仿小米导航栏

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>小米商城</title><link rel="icon" href="image/favicon.ico"><style>.head{width: 100%;height: 40px;background-color: #333333;}.head_main{width: 1226px;height: 40px;margin: 0 auto;}.head_wenzi{color: #b0b0b0;font-size: 12px;float: left;line-height:40px;}a{text-decoration:none;position: relative;margin-left: 10px;margin-right: 10px;color:#b0b0b0; font-size: 12px;float: left; line-height:40px;}a:link{color:#A9A9A9;}a:visited{color:#A9A9A9}a:hover{color:#FFFFFF}.sep{color:#696969;font-size: 12px;float: left;line-height:40px;}.head_left{float: left;}.head_right{float: right;}.head_car{width: 120px;height: 40px;background-color: #454545;float: left;margin-left: 25px;text-align: center;}.head_car1{font-family: 'iconfont';color: #b0b0b0;line-height: 40px;}.head_car2{font-size: 12px;color: #b0b0b0;}</style>
</head>
<body><div class="head"><div class="head_main"><div class="head_left"><a rel="nofollow" href="//www.mi.com/index.html">小米商城</a><span class="sep">|</span><a rel="nofollow" href="https://www.miui.com/" target="_blank">MIUI</a><span class="sep">|</span><a rel="nofollow" href="https://iot.mi.com/index.html">IoT</a><span class="sep">|</span><a rel="nofollow" href="https://i.mi.com/" target="_blank">云服务</a><span class="sep">|</span><a rel="nofollow" href="https://jr.mi.com?from=micom" target="_blank">金融</a><span class="sep">|</span><a rel="nofollow" href="https://youpin.mi.com/" target="_blank">有品</a><span class="sep">|</span><a rel="nofollow" href="https://xiaoai.mi.com/" target="_blank">小爱开放平台</a><span class="sep">|</span><a rel="nofollow" href="https://qiye.mi.com/" target="_blank">企业团购</a><span class="sep">|</span><a rel="nofollow" href="https://www.mi.com/aptitude/list/?id=41" target="_blank">资质证照</a><span class="sep">|</span><a rel="nofollow" href="https://www.mi.com/aptitude/list/" target="_blank">协议规则</a><span class="sep">|</span><a rel="nofollow" href="//www.mi.com/appdownload/" target="_blank" id="J_downloadapp">下载app</a><span class="sep">|</span><a rel="nofollow" href="#J_modal-globalSites" data-toggle="modal"  >Select Region</a></div><div class="head_right"><a  rel="nofollow" class="link" href="//order.mi.com/site/login" data-agreement="true"  data-login="true">登录</a><span class="sep">|</span><a  rel="nofollow" class="link" href="https://account.xiaomi.com/pass/register" data-agreement="true" data-register="true">注册</a>  <a href="" class="head_wenzi">消息通知</a><span class="head_car1"><img src="data:image/gwc.png" style="width: 14px; height: 14px;"></span><span class="head_car2">购物车(0)</span></div></div>    </div>

仿小米导航栏html+css相关推荐

仿小米导航栏；导航栏悬浮滚动更改背景色javascript实现；
一.实现效果小米字体没引用,导航栏文字随便调的,仅供参考二.代码 1.html <!DOCTYPE html> <html lang="en">< ...
前端自学整理——CSS仿小米商品栏
CSS仿小米商品栏商品栏已成为手机网站.电商网站甚至课程网站必不可少的一部分. 为了练习CSS中的几个重要模块,这次选用小米商品栏作为练习对象. 准备阶段观察盒子模型,根据网页布局的第一准则可以分 ...
前端学习之仿小米官网HTML+CSS
一个简单的仿小米官网 index.css /* 主页index.html样式表 */ .topbar-wrapper{width: 100%;background-color:#333;height: ...
HTMLCSS设计小米导航栏
小米导航栏: 准备工作: 把需要实现的设计图放到ps中,量取需要的宽度高度间距值: 话不多说:直接上代码: <div class="box"> // 一个大盒子可以用n ...
阴阳师官网导航栏 html+css
阴阳师官网导航栏通过css html实现阴阳师官网的顶部导航栏具体样式下拉列表下拉列表的实现下面一起看看代码 <div class="header">< ...
前端css小米导航栏设置及盒子定位居中问题
1.小米最上部导航栏设置 <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
14.用定位的方式仿小米导航
效果图: 注:主要是利用死图片实现定位的方式素材: 代码: <!DOCTYPE html> <html lang="zh"> <head>&l ...
php 京东首页分类导航,仿京东导航栏
摘要: 仿京东顶部导航栏仿京东顶部导航栏 *{ margin:0px; padding:0px; } .header{ width:100%; height:35px; background-co ...
php网页设计导航栏代码,CSS导航栏及弹窗示例代码
最近整理了CSS导航栏及弹窗,具体如下: CSS导航先来看下效果: Insert your title body{ font-size:12px; } #discuss{ width:990px; ...

仿小米导航栏html+css

仿小米导航栏html+css相关推荐

最新文章

热门文章