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

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. Sprint boot notes

    1. spring.io 官网 2. http://javainuse.com/spring/sprboot spring boot学习资源 3. spring boot websocketss视频  ...

  2. Castle ActiveRecord学习（七）使用日志

    暂无 参考:http://terrylee.cnblogs.com/archive/2006/04/14/374829.html

  3. openssl详解

    openssl详解 摘自:https://blog.csdn.net/liguangxianbin/article/details/79665100 目录 目录 第一章 前言 第二章 证书 第三章 加 ...

  4. Zookeeper基本使用（转）

    一.Zookeeper架构 云计算越来越流行的今天,单一机器处理能力已经不能满足我们的需求,不得不采用大量的服务集群.服务集群对外提供服务的过程中,有很多的配置需要随时更新,服务间需要协调工作,这些信 ...

  5. HITS

    HITS 1 概述 HITS(hypertext induced topic search)超链接归纳主题搜索是由kleinbers在90年代提出的基于链接分析的网页排名算法.Hits算法是利用Hub ...

  6. msfvenom木马生成+免杀+壳(实测并不能免杀)

    msfvenom 选项: -p, --payload 有效载荷使用.指定一个有效的自定义载荷 --payload-options 列出有效载荷的标准选项 -l, --list [type] 列出一个模 ...

  7. 20169205 2016-2017-2 实验四 SQL注入实验

    20169205 2016-2017-2 实验四 SQL注入实验 实验介绍 SQL注入技术是利用web应用程序和数据库服务器之间的接口来篡改网站内容的攻击技术.通过把SQL命令插入到Web表单提交框. ...

  8. Get Current LOV Query SQL

    --3 click the lov object activing last query address.  SELECT T.SQL_TEXT    FROM V$SQLTEXT_WITH_NEWL ...

  9. easyui的filebox过滤文件

    示例:<input class="easyui-filebox" data-options="buttonText:'选择文件',accept:'image/gif ...

  10. jquery控制元素的隐藏和显示的几种方法。

    组织略显凌乱,请耐心看! 使用jquery控制div的显示与隐藏,一句话就能搞定,例如: 1.$("#id").show()表示为display:block, $("#i ...