网页开发学习笔记九: css 页面布局

文档流
- 块元素独占一行
- 行内元素在一行上显示
- 自上而下

浮动 float
- 用法
  - float: left | right;
- 特点
  - 浮动起来
  - 不占位置(脱标)
  - 如果多个盒子都使用了浮动, 会在一行上显示
  - 尽量用 display: inline-block; 来转行内块
- 作用
  - 文本绕图

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .box{
            width: 400px;
            height: 300px;
            background: #eee;
        }
        .box img{
            width: 50px;
            height: 50px;
            float: left;
        }
    </style>
</head>
<body>

    <div class="box">
        <img src="1.jpg">
        <p>AAAAABBBBBCCCCCDDDDDFFFFF</p>
        <p>AAAAABBBBBCCCCCDDDDDFFFFF</p>
        <p>AAAAABBBBBCCCCCDDDDDFFFFF</p>
        <p>AAAAABBBBBCCCCCDDDDDFFFFF</p>
        <p>AAAAABBBBBCCCCCDDDDDFFFFF</p>
        <p>AAAAABBBBBCCCCCDDDDDFFFFF</p>
        <p>AAAAABBBBBCCCCCDDDDDFFFFF</p>
        <p>AAAAABBBBBCCCCCDDDDDFFFFF</p>
        <p>AAAAABBBBBCCCCCDDDDDFFFFF</p>
        <p>AAAAABBBBBCCCCCDDDDDFFFFF</p>
        <p>AAAAABBBBBCCCCCDDDDDFFFFF</p>
        <p>AAAAABBBBBCCCCCDDDDDFFFFF</p>
        <p>AAAAABBBBBCCCCCDDDDDFFFFF</p>
        <p>AAAAABBBBBCCCCCDDDDDFFFFF</p>
    </div>

</body>
</html>

- - 制作导航栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">

        body,ul,li{
            margin: 0;
            padding: 0;
        }

        ul,li{
            list-style: none;
        }

        .nav{
            width: 400px;
            height: 40px;
            background: pink;
            margin: 20px auto;
        }

        .nav ul li{
            float: left;
        }

        .nav ul li a{
            display: inline-block;
            height: 40px;
            font: 14px/40px 微软雅黑;
            text-decoration: none;
            padding: 0 20px;
        }

        .nav ul li a:hover{
            background: #aaa;
        }

    </style>
</head>
<body>

    <div class="nav">
        <ul>
            <li>
                <a href="#">百度</a>
            </li>

            <li>
                <a href="#">百度一下</a>
            </li>

            <li>
                <a href="#">Google</a>
            </li>
        </ul>
    </div>

</body>
</html>

- - 网页布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .header,.main,.footer{
            width: 500px;
        }

        .header,.footer{
            height: 100px;
            background: pink;
        }

        .main{
            height: 300px;
            background: blue;
        }

        .left,.right{
            width: 100px;
            height: 300px;
        }

        .left{
            background: orange;
            float: left;
        }

        .content{
            width: 300px;
            height: 300px;
            background: yellow;
            float: left;
        }

        .right{
            background: green;
            float: right;
        }

        .content-top,.content-bottom{
            height: 150px;
        }

        .content-top{
            background: lightgreen;

        }

        .content-bottom{
            background: purple;
        }
    </style>
</head>
<body>

    <div class="header"></div>

    <div class="main">
            <div class="left"></div>

            <div class="content">
                <div class="content-top"></div>
                <div class="content-bottom"></div>
            </div>

            <div class="right"></div>
    </div>

    <div class="footer"></div>

</body>
</html>

清除浮动
- 清除不是删除浮动
- 清除浮动是清除浮动产生的不良影响
- 额外标签法: 在浮动元素后边加一个标签, 清除浮动

    <div class="left-bar"></div>
    <div class="right-bar"></div>
    <div style="clear:both;"></div>

- 在外边的父盒子上使用: overflow: hidden;
  - 如果盒子在内容外, 会被裁掉

        .conent{
            overflow: hidden;
            width: 500px;
        }

- 伪元素清除浮动

    <style type="text/css">
        .clearfix:after{
            content: ".";
            display: block;
            height: 0;
            line-height: 0;
            visibility: hidden;
            clear: both;
        }

        .clearfix{
            zoom: 1;
        }

    </style>

overflow
- overflow: hidden;　　会将出了盒子的内容裁掉
- overflow: auto;　　　当内容出了盒子之外, 会自动生成滚动条, 如果内容没有超过盒子, 则不生成滚动条
- overflow: scroll;　　不管内容有没有出盒子, 都会生成滚动条
- overflow: visible;　　内容出了盒子也会显示, 不生成滚动条

定位 position

定位方向: left | right | top | bottom
静态定位: 静态定位. 默认值, 就是文档流

