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. widows安装ffmpeg

    首先下载ffmpeg的windows版本https://ffmpeg.zeranoe.com/builds/ 解压到d盘 win+r cmd 说明成功了

  2. spring boot:多个filter/多个interceptor/多个aop时设置调用的先后顺序(spring boot 2.3.1)

    一,filter/interceptor/aop生效的先后顺序? 1,filter即过滤器,基于servlet容器,处于最外层, 所以它会最先起作用,最后才停止 说明:filter对所有访问到serv ...

  3. linux(centos8):centos8.1安装(详细过程/图解)(vmware fusion/CentOS-8.1.1911-x86_64)

    一,centos是什么? CentOS(Community Enterprise Operating System,中文意思是社区企业操作系统)是Linux发行版之一, 它是来自于Red Hat En ...

  4. RocketMQ扫盲篇

    本篇博客主要参考: <浅入浅出>-RocketMQ 敖丙 APACHE-RocketMQ Gitee RocketMQ官方文档 RocketMQ 实战与进阶 GitChat 又是好久没有写 ...

  5. centos之间如何实现免密ssh登陆

    在公司产品中,管理平台和下面的主机很多时候都要求免密,免密的逻辑到底是怎么样的呢?今天就简单看看! 首先创建两台虚机,正常情况下ssh登陆对方是需要密码的 先通过ssh-keygen生成一对秘钥 [r ...

  6. springboot添加拦截器

    一,编写拦截器 public class TokenInterceptor implements HandlerInterceptor { @Override public boolean preHa ...

  7. 050_Dos命令

    目录 Dos命令 打开Dos控制台 管理员方式运行 常用的Dos命令 Dos命令 打开Dos控制台 开始->附件->命令提示符 Window+R 输入cmd(推荐使用) 在任意文件夹下-& ...

  8. (Pytorch)涉及的常见操作

    涉及一些pytorch的API内容在此进行整理 损失函数:Binary-Cross-Entropy loss criterion = nn.BCECriterion() 创建一个标准来度量目标和输出之 ...

  9. java后端选型20200729

    参考地址:https://gitee.com/shuzheng/zheng 后端技术: 技术 名称 官网 Spring Framework 容器 http://projects.spring.io/s ...

  10. JavaScript实现基于对象的队列

    class Queue { constructor() { this.count = 0; this.lowestCount = 0; this.items = {}; } enqueue(eleme ...