我们接着上一章，继续学习一些有关对齐、布局、导航栏的内容。

1.水平块对齐：
    1.1 margin：把左和右外边距设置为 auto，规定的是均等地分配可用的外边距。结果就是居中的元素
    　　

 .center {margin-left:auto;margin-right:auto;width:70%;background-color:red;}

1.2 position：使用 position 属性进行左和右对齐
     　　

.right {position:absolute;right:0px;width:300px;background-color:gray;}

1.3 float：使用 float 属性来进行左和右对齐
     　　

.right {float:right;width:300px;background-color:gray;}

浏览器兼容性问题：

　　当像这样对齐元素时，对 <body> 元素的外边距和内边距进行预定义是一个好主意,这样可以避免在不同的浏览器中出现可见的差异。

　　当使用 position / float 属性时，IE8 以及更早的版本存在一个问题。如果容器元素设置了指定的宽度，并且省略了 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 position / float 属性时，请始终设置 !DOCTYPE 声明。

2.尺寸
    height    width    line-height(设置行高)
    max-height    max-width
    min-height    min-width

3.分类属性
    clear: 清除元素侧面的浮动元素
    display: inline    block    none
    float: 浮动
    position: static     relative    absolute    fixed    
    visibility: visible    hidden
    
4.导航栏：导航栏是一个链接列表，因此需要使用<ul>与<a>元素　　

    <ul>

        <li><a herf="default.asp">Home</a></li>

        <li><a herf="news.asp">News</a></li>

        <li><a herf="contact.asp">Contact</a></li>

        <li><a herf="about.asp">About</a></li>

    </ul>


    去掉圆点与外边距：

ul {list-style-type:none;margin:0;padding:0;}


    垂直导航栏：

    a:link,    a:visited {display:block;　　/*链接设置成块级，整个区域可点击 */

                        width:120px;　　/*通常需要指定宽度。不然块级链接默认占用全部可用宽度 */

                        background-color:gray;

                        color:white;

                        padding:4px;

                        text-align:center;

                        font-weight:bold;

                        text-decoration:none;

                        }

    a:hover, a:active {background-color:red;}


    水平导航栏(行内)：除了上面的“标准”代码，构建水平导航栏的方法之一是将 <li> 元素规定为行内元素

    ul {list-style-type:none; margin:0; padding:0; padding-top:6px; padding-bottom:6px;}

    li {display:inline;}

    a:link,a:visited {padding:6px;

                      background-color:gray;

                      color:white;

                      text-align:center;

                      text-decoration:none;

                      font-weight:bold;

    }

    a:hover,a:active {background-color:red;}

   
    水平导航栏(浮动):为了让所有链接拥有相等的宽度，浮动 <li> 元素并规定 <a> 元素的宽度

　　 ul {list-style-type:none;margin:0;padding:0;}

    li {float:left;}

    a:link, a:visited {display:block; width:60px; padding:4px;

        background-color:gray; color:white;

        text-align:center;

        font-weight:bold;

        text-decoration:none;

        }

    a:hover, a:active {background-color:red;}

水平导航栏的设置，在基础导航栏的基础上有2种方法，一种是将<li>设置为行内元素，一种是浮动<li>元素。

CSS04--对齐、 布局、导航栏的更多相关文章

  1. Bootstrap4 导航栏

    Bootstrap4 导航栏 目录 Bootstrap4 导航栏 动态选项卡 标准的导航栏 导航对齐方式 导航栏的组成 ul 元素中包含navbar-nav 类 表示导航栏中ul li元素中包含nav ...

  2. {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index

    03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...

  3. ViewPager+GridView实现首页导航栏布局分页效果

    如图是效果图用ViewPager+GridView实现首页导航栏布局分页效果来实现的效果 Demo下载地址:http://download.csdn.net/detail/qq_29774291/96 ...

  4. android布局学习-使用FrameLayout和LinearLayout制作QQ空间底部导航栏

    [声明:本博客通过学习“J灬叶小超 ”博客而写,链接:http://www.cnblogs.com/yc-755909659/p/4288260.html] --------------------- ...

  5. 如何使用css、布局横向导航栏

    使用css布局横向导航栏,css应用给网页样式的方式,就相当于,给人怎么去穿上衣服,不同的衣服有不同的穿法,这里我们使用的是内联式.在这里 我们可以适当的把值调的大一点,这样我们就可以很容易的对比. ...

  6. Android 关于导航栏(虚拟按键)遮挡PopupWindow底部布局的问题

    我们自定义popupWindow的时候,一般会设置这些参数 setContentView(contentView); //设置高度为屏幕高度 setWidth(UIUtils.getScreenHei ...

  7. Android UI-仿微信底部导航栏布局

    现在App基本的标配除了侧滑菜单,还有一个就是底部导航栏,常见的聊天工具QQ,微信,购物App都有底部导航栏,用户可以随便切换看不同的内容,说是情怀也好,用户体验也罢.我们开发的主要的还是讲的是如何如 ...

  8. CSS3——对齐 组合选择符 伪类 伪元素 导航栏 下拉菜单

     水平&垂直对齐 元素居中对齐 .center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; } 文本 ...

  9. Html5 学习笔记 【PC固定布局】 实战2 导航栏搜索区域

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

随机推荐

  1. springcloud工程构建过程

    1.概述 2.zookeeper与eureka在CAP理论中的区别 (电商时,应当保证高可用,即最好选用AP) eureka遵守AP zookeeper遵守CP eureka集群,不区分主从节点 zo ...

  2. springMVC框架的作用

    springMVC:是一个表现层框架 作用:就是从请求中接收传入的参数 将处理后的结果数据返回给页面展示

  3. Linux主流发行版本

    一.简介 而工欲善其事,必先利其器,Linux的世界相當廣大,除了最著名的Ubuntu以外還有不少發行版.然文人相輕,自古皆然,了解不同發行版的優勢不只嘴上攻防用的上,也是學Linux一個有趣的地方! ...

  4. URAL1991 The battle near the swamp 2017-04-12 18:07 92人阅读 评论(0) 收藏

    The battle near the swamp Gungan: Jar Jar, usen da booma!  Jar Jar: What? Mesa no have a booma!  Gun ...

  5. android分屏

    上手了Android N Preview,第一个不能错过的新特性就是App分屏的支持.Android7.0原生系统就可以支持两个App横屏并排或者竖屏上下摆放了.第二个新特性就是在Android TV ...

  6. php的循环与引用的一个坑

    上代码 $arr = array( 'a'=> 'a11', 'b'=> 'b22', 'c'=> 'c33', ); foreach ($arr as $k=>&$v ...

  7. Javascript Object.defineProperty()

    转载声明: 本文标题:Javascript Object.defineProperty() 本文链接:http://www.zuojj.com/archives/994.html,转载请注明转自Ben ...

  8. shell查找进程并终止

    创建kill.sh文件,内容如下: port= #一.根据端口号查询对应的pid,两种都行 pid=$(netstat -nlp | grep :$port | awk '{print $7}' | ...

  9. 【转】Sql Server去除所有空格

    详细链接:https://shop499704308.taobao.com/?spm=a1z38n.10677092.card.11.594c1debsAGeak 1.普通空格: 前后的空格,使用LT ...

  10. UWP开发入门（一）——SplitView

    接下来会写一个UWP(Universal Windows Platform)开发入门的系列,自己学习到哪里,有什么心得总结,就会写到哪里.本篇对适用于顶层导航的SplitView控件展开讨论. 首先S ...