position: static;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">

        body{
            margin: 0;
        }

        .father{
            width: 300px;
            height: 300px;
            background: green;
            position: absolute;
        }

        .box{
            width: 100px;
            height: 100px;
            background: red;
            /*静态定位*/
            /*position: static;*/

            /*绝对定位*/
            position: absolute;
            right: 100px;
        }

        .box1{
            width: 200px;
            height: 200px;
            background: green;
        }

        .baby{
            position: absolute;
            width: 100px;
            height: 100px;
            background: orange;

            /*调整元素的层叠顺序 默认值是 0~99, 值越大, 元素越在上面*/
            z-index: 2;
        }

        .baby1{
            position: absolute;
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="box"></div>
    </div>

    <span class="baby"></span>

    <span class="baby1"></span>

    <!-- <div class="box1"></div> -->

</body>
</html>

绝对定位: position: absolute;
- 特点
  - 元素使用绝对定位之后不占据原来的位置(脱标)
  - 元素用使用绝对定位, 位置是从浏览器出发.
  - 嵌套的盒子, 父盒子没有使用定位, 子盒子绝对定位, 子盒子是从浏览器出发的.
  - 嵌套的盒子, 父盒子使用定位, 子盒子绝对定位, 子盒子是从父元素的位置出发的.
  - 给行内元素使用绝对定位之后, 转换为行内块(不推荐使用)

相对定位: position: relative;

特点

位置从自身出发
还占据原来的位置(不脱标)
子绝父相(父元素相对定位, 子元素绝对定位)
行内元素使用相对定位不能转行内块

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">

        .father{
            width: 500px;
            height: 500px;
            background: #eee;
        }

        .red,.green{
            width: 100px;
            height: 100px;
        }

        .red{
            background: red;
            position: relative;
            left: 200px;
        }

        .green{
            background: green;
        }
    </style>
</head>
<body>

    <div class="father">
        <div class="red"></div>
    </div>
    <!-- <div class="green"></div> -->

</body>
</html>

固定定位: position: fixed;

特点

元素使用固定定位之后不占据原来的位置(脱标)
元素用使用固定定位, 位置是从浏览器出发.
给行内元素使用固定定位之后, 转换为行内块(不推荐使用)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .box,.box1{
            width: 100px;
            height: 100px;
        }

        .box{
            background: red;
            position: fixed;
            bottom: 5px;
            right: 5px;
        }

        .box1{
            background: green;
        }

        span{
            background: red;
            position: fixed;
            bottom: 5px;
            right: 5px;
        }

    </style>
</head>
<body>

    <div class="box"></div>
    <div class="box1"></div>

    <span></span>

</body>
</html>

时间： 2024-10-08 19:34:59

网页开发学习笔记九: css 页面布局的相关文章

angular学习笔记(九)-css类和样式2

在上一个例子中,元素的类名使用拼接的方法,这样,类名中就不得不带有true或false,并且不易维护,所以,angular使用ng-class属性来控制元素的类名: 我们来看一个小例子,点击error按钮,顶部提示错误框,点击warning按钮,顶部提示警告框. 错误框的类名是.err,警告框的类名是.warn: <!DOCTYPE html> <html ng-app> <head> <title>6.2css类和样式</title> <

angular学习笔记(九)-css类和样式3

再来看一个选择li列表的例子: 点击li中的任意项,被点击的li高亮显示: <!DOCTYPE html> <html ng-app> <head> <title>6.3css类和样式</title> <meta charset="utf-8"> <script src="../angular.js"></script> <script src="scri

【windows phone开发学习笔记】之页面导航

最近用了一个多月时间终于把看C#看完了(其实之前也看过曾瑛老师的视频教程,无奈看完后基本都忘记差不多了,当时尝试wp开发时非常吃力,只得扔下wp重新学习C#).再次看完C#,于是又重新开始了学习wp开发.此后,我会把我学习过程中的笔记与大家分享,共同交流和学习.我的微博账号是@马and康: 页面导航也就是在应用内在的几个页面之间切换,本例是可以从主界面导航到界面1.界面2.当然也支持从界面1.界面2导航到主界面,这是一个很简单的例子,不过无论多复杂的其应用原理跟这也都是一样的.导航主要可以运用两

【转】Android开发学习笔记：5大布局方式详解

Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件. 帧布局(FrameLayout):组件从屏幕左上方布局组件. 表格布局(TableLayout):按照行列方式布局组件. 相对布局(RelativeLayout):相对其它组件的布局方式. 绝对布局(AbsoluteLayout):按照绝对坐标来布局组件. 1. 线性布局线性布局是Android开发中最常见的一种布局方式,它是按照垂直或者水平方向来布局,通过“android:

网页开发学习笔记三: HTML选择器

选择器是一个选择标签的过程标签选择器标签{属性: 值; 属性:值;} <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Document</title> <style type="text/css"> /*样式表内容 */ div{ font-size: 50px; color: orange; backgro

angular学习笔记(九)-css类和样式1

本篇主要介绍通过数据绑定来给元素添加特定的类名,从而应用特定的样式从一个最基本的例子来看: <!DOCTYPE html> <html ng-app> <head> <title>6.1css类和样式</title> <meta charset="utf-8"> <script src="../angular.js"></script> <script src=&

网页开发学习笔记四: HTML样式表

内嵌样式只作用于当前文件, 没有真正实现结构表现分离 <head> <style type="text/css"> 样式表写法 </style> </head> 外链样式作用范围是当前站点, 范围广, 真正实现结构表现分离 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></ti

Django Web开发学习笔记（4）

第四章模板篇上一章的内容,我们将HTML的代码和Python代码都混合在了在view.py的文件下.但是这样做的坏处无疑是明显的,引用DjangoBook的说法: 对页面设计进行的任何改变都必须对 Python 代码进行相应的修改. 站点设计的修改往往比底层 Python 代码的修改要频繁得多,因此如果可以在不进行 Python 代码修改的情况下变更设计,那将会方便得多. Python 代码编写和 HTML 设计是两项不同的工作,大多数专业的网站开发环境都将他们分配给不同的人员(甚至不同部门

转 Android开发学习笔记：浅谈WebView

原创作品,允许转载,转载时请务必以超链接形式标明文章原始出处 .作者信息和本声明.否则将追究法律责任.http://liangruijun.blog.51cto.com/3061169/647456 WebView(网络视图)能加载显示网页,可以将其视为一个浏览器.它使用了WebKit渲染引擎加载显示网页,实现WebView有以下两种不同的方法: 第一种方法的步骤: 1.在要Activity中实例化WebView组件:WebView webView = new WebView(this); 2