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

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. 协程库st(state threads library)原理解析

    协程库state threads library(以下简称st)是一个基于setjmp/longjmp实现的C语言版用户线程库或协程库(user level thread). 这里有一个基本的协程例子 ...

  2. linux下PHP7安装memcache

    1.memcache服务器的安装 .分别把memcached和libevent下载回来,放到 /tmp 目录下: # cd /tmp # wget http://www.danga.com/memca ...

  3. 如何使用vsphere client 克隆虚拟机

    vSphere 是VMware公司推出一套服务器虚拟化解决方案. 工具/原料 vSphere 测试系统 方法/步骤 1.进入vSphere client,关闭需要克隆的虚拟机win7 2.选中ESXi ...

  4. 2018年3大UI设计趋势，你知道吗？

    以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具. 之前小编已经和大家讨论了2018年软件测试的五大趋势,现在让我们一起来看看移动UI设计在2018年会 ...

  5. Web Api 中返回JSON的正确做法（转）

    出处:http://www.cnblogs.com/acles/archive/2013/06/21/3147667.html 在使用Web Api的时候,有时候只想返回JSON:实现这一功能有多种方 ...

  6. java消息中间件的使用与简介

    一.为什么要使用消息中间件 消息中间件就是可以省去繁琐的步骤,直达目的,怎么讲呢,就是比如你想很多人,知道你的动态,而知道的人可能手机没电,可能手机信号不好,可能手机不在服务区,或者看的人比较忙,看的 ...

  7. swift po 实现动态按钮2

    // //  ButtonViewController.swift //  PopInstall // //  Created by su on 15/12/11. //  Copyright © 2 ...

  8. ubuntu解压文件命令大全

    ubuntu 下rar解压工具安装方法: 压缩功能 安装 sudo apt-get install rar 卸载 sudo apt-get remove rar 解压功能 安装 sudo apt-ge ...

  9. redis修改端口号

    为redis分配一个8888端口,操作步骤如下: 1.$REDIS_HOME/redis.conf重新复制一份,重命名为redis8888.conf. 2.打开redis8888.conf配置文件,找 ...

  10. eclipse 高效快捷键大全

    一个Eclipse骨灰级开发者总结了他认为最有用但又不太为人所知的快捷键组合.通过这些组合可以更加容易的浏览源代码,使得整体的开发效率和质量得到提升. 1. ctrl+shift+r:打开资源 这可能 ...