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. nginx优化: timeout超时配置

    一,为什么要做连接超时设置? nginx在保持着与客户端的连接时,要消耗cpu/内存/网络等资源, 如果能在超出一定时间后自动断开连接, 则可以及时释放资源,起到优化性能.提高效率的作用 说明:刘宏缔 ...

  2. scrapy基本爬虫，采集多页

    # -*- coding: utf-8 -*- import csv import scrapy class GjSpider(scrapy.Spider): name = 'gj' allowed_ ...

  3. spring-boot-route（十九）spring-boot-admin监控服务

    SpringBootAdmin不是Spring官方提供的模块,它包含了Client和Server两部分.server部分提供了用户管理界面,client即为被监控的服务.client需要注册到serv ...

  4. .net core autofac asyncinterceptor 异步拦截器帮助包

    autofac使用拦截器实现AOP,是基于Castle.Core的.然而Castle.Core并未提供原生异步支持.所以需要使用帮助类实现,这在autofac官方文档的已知问题中有详细说明: http ...

  5. 闭包 - Js函数笔记

    闭包 当函数被保存到外部时,将会生成闭包 闭包会导致原有作用域链不释放,造成内存泄漏 类似的代码就叫闭包 闭包的运行作用域 代码 a被执行,b被定义并保存出来 a结束,b被执行时,a的执行期上下文指向 ...

  6. 文件开启关闭操作c语言模板

    #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> #include <stri ...

  7. 一分钟了解"秒杀"系统

    关于秒杀,第一反应都是实现起来比较复杂.难点在于:并发读+并发写+设计兜底方案的实现. 比如QQ,虽然数据量很大,但是多数的数据都是细粒度的数据查询,锁冲突比较少:但12306涉及到大量的读写操作,对 ...

  8. openresty 的小白记录

    openresty提供了一个快速访问数据库,快速响应的功能.基于lua + redis,我们可以做到快速响应,达到10k级连接的处理能力. openresty 的小白记录 好的学习资料,从lua到op ...

  9. spring3.X版本知识点

    一.SpringMVC重点注解 @Controller 1.@Controller 与 @Component 实际应用中作用等价.     2.和Struct一样,也是单例,意味着被多个请求线程共享, ...

  10. 撤销rebase与git原理

    git对象 git是面向对象的,对象存储在.git/objects文件夹中.此文件夹中,一个对象就是一个文件,文件名就是对象的id 提交commit的时候,每个文件都是一个数据对象,一个树对象会用来维 ...