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. go内建方法 make方法

    package main import "fmt" func main() { // make函数 makeSlice() // 创建切片 makeMap() // 创建集合 ma ...

  2. 第五章 Linux操作系统关机、重启、注销及其查看ip命令

    一.更新系统时间与网络时间同步 1.  安装ntpdate工具 # yum -y install ntp ntpdate 2.  设置系统时间与网络时间同步 # ntpdate cn.pool.ntp ...

  3. vue-awesome-swiper ---移动端h5 swiper 和 tab 栏选项联动效果实现

    很久之前做小程序时有个类似每日优鲜里储值卡充值界面里的 卡轮播和价格tab栏联动效果,当时觉得新鲜做出来之后也没当回事.直到今天又遇到了一个类似的功能,所以想着总结经验. 实现效果如下图: 图解:点击 ...

  4. Curl可以模拟浏览器

    curl直接访问被拒绝 [22:10:00 root@C7 ~]#curl -I www.163.com HTTP/1.1 403 Forbidden Date: Wed, 24 Jun 2020 0 ...

  5. jq ajax封装

    //ajax公共方法,zs 2017-06-14 $.extend({ //比jq的ajax多了的参数: //salert是否在请求成功后弹出后台的SuressStr字段值 //ealertStr:请 ...

  6. codeforces#426(div1) B - The Bakery (线段树 + dp)

    B. The Bakery   Some time ago Slastyona the Sweetmaid decided to open her own bakery! She bought req ...

  7. h5 返回上一页面方法

    //以下方法仅供参考1.返回上一页,不刷新history.html window.history.go(-1);  javascript:window.history.go(-1) 2.返回上一页并刷 ...

  8. kubectl命令小妙招

    kubectl命令使用大全   中文: http://docs.kubernetes.org.cn/683.html [root@master-test ~]# kubectl --help kube ...

  9. .NET内存分析工具-dotMemory

    .NET内存分析工具-dotMemory 1.介绍 官网链接 引言 程序内存占用较大?内存溢出?需要分析生产环境程序怎么办? dotMemory 使您可以分析各种 .NET 和 .NET Core应用 ...

  10. Java学习的第二十七天

    1.内存操作流 缓冲流 用BufferedReader读取数据 使用BufferedWriter写数据 使用BufferInputStream和BufferOutputStream读写图片 2.有很多 ...