软件世界网 购物 网址 三丰软件 | 小说 美女秀 图库大全 游戏 笑话 | 下载 开发知识库 新闻 开发 图片素材
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
移动开发 架构设计 编程语言 Web前端 互联网
开发杂谈 系统运维 研发管理 数据库 云计算 Android开发资料
  软件世界网 -> Web前端 -> CSS学习(二十) -> 正文阅读

[Web前端]CSS学习(二十)

一、理论:
1.混合版本flexbox模型
a.display 
1)flexbox 设置元素为块级容器
2)inline-flexbox 设置元素为内联块伸缩容器
b.display容器的基本使用
1)主要用于IE10浏览器
2.伸缩流方向flex-direction
a.flex-direction
1)row ltr-->自左向右排列,rtl-->自右向左排列
2)row-reverse ltr-->自右向左排列,rtl-->自左向右排列
3)column 按出现顺序从上到下排列
4)column-reverse 伸缩项目从下到上排列
二、实践:
(注:1,2,3是伸缩布局盒,4,5是flexbox模型)
1.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" media="screen">
        *{
            margin: 0;
            padding: 0;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        #header,#footer{
            width:100%;
            padding:10px;
            background-color:#ccc;
        }
        #sidebar-left,
        #sidebar-right{
            width:220px;
            padding:10px;
            background-color: #123589;
        }
        #main{
            background-color: #9eaab6;
            padding: 10px;
            margin : 0 10px;
        }
        #page{
            width:100%;
            display:-moz-box;
            display:-webkit-box;
            display:box;
        }
        #main{
            -moz-box-flex: 1;
            -webkit-box-flex:1;
            -moz-box-flex: 1;
        }
    </style>
</head>
<body>
    <div id = "header">
        <h1>Header</h1>
    </div>
    <div id = "page">
        <div id="main">
            <h1>MainContent</h1>
        </div>
        <div id="sidebar-left">
            <h1>LeftContent</h1>
        </div>
        <div id="sidebar-right">
            <h1>RightContent</h1>
        </div>
    </div>
    <div id="footer">
        <p>footer</p>
    </div>
</body>
</html>
2.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" media="screen">
        *{
            margin: 0;
            padding: 0;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        #header,#footer{
            width:100%;
            padding:10px;
            background-color:#ccc;
        }
        #sidebar-left,
        #sidebar-right{
            width:220px;
            padding:10px;
            background-color: #123589;
        }
        #sidebar-right{
            -moz-box-ordinal-group: 2;
            -webkit-box-ordinal-group: 3;
            -moz-box-ordinal-group: 3;
        }
        #main{
            background-color: #9eaab6;
            padding: 10px;
            margin : 0 10px;
            -moz-box-flex:1;
            -webkit-box-flex:1;
            box-flex:1;
            -moz-box-ordinal-group: 2;
            -webkit-box-ordinal-group: 2;
            box-ordinal-group:2;
        }
        #page{
            width:100%;
            display:-moz-box;
            display:-webkit-box;
            display:box;
        }
        #main{
            -moz-box-flex: 1;
            -webkit-box-flex:1;
            -moz-box-flex: 1;
        }
    </style>
</head>
<body>
    <div id = "header">
        <h1>Header</h1>
    </div>
    <div id = "page">
        <div id="main">
            <h1>MainContent</h1>
        </div>
        <div id="sidebar-left">
            <h1>LeftContent</h1>
        </div>
        <div id="sidebar-right">
            <h1>RightContent</h1>
        </div>
    </div>
    <div id="footer">
        <p>footer</p>
    </div>
</body>
</html>
3.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" media="screen">
        body{
            height: 100%;
            display: -webkit-box;
            display:-moz-box;
            display:box;
            -moz-box-orient: vertical;
            -webkit-box-orient:vertical;
            box-orient:vertical;
            width:100%;
        }
        *{
            margin: 0;
            padding: 0;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-box-sizing:border-box;
        }
        #header,#footer{
            width:100%;
            padding:10px;
            background-color:#ccc;
        }
        #sidebar-left,
        #sidebar-right{
            width:220px;
            padding:10px;
            background-color: #123589;
        }
        #sidebar-right{
            -moz-box-ordinal-group: 3;
            -webkit-box-ordinal-group: 3;
            box-ordinal-group: 3;
        }
        #main{
            background-color: #9eaab6;
            padding: 10px;
            margin:0 10px;
            -moz-box-ordinal-group: 2;
            -webkit-box-ordinal-group: 2;
            -moz-box-group: 2;
        }
        #page{
            width:100%;
            display:-moz-box;
            display:-webkit-box;
            display:box;
        }
        #main{
            -moz-box-flex: 1;
            -webkit-box-flex:1;
            -moz-box-flex: 1;
        }
    </style>
