1.小米导航栏示例

　　　　

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>06小米商城导航条示例</title>
  6.  
  7.     <style>
  8.  
  9.         /* 全局通用的样式，去除浏览器默认的内边距和外边距 */
  10.         * {
  11.             margin: 0; /* 去除浏览器默认的margin和padding */
  12.             padding: 0;
  13.         }
  14.  
  15.         /* 将ul前面的原点去除 */
  16.         ul {
  17.             list-style-type: none; /* 将ul列表前面的小圆点去掉 */
  18.         }
  19.  
  20.         /* 去除a标签的下划线 */
  21.         a {
  22.             text-decoration-line: none;
  23.         }
  24.  
  25.         /* 设置li左浮动，每个li标签的右面有15个像素点 */
  26.         .nav-left > ul > li {
  27.             float: left;
  28.             padding-right: 15px;
  29.  
  30.         }
  31.  
  32.         /* 设置a标签字体颜色为白色 */
  33.         .nav-left > ul > li > a {
  34.             color: white;
  35.         }
  36.  
  37.         /* 设置登录、注册、购物车的div标签为右浮动 */
  38.         .nav-right {
  39.             float: right;
  40.             /*padding-right: 15px;*/
  41.         }
  42.  
  43.         /* 设置div标签下的a标签每个a标签的右面有15px的内边距 */
  44.         .nav-right > a {
  45.             padding-right: 15px;
  46.             color: white;   /* 设置a标签字体颜色为白色 */
  47.         }
  48.  
  49.         /* 设置整个导航栏的背景颜色 */
  50.         .nav {
  51.             background-color: darkslategrey;
  52.         }
  53.  
  54.         /* 目的为了撑起来，因为孩子全都是浮动的，都脱离了文档流，所以要增加一个伪元素的孩子，这个孩子的左右不能有浮动，所以就将标签撑起来了 */
  55.         .clearfix:after, /* 增加伪元素，在内容的后面增加 */
  56.         .clearfix:before { /* 增加伪元素，在内容的前面增加 */
  57.             clear: both; /* 左右都不能有浮动 */
  58.             content: '';
  59.             display: block; /* 变成块级标签 */
  60.         }
  61.  
  62.         .temp {
  63.             width: 90%; /* 只占父标签的百分之90的宽度 */
  64.             margin: 0 auto;
  65.             padding: 12px;
  66.         }
  67.  
  68.         .other {
  69.             height: 1000px;
  70.             /*margin-top: 20px;*/
  71.             background-color: coral;
  72.             /*margin: 0 auto;*/
  73.         }
  74.  
  75.     </style>
  76.  
  77. </head>
  78. <body>
  79.  
  80. <!-- 导航栏 -->
  81. <div class="nav">
  82.     <div class="temp clearfix">  <!-- 让nav里的内容只占nav的多少多少 -->
  83.         <div class="nav-left">
  84.             <ul>
  85.                 <li><a href="">玉米商城</a></li>
  86.                 <li><a href="">大米</a></li>
  87.                 <li><a href="">小米</a></li>
  88.                 <li><a href="">黑米</a></li>
  89.                 <li><a href="">小强</a></li>
  90.                 <li><a href="">花生</a></li>
  91.                 <li><a href="">豆浆</a></li>
  92.                 <li><a href="">牛奶</a></li>
  93.             </ul>
  94.         </div>
  95.         <div class="nav-right">
  96.             <a href="">登录</a>
  97.             <a href="">注册</a>
  98.             <a href="">购物车</a>
  99.         </div>
  100.     </div>
  101. </div>
  102.  
  103. <!-- 其他 -->
  104. <div class="alw">
  105.     <div class="other">我是其他的内容</div>
  106. </div>
  107.  
  108. </body>
  109. </html>

