1.小米导航栏示例

　　　　

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>06小米商城导航条示例</title>

    <style>

        /* 全局通用的样式，去除浏览器默认的内边距和外边距 */

        * {

            margin: 0; /* 去除浏览器默认的margin和padding */

            padding: 0;

        }

        /* 将ul前面的原点去除 */

        ul {

            list-style-type: none; /* 将ul列表前面的小圆点去掉 */

        }

        /* 去除a标签的下划线 */

        a {

            text-decoration-line: none;

        }

        /* 设置li左浮动，每个li标签的右面有15个像素点 */

        .nav-left > ul > li {

            float: left;

            padding-right: 15px;

        }

        /* 设置a标签字体颜色为白色 */

        .nav-left > ul > li > a {

            color: white;

        }

        /* 设置登录、注册、购物车的div标签为右浮动 */

        .nav-right {

            float: right;

            /*padding-right: 15px;*/

        }

        /* 设置div标签下的a标签每个a标签的右面有15px的内边距 */

        .nav-right > a {

            padding-right: 15px;

            color: white;   /* 设置a标签字体颜色为白色 */

        }

        /* 设置整个导航栏的背景颜色 */

        .nav {

            background-color: darkslategrey;

        }

        /* 目的为了撑起来，因为孩子全都是浮动的，都脱离了文档流，所以要增加一个伪元素的孩子，这个孩子的左右不能有浮动，所以就将标签撑起来了 */

        .clearfix:after, /* 增加伪元素，在内容的后面增加 */

        .clearfix:before { /* 增加伪元素，在内容的前面增加 */

            clear: both; /* 左右都不能有浮动 */

            content: '';

            display: block; /* 变成块级标签 */

        }

        .temp {

            width: 90%; /* 只占父标签的百分之90的宽度 */

            margin: 0 auto;

            padding: 12px;

        }

        .other {

            height: 1000px;

            /*margin-top: 20px;*/

            background-color: coral;

            /*margin: 0 auto;*/

        }

    </style>

</head>

<body>

<!-- 导航栏 -->

<div class="nav">

    <div class="temp clearfix">  <!-- 让nav里的内容只占nav的多少多少 -->

        <div class="nav-left">

            <ul>

                <li><a href="">玉米商城</a></li>

                <li><a href="">大米</a></li>

                <li><a href="">小米</a></li>

                <li><a href="">黑米</a></li>

                <li><a href="">小强</a></li>

                <li><a href="">花生</a></li>

                <li><a href="">豆浆</a></li>

                <li><a href="">牛奶</a></li>

            </ul>

        </div>

        <div class="nav-right">

            <a href="">登录</a>

            <a href="">注册</a>

            <a href="">购物车</a>

        </div>

    </div>

</div>

<!-- 其他 -->

<div class="alw">

    <div class="other">我是其他的内容</div>

</div>

</body>

</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. java 实体对象转Map公共类

    java 实体对象转Map公共类 package org.kxtkx.portal.utils; import java.lang.reflect.Field; import java.util.Ha ...

  2. flutter——android报错建议Suggestion: add 'tools:replace="android:label"'

    问题: 安装了一个新包,android出现了报错,建议add 'tools:replace="android:label"'. 原因: 项目application的label属性冲 ...

  3. C# 将Excel里面的数据填充到DataSet中

    /// <summary> /// 将Excel表里的数据填充到DataSet中 /// </summary> /// <param name="filenam ...

  4. 微信小程序-基于高德地图API实现天气组件(动态效果)

    微信小程序-基于高德地图API实现天气组件(动态效果) ​ 在社区翻腾了许久,没有找到合适的天气插件.迫不得已,只好借鉴互联网上的web项目,手动迁移到小程序中使用.现在分享到互联网社区中,帮助后续有 ...

  5. Vue 过滤器入门

    Vue 允许自定义过滤器,可被用于一些常见的文本格式化 过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 过滤器应该被添加在JavaScript表达式的尾部,由"管道" ...

  6. 安装 WSL2、Ubuntu 及 docker（详细步骤）

    本文链接:https://www.cnblogs.com/tujia/p/13438639.html 一.更新Windows版本 WSL 2 随着 Windows build 19041 而推出,能更 ...

  7. 将书法字体制作成pcb库文件，并使用该字体作为logo印制在自己设计的电路板上。

    本文主要介绍,如何将写在纸张上的书法制作成pcb库文件,以达到如下效果: 形成具有镂空效果的标记,印制在PCB电路板上,一图logo位于top overlayer,是镂空丝印,二图位于top laye ...

  8. SQL注入的一些学习

    -------------------------------------- 这是我之前发布到的其他的一个网址,这里的话我重新总结 可能分很多,我也不是很清楚,只是皮毛的研究了一下 1,sql按数据库 ...

  9. STM32入门系列-CMSIS标准

    使用寄存器点亮开发板上LED,这种开发方式显然是不适合大众,对于STM32这样庞大的芯片,内部寄存器实在太多,如果操作的外设比较多,那么就需要花很多时间查询底层寄存器内容,而且即使程序写好,如果要换其 ...

  10. 面试题：对NotNull字段插入Null值 有啥现象？

    Hi,大家好!我是白日梦. 今天我要跟你分享的话题是:"对NotNull字段插入Null值有啥现象?" 一. 推荐阅读 首发地址:https://mp.weixin.qq.com/ ...