</head>
<body>
    <div id = "header">
        <h1>Header</h1>
    </div>
    <div id = "page">
        <div id="main">
            <h1>MainContent</h1>
        </div>
        <div id="sidebar-left">
            <h1>LeftContent</h1>
        </div>
        <div id="sidebar-right">
            <h1>RightContent</h1>
        </div>
    </div>
    <div id="footer">
        <p>footer</p>
    </div>
</body>
</html>
4.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" media="screen">
        *{
            margin:0;
            padding: 0;
        }
        .flexbox-container{
            padding:10px;
            border:1px solid hsla(120,30%,50%,0.8);
            margin:50px;
            background-color: hsla(10,80%,10%,0.2);
        }
        .flexbox-container >div{
            width: 100%;
            height: 100px;
            border:1px solid hsla(120,30%,50%,0.8);
            margin: 5px;
            font-size:20px;
            text-align: center;
            line-height: 100px;
            color:#fff;
            font-weight: bold;
        }
        .flexbox-container > div:nth-child(1){
            background-color: hsla(120,30%,50%,0.8);
        }
        .flexbox-container > div:nth-child(2){
            background-color: hsla(120,30%,10%,0.8);
        }
        .flexbox-container > div:nth-child(3){
            background-color: hsla(20,30%,50%,0.8);
        }
        .flexbox-container > div:nth-child(4){
            background-color: hsla(20,80%,50%,0.8);
        }
        .flexbox-container > div:nth-child(5){
            background-color: hsla(320,80%,50%,0.8);
        }
        .flexbox-container > div:nth-child(6){
            background-color: hsla(320,80%,50%,0.8);
        }
        .flexbox-container{
            display: ms-flexbox;
            -ms-flex-direction: row;
        }
    </style>
</head>
<body>
    <div class="flexbox-container">
        <div>Box1</div>
        <div>Box2</div>
        <div>Box3</div>
        <div>Box4</div>
        <div>Box5</div>
        <div>Box6</div>
    </div>
</body>
</html>
5.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" media="screen">
        *{
            margin:0;
            padding: 0;
        }
        .flexbox-container{
            padding:10px;
            border:1px solid hsla(120,30%,50%,0.8);
            margin:50px;
            background-color: hsla(10,80%,10%,0.2);
        }
        .flexbox-container >div{
            width: 100%;
            height: 100px;
            border:1px solid hsla(120,30%,50%,0.8);
            margin: 5px;
            font-size:20px;
            text-align: center;
            line-height: 100px;
            color:#fff;
            font-weight: bold;
        }
        .flexbox-container > div:nth-child(1){
            background-color: hsla(120,30%,50%,0.8);
        }
        .flexbox-container > div:nth-child(2){
            background-color: hsla(120,30%,10%,0.8);
        }
        .flexbox-container > div:nth-child(3){
            background-color: hsla(20,30%,50%,0.8);
        }
        .flexbox-container > div:nth-child(4){
            background-color: hsla(20,80%,50%,0.8);
        }
        .flexbox-container > div:nth-child(5){
            background-color: hsla(320,80%,50%,0.8);
        }
        .flexbox-container > div:nth-child(6){
            background-color: hsla(320,80%,50%,0.8);
        }
        .flexbox-container{
            display:-ms-flexbox;
            -ms-flex-direction:column;
        }
    </style>
</head>
<body>
    <div class="flexbox-container">
        <div>Box1</div>
        <div>Box2</div>
        <div>Box3</div>
        <div>Box4</div>
        <div>Box5</div>
        <div>Box6</div>
    </div>
</body>
</html>

......显示全文...
    点击查看全文


上一篇文章      下一篇文章      查看所有文章
2016-03-28 21:39:56  
Web前端 最新文章
10分钟
SSM框架SSM项目源码SSM源码下载java框架整合
javascript入门
JavaScript常用对象Array(2)
8.Smarty3:模版中的内置函数
表单脚本
iTextSharp5.0页眉页脚及Asp.net预览的实现
MVC基础学习—理论篇
JavaScript
http协议中get与post区别详解
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 新闻资讯 小游戏 Chinese Culture 股票 三丰软件 开发 中国文化 网文精选 阅读网 看图 日历 万年历 2018年12日历
2018-12-11 3:48:19
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  软件世界网 --