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

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. 去掉redhat linux提示注册

    去掉提示注册的话,卸载几个软件包:#rpm -qa | grep subscription-manager 然后移除那出现的几项吧:#yum remove subscription-manager-g ...

  2. python之selenium调用js(execute_script)

    转载: http://www.cnblogs.com/fnng/p/3230768.html 本节重点: 调用js方法 execute_script(script, *args) 在当前窗口/框架 同 ...

  3. 解决 Laravel try catch 不工作的问题

    最近再用laravel框架发现,try catch用了没有效果,不能捕获异常, 然后在think框架里也试了一下,发现竟然也不可以! [php] view plain copy try{  $i = ...

  4. facebook对xtrabackup的优化整理

    1)Adding xtrabackup files https://github.com/facebook/mysql-5.6/commit/6eb74f86e27410f1ad7bf3379ce15 ...

  5. thinkphp整合系列之phpexcel导入excel数据

    一:导入phpexcel /ThinkPHP/Library/Vendor/PHPExcel 二:导入excel的函数 /** * 导入excel文件 * @param string $file ex ...

  6. (轉)Equal height boxes with CSS

    原文:http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/ 下面是我翻译的内容,是根据我对文章的理解意译的 ...

  7. 作业 c++编写

    1.第一版本程序Prog1:+ 给定一个数组,实现数组元素求和:,具体要求:实现对一维数组(a[100])的所有元素相加运算.+ 数据准备:a)数组长度:100:b)数组数据来源:实验数据A列:1~1 ...

  8. C#中的类

    C#编程语言,从本质上讲是一组类型声明.所以,本人认为第一个要区分的点是:类型!=类. 当然,如果想要系统的学习C#还是应该先了解一下.Net框架,本文目的只是从相对宏观的角度讲清楚C#中的类.关于类 ...

  9. JAVA—编码问题

    一.编码.(引用  百度百科) 编码是信息从一种形式或格式转换为另一种形式的过程也称为计算机编程语言的代码简称编码.用预先规定的方法将文字.数字或其它对象编成数码,或将信息.数据转换成规定的电脉冲信号 ...

  10. 多线程并行计算数据总和 —— 优化计算思想（多线程去计算）—— C语言demo

    多线程计算整型数组数据总和: #include <stdio.h> #include <stdlib.h> #include <Windows.h> #includ ...