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. docker19.03限制容器使用的内存资源

    一,指定内存大小的参数: [root@localhost liuhongdi]# docker run -idt --name kafka2 --hostname kafka2 -m 200M --m ...

  2. Nginx常见错误解决办法

    报错: nginx: [error] CreateFile() "C:\mytools\nginx-1.8.1/logs/nginx.pid" failed (2: The sys ...

  3. 第二十章 nginx常见问题

    一.Nginx常见问题 一.nginx多server优先级 在开始处理一个http请求时,nginx会取出header头中的Host变量,与nginx.conf中的每个server_name进行匹配, ...

  4. Python之数据类型总结

    1.字符串 2.数字 3.列表 4.元组 5.字典 可变 or 不可变 1:可变:列表.字典 2:不可变:字符串,数字,元组 访问顺序 1.直接访问:数字 2.顺序访问:字符串,列表,元组 3.映射访 ...

  5. JS 身份证号码验证

    function checkIdcard(idcard) { var Errors = new Array( "验证通过!", "身份证号码位数不对!", &q ...

  6. naicat如何查看表关系

    1.navict版本为:navict premium https://www.php.cn/tool/navicat/427617.html 参考上面链接 2. 这个版本的 目前就这些,后续进行补充

  7. Vue.js 3.0搭配.NET Core写一个牛B的文件上传组件

    在开发Web应用程序中,文件上传是经常用到的一个功能. 在Jquery时代,做上传功能,一般找jQuery插件就够了,很少有人去探究上传文件插件到底是怎么做的. 简单列一下我们要做的技术点和功能点 使 ...

  8. javascript中的描述对象（Descriptor）获取和定义随笔

    最近再看了阮一峰的老师的ES6入门,发现一个有趣的东西,借此纪录以及整理下. 对象的每个属性都有一个描述对象(Descriptor),用来控制该属性的行为.Object.getOwnPropertyD ...

  9. 将java的jar包，打包为rpm 安装包

    一.rpm包 介绍 RPM Package Manager (RPM) 是一个强大的命令行驱动的软件包管理工具,用来安装.卸载.校验.查询和更新 Linux 系统上的软件包 二.环境安装 一台cent ...

  10. JVM的艺术—类加载器篇（二）

    分享是价值的传递,喜欢就点个赞 引言 今天我们继续来深入的剖析类加载器的内容.上节课我们讲了类加载器的基本内容,没看过的小伙伴请加关注.今天我们继续. 什么是定义类加载器和初始化类加载器? 定义类加载 ...