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

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. c++ stringstream的使用

    stringstream ss;//一次创建多次使用,需要进行clear()操作清除流状态标记 int i=0; while (i<3) { ss<<"21"; ...

  2. oracle存储过程和游标参考

    oracle open cursor forhttp://www.itpub.net/thread-1874683-1-1.html

  3. windows查看内存频率

    命令行查看: wmic memorychip 任务管理器查看: 任务管理器-性能-内存-速度

  4. 关于自动ui的多个处理我的解决方案， 不知道大家怎么处理

    ( pathpp ="D:\\pyc-tools\\ms\\newdate\\maxinfo" DialogMonitorOPS.unRegisterNotification id ...

  5. .NET基础 （11）类型的基类System.Object

    类型的基类System.Object1 是否存在不继承自System.Object类型的类2 在System.Object中定义的三个比较方法有何异同3 如何重写GetHashCode方法 类型的基类 ...

  6. DW2.0

    一.DW2.0从企业的角度,吸引企业的原因: 1.数据仓库基础设施的成本不再持续增长.在第一代数据仓库中,技术基础设施的成本是不断增长的,随着数据量的增长,基础设施的成本会以指数级增长.但是使用DW2 ...

  7. 企业搜索引擎开发之连接器connector（二十一）

    从上文中的QueryTraverser对象的BatchResult runBatch(BatchSize batchSize)方法上溯到CancelableBatch类,该类实现了TimedCance ...

  8. poj2115 Looooops 扩展欧几里德的应用

    好开心又做出一道,看样子做数论一定要先看书,认认真真仔仔细细的看一下各种重要的性质 及其用途,然后第一次接触的题目 边想边看别人的怎么做的,这样做出第一道题目后,后面的题目就完全可以自己思考啦 设要+ ...

  9. java 传参数时 类型后跟 3个点 "..." 的意义

    对照代码和运行结果便知"..." 的意义 import java.util.ArrayList; public class StringDemo { public static v ...

  10. GlusteFS 二

    通过heketi提供的RestfullApi来管理 Gluster,进而与kubernetes集成.将gluster作为kubernetes的数据存储 1 安装 安装gluster 参见 Gluste ...