html 小米商城导航栏示例的更多相关文章

  1. Bootstrap导航栏示例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 微信小程序 - 自定义导航栏（提示）

    点击下载: 自定义导航栏示例

  3. 模仿w3c school的示例导航栏

    近日学习HTML,恰巧学习过程中看见w3cschool的示例导航栏看上去很不错,适合新手练习,于是模仿着做了一个. 示例导航栏如下图所示 导航栏自然使用li标签来做,a标签控制背景颜色和鼠标放入的特效 ...

  4. 自定义iOS7导航栏背景,标题和返回按钮文字颜色

    在iOS7下,默认导航栏背景,颜色是这样的,接下来我们就进行自定义,如果你仅仅是更改一下背景和颜色,代码会很简单,不需要很复杂的自定义View来替代leftBarItem 更改导航栏的背景和文字Col ...

  5. Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单

    一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...

  6. jQuery Mobile 导航栏

    jQuery Mobile 导航栏 导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部. 默认地,导航栏中的链接会自动转换为按钮(无需 data-role="button"). ...

  7. zhuang 定制iOS 7中的导航栏和状态栏

    近期,跟大多数开发者一样,我也正忙于对程序进行升级以适配iOS 7.最新的iOS 7外观上有大量的改动.从开发者的角度来看,导航栏和状态栏就发生了明显的变化.状态栏现在是半透明的了,这也就意味着导航栏 ...

  8. iOS 7 教程：定制iOS 7中的导航栏和状态栏

    目录(?)[-] iOS 7中默认的导航栏 设置导航栏的背景颜色 在导航栏中使用背景图片 定制返回按钮的颜 修改导航栏标题的字体 修改导航栏标题为图片 添加多个按钮 修改状态栏的风格 隐藏状态栏 总结 ...

  9. (转)定制iOS 7中的导航栏和状态栏

    近期,跟大多数开发者一样,我也正忙于对程序进行升级以适配iOS 7.最新的iOS 7外观上有大量的改动.从开发者的角度来看,导航栏和状态栏就发生了明显的变化.状态栏现在是半透明的了,这也就意味着导航栏 ...

随机推荐

  1. Android ContentProvider 基本原理和使用详解

    ContentProvider(内容提供者)是 Android 的四大组件之一,管理 Android 以结构化方式存放的数据,以相对安全的方式封装数据(表)并且提供简易的处理机制和统一的访问接口供其他 ...

  2. nfs4使用中的防火墙配置

    一,查看本地centos的版本: [root@localhost lib]# cat /etc/redhat-release CentOS Linux release 8.1.1911 (Core) ...

  3. C# 将DataTable里面的数据导出到excel

    //需要在bin里面添加 Interop.Microsoft.Office.Interop.Excel.dll 的引用 //添加引用 using System.Data; /// <summar ...

  4. 2020年的UWP（2）——In Process App Service

    最早的时候App Service被定义为一种后台服务,类似于极简版的Windows Service.App Service作为Background Task在宿主UWP APP中运行,向其他UWP A ...

  5. Vue3: 如何以 Vite 创建，以 Vue Router, Vuex, Ant Design 开始应用

    本文代码: https://github.com/ikuokuo/start-vue3 在线演示: https://ikuokuo.github.io/start-vue3/ Vite 创建 Vue ...

  6. 3. Distributional Reinforcement Learning with Quantile Regression

    C51算法理论上用Wasserstein度量衡量两个累积分布函数间的距离证明了价值分布的可行性,但在实际算法中用KL散度对离散支持的概率进行拟合,不能作用于累积分布函数,不能保证Bellman更新收敛 ...

  7. TNS-12541 TNS no listener

    转载:https://blog.csdn.net/haha_201510/article/details/88119587 centOS环境下的解决方案: 查看监听状态lsnrctl status 如 ...

  8. Stream（一）

    public class Test06 { /* * StreamAPI: * StreamAPI是用来处理数据,处理集合等容器中的数据,处理操作有:查询.筛选.删除.过滤.统计.映射等. * 希望能 ...

  9. CentOS换yum源为国内源

    CentOS换源 yum源 备份原来的文件. mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup ...

  10. liunx命令的运用

    工作中用到了一些命令,记忆才深刻 1.查看服务器内存:free -h 2.查看服务器磁盘空间:df -h 3.切root用户:sudo su root 输入密码 4.查看liunx服务器下的所有用户: ...