您现在的位置是:首页 > 前端学习 > Web前端Web前端

灵活的盒布局和界面设计(第十五章)(图文)

第十三双眼睛2020-03-08【Web前端】人已围观

简介在CSS2.0的时代,页面布局比较流行DIV+CSS,但这其中的浮动布局有很多不便和缺陷,盒子元素的阴影效果,需要借助图片来实现,界面美化方面也显得复杂,对于这些问题,在传统的设计中,没有那么直接的体现,要绕一些弯子,而在CSS3中,这些问题将变得简单直接,弹性布局直接解决页面布局中的问题,盒子阴影有专门的属性处理,友好的界面布局也少走了很多弯路。本章的知识点如下:
1认识并认识盒布局
2学习网页设计中最重要的盒模型
3CSS在用户界面的设计方面的改进

盒布局是CSS3反战的新型布局方式,它比传统的浮动布局更加完善,更加灵活,而使用方法却更加简单。开启盒布局的方法,就是把display的属性设置为box或者inline-box,由于目前没有浏览器支持box属性值,为了能兼容webkit内核和gecko内核的浏览器,可以分别使用-webkit-box和-moz-box属性,开启盒布局后,文档就会按照盒布局博人的方式,来布局子元素。
例子:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .container{
                display: -webkit-box;
                display: -moz-box;
                display: -moz-box;
            }
            .container div{
                color: #fff;
                font-size: 12px;
                padding: 10px;
                line-height: 20px;
            }
            .container div ul{
                margin: 0;
                padding-left: 20px;
            }
            .container .left-aside{
                background-color: #f63;
            }
            .container .center-content{
                background-color: #390;
            }
            .container .right-aside{
                background-color: #039;
            }
        </style>
    </head>
    <body>
        <div class="container">
            
            <div class="left-aside">
                <h2>菜单</h2>
                <ul>
                    <li>HTML5</li>
                    <li>CSS3</li>
                    <li>活动沙龙</li>
                    <li>研发小组</li>
                </ul>
            </div>
            
            <div class="center-content">
                <h2>内容</h2>
                <p></p>
                <p></p>
            </div>
            
            <div class="right-aside">
                <h2>工具</h2>
                <ul>
                    <li>天气预报</li>
                    <li>货币汇率</li>
                    <li>每周英语</li>
                </ul>
            </div>
        </div>
    </body>
</html>


效果如下图所示:

在上面的例子中,设置了container的属性display:box,并针对web-kit和gecko内核设置了各自的私有属性,接下来被赋予container类的元素的内部元素将改变原有的文档流的流动方式使用盒布局默认的文档流动方式,盒布局包含很多方面的内容,开启盒布局只是盒布局的第一步。

元素的布局方向-box-orient属性
CSS3新增的box-orient属性,可用于定义盒元素的内部布局方向,基于webkit内核的替代私有属性是-webkit-box-orient,基于gecko内核的替代私有属性是-moz-box-orient,参数说明:
box-orient: horizontal  vertical  inline-axis  block-axis  inherit
horizontal表示盒子元素在一条水平直线上从左到右编排它的子元素
vertical表示盒子元素在一条垂直直线上从上到下编排它的子元素
inline-axis表示盒子元素沿着内联轴编排它的子元素,表现为横向编排
block-axis表示元素沿着块轴编排它的子元素,表现为垂直编排
inherit表示继承元素中box-orient属性的值。
例子:在盒布局的方式下,改变栏目的方向为竖向显示
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .container{
                display: -webkit-box;
                display: -moz-box;
                display: -moz-box;
                -webkit-box-orient: vertical;
                -moz-box-orient: vertical;
                -moz-box-orient: vertical;
            }
            .container div{
                color: #fff;
                font-size: 12px;
                padding: 10px;
                line-height: 20px;
            }
            .container div ul{
                margin: 0;
                padding-left: 20px;
            }
            .container .left-aside{
                background-color: #f63;
            }
            .container .center-content{
                background-color: #390;
            }
            .container .right-aside{
                background-color: #039;
            }
        </style>
    </head>
    <body>
        <div class="container">
            
            <div class="left-aside">
                <h2>菜单</h2>
                <ul>
                    <li>HTML5</li>
                    <li>CSS3</li>
                    <li>活动沙龙</li>
                    <li>研发小组</li>
                </ul>
            </div>
            
            <div class="center-content">
                <h2>内容</h2>
                <p></p>
                <p></p>
            </div>
            
            <div class="right-aside">
                <h2>工具</h2>
                <ul>
                    <li>天气预报</li>
                    <li>货币汇率</li>
                    <li>每周英语</li>
                </ul>
            </div>
        </div>
    </body>
</html>


效果如下图所示:

元素的布局顺序-bor-direction属性
在盒布局下,可以设置盒元素内部的顺序为正向或者反向,CSS3新增的box-direction属性,可用于定义盒元素的内部布局顺序。基于webkit内核的私有替代属性是-webkit-box-direction,基于gecko内核的私有替代属性是-moz-box-direction,参数说明box-direction属性的语法如下:
box-direction: normal   reverse   inherit
noamal默认值,正常顺序,垂直布局的盒元素中,内部子元素从左到右排列显示,水平布局的盒元素中,内部元素从上到下显示。
reverse:反向,表示盒元素内部的自由按是的排列显示顺序于normal相反
inherit:表示继承父元素中box-direction属性的值
例子:把之前的例子中的3个栏目改为水平方向上的反向布局
-webkit-box-direction: reverse;
-moz-box-direction: reverse;
box-direction:reverse;

效果如下图所示:

调整元素的位置-box-ordinal-group属性
CSS3新增的属性bor-ordinal-group属性,用于定义盒元素内部的子元素的显示位置,基于webkit内核的替代属性是-webkit-box-ordinal-group,基于gecko内核的替代私有属性是-moz-box-ordinal-group,参数说明:
box-ordinal-group:integer
integer是一个整数,从1开始,表示子元素的显示位置,子元素将根据这个值重新排序,值相等等,将取决于源代码的顺序,子元素的默认值均为1,按照源代码的位置顺序进行排列
例子:在之前的例子,调整菜单栏和工具栏的显示位置
.container .left-aside{
                background-color: #f63;
                -webkit-box-ordinal-group: 2;
                -moz-box-ordinal-group: 2;
                -webkit-box-ordinal-group: 2;
}
 .container .center-content{
                background-color: #390;
}
.container .right-aside{
                background-color: #039;
                -webkit-box-ordinal-group: 3;
                -moz-box-ordinal-group: 3;
                -webkit-box-ordinal-group: 3;
}

效果如下图所示:

弹性空间分配
CSS3新增的box-flex属性,用于定义盒元素内部的子元素是否具有空间弹性,当盒元素的尺寸扩大或者缩小时,被定义为右弹性空间的子元素的尺寸也会缩小或者放大,每当盒元素有额外的空间时,具有空间弹性的子元素会扩大自身大小来填补这一空间,基于webkit的私有替代属性是-webkit-box-flex,基于gecko内核的替代属性是-moz-box-flex,参数说明:
box-flex: value
value该属性值是一个整数或者小数,不可为负值,默认值为0.0,使用空间弹性属性设置,使得盒元素内部元素的总宽度和总高度,始终等于盒元素的宽度和高度,不过只有当盒元素有确定的高度或者宽度,才能表现出子元素的空间弹性。
子元素的弹性空间
下面的例子中,在盒元素的内部设置了宽度相等的3栏,菜单,文章列表,和工具栏,并设置了菜单栏的box-flex属性,使其具有空间弹性
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .container{
                width: 100%;
                background-color: #ccc;
                display: -webkit-box;
                display: -moz-box;
                display: box;
            }
            .container div{
                color: #fff;
                font-size: 12px;
                padding: 10px;
                line-height: 20px;
                width: 100px;
            }
            .container div ul{
                margin: 0;
                padding-left: 20px;
            }
            .container .left-aside{
                background-color: #f63;
                -webkit-box-flex: 1;
                -moz-box-flex: 1;
                box-flex:1;
            }
            .container .center-content{
                background-color: #390;
            }
            .container .right-aside{
                background-color: #039;
            }
        </style>
    </head>
    <body>
        <div class="container">
            
            <div class="left-aside">
                <h2>菜单</h2>
                <ul>
                    <li>HTML5</li>
                    <li>CSS3</li>
                    <li>活动沙龙</li>
                    <li>研发小组</li>
                </ul>
            </div>
            
            <div class="center-content">
                <h2>文章列表</h2>
                <ul>
                    <li>文本阴影</li>
                    <li>色彩模式</li>
                    <li>多重背景</li>
                    <li>边框圆角</li>
                    <li>新型盒布局</li>
                    <li>盒子阴影</li>
                </ul>
            </div>
            
            <div class="right-aside">
                <h2>工具</h2>
                <ul>
                    <li>天气预报</li>
                    <li>货币汇率</li>
                    <li>每周英语</li>
                </ul>
            </div>
        </div>
    </body>
</html>


效果如下图所示:

多个子元素的弹性空间
当盒元素内部的多个子元素都定义box-flex属性时,子元素的空间弹性是相对的,浏览器将会把各个子元素的box-flex属性相加得到一个总值,然后根据各自的值占总值的比例来分配盒元素剩余的空间
.container .center-content{
                background-color: #390;
                -webkit-box-flex: 2;
                -moz-box-flex: 2;
                box-flex:2;
}

效果如下图所示:

在上面的例子中,菜单栏的box-flex属性设置为1,文章列表栏的box-flex属性设置为2,在分配剩余空间的时候,菜单栏分配1份,文章列表分配2份。
元素的对齐方式box-pack 和box-align属性
CSS3新增的box-pack属性和box-align世俗性,分别用于定义盒元素内部水平对齐方式和垂直对齐方式,这种对齐方式,对盒元素内部的文字,图像,及子元素都是有效的,基于webkit的替代私有属性是-webkit-box-pack和-webkit-box-align,基于gecko内核的替代属性是-moz-box-pack和-moz-box-align。
参数说明;
box-pack属性可以设置子元素在水平方向上的对齐方式,语法如下:
box-pack:start  end center  justify;
取值说明:
start:默认值,表示所有的子元素都显示在盒元素的左侧,额外的空间显示在盒元素右侧。
end:表示所有的子元素都显示在盒元素的右侧,额外的空间显示在盒元素的左侧。
center:表示所有的子元素居中显示,额外的空间平均分布在两侧
justify:表示所有的子元素散开显示,额外的空间在子元素之间平均分配,在第一个子元素之前和最后一个子元素之后不分配空间
box-align可以设置元素在垂直方向上的对齐方式
取值说明:
start:表示所有的子元素都显示在盒元素的顶部,额外的空间显示在盒元素的底部
end:表示所有的子元素都显示在盒元素的底部,额外的空间显示在盒元素的顶部
center:表示所有的子元素都垂直居中显示,额外的空间平均分配在上下两侧
baseline:表示所有的子元素沿着基线显示
stretch:默认值,表示每个子元素的高度被拉伸到适合的盒元素高度
自适应居中
在CSS2.0时代,把元素布局在页面的正中央,是难以通过CSS样式表来实现的,通常会借助javascript来实现,需要写大量代码,还会遇到兼容性问题,下面我们借助box-pack,和box-align属性,来实现把一个对话框布局在页面中央
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>自适应居中</title>
        <style type="text/css">
            body,html{
                margin: 0;
                padding: 0;
                height: 100%;
            }
            #box{
                width: 100%;
                height: 100%;
                display: box;
                display: -webkit-box;
                display: -moz-box;
                -webkit-box-pack: center;
                -moz-box-pack: center;
                box-pack:center;
                -webkit-box-align: center;
                -moz-box-align: center;
                box-align:center;
            }
            #box div{
                opacity: 0.8;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <div>
                <img src="img/2.jpg" />
            </div>
        </div>
    </body>
</html>


效果如下图所示:

底部对齐
在CSS2.0时代,把元素布局在页面底部也是比较困难的,下面借助box-pack和box-align属性来实现
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>把图片固定在页面底部</title>
        <style type="text/css">
            #box{
                width: 500px;
                height: 200px;
                border: 1px solid #f90;
                display: -webkit-box;
                display: -moz-box;
                display: box;
                -webkit-box-pack: center;
                -moz-box-pack: center;
                box-pack:center;
                
                -webkit-box-align: end;
                -moz-box-align: end;
                box-align:end;
            }
            #box div{
                padding: 5px;
                border: 1px solid #CCCCCC;
                margin: 1px;
            }
            #box div img{
                width: 125px;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <div><img src="img/2.jpg"/></div>
            <div><img src="img/2.jpg"/></div>
            <div><img src="img/2.jpg"/></div>
        </div>
    </body>
</html>


效果如下图所示:

使用新型盒布局设计网页
CSS3发展的新型盒布局是一种全新的页面布局方式,不仅可以完全替代传统的浮动布局,而且布局出来的网页具有很强的使用性,具体的体现就是其空间弹性。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>使用新型盒布局设计网页</title>
        <style type="text/css">
            body,html{
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
                font-family: arial;
            }
            body{
                display: -webkit-box;
                display: -moz-box;
                display: box;
                
                -webkit-box-pack: center;
                -moz-box-pack: center;
                box-pack:center;
            }
            #area{
                height: 100%;
                max-width: 950px;
                min-width: 600px;
                -webkit-box-flex: 1;
                -moz-box-flex: 1;
                box-flex:1;
                display: -webkit-box;
                display: -moz-box;
                display: box;
                -webkit-box-orient: vertical;
                -moz-box-orient: vertical;
                -box-orient:vertical;
            }
            #area header{
                background-color: #ff6600;
                text-align: center;
                line-height: 35px;
                color: #FFFFFF;
                font-size: 24px;
                font-weight: bold;
            }
            #area #header{
                padding: 15px;
            }
            #area #container{
                -webkit-box-flex: 1;
                -moz-box-flex: 1;
                box-flex:1;
                 display: -webkit-box;
                 display: -moz-box;
                 display: box;
            }
            #area footer{
                background-color: #f47d31;
                text-align: center;
                line-height: 20px;
                color: #ffffff;
            }
            #area #footer{
                padding: 10px;
            }
            #area #container nav{
                width: 170px;
                background-color: #999;
            }
            #area #container article{
                padding: 10px;
                -webkit-box-flex: 1;
                -moz-box-flex: 1;
                box-flex:1;
                display: -webkit-box;
                display: -moz-box;
                display: box;
                -webkit-box-orient: vertical;
                -moz-box-orient: vertical;
                box-orient:vertical;
            }
            #area #container aside{
                width: 170px;
                background-color: #999;
            }
            #area #container nav a:link, #area #container nav a:visited{
                display: block;
                border-bottom: 3px solid #fff;
                padding: 10px;
                text-decoration: none;
                font-weight: bold;
                margin: 5px;
            }
            #area #container nav a:hover{
                color: #FFFFFF;
                background-color: #F47D31;
            }
            #area #container article p{
                -webkit-box-flex: 1;
                -moz-box-flex: 1;
                box-flex:1;
            }
            #area #container aside p{
                padding: 15px;
                font-weight: bold;
                font-style: italic;
                color: #fff;
            }
        </style>
    </head>
    <body>
        <div id="area">
            <header id="header">页头:使用新型盒布局设计网页</header>
            <div id="container">
                <nav>
                    <h3>导航栏</h3>
                    <a href="#">盒布局</a>
                    <a href="#">布局方向</a>
                    <a href="#">布局顺序</a>
                </nav>
                <article>
                    <header>标题:开启盒布局</header>
                    <p>盒布局是CSS3发展的新的布局方式</p>
                    <footer>日期:2020-03-08</footer>
                </article>
                <aside>
                    <h3>侧边栏</h3>
                    <p>侧边栏内容</p>
                </aside>
            </div>
            <footer id="footer">页脚</footer>
        </div>
    </body>
</html>


效果如下图所示:



增强的盒模型
盒模型是网页设计中最基本,最重要的模型,CSS3新增的与盒模型有关的属性如盒子阴影,盒子尺寸,和溢出处理,为前端设计师带来更多的便利及人性化设计
盒子阴影box-shadow属性
CSS3定义的box-shadow属性,可以定义元素的阴影效果,关于该属性,到目前为止,已经获得了很多浏览器的支持,基于webkit的替代属性师-webkit-box-shadow,基于gecko的替代属性是-moz-box-shadow
box-shadow:none  inset  length 2,4  color
取值说明:none默认值,表示没有阴影
inset可选值,表示设置阴影的类型为内阴影,默认为外阴影。
length:是由浮点数字和标识符组成的长度值,可以取负值,4个length属性分别表示阴影的水平位移,垂直位移,模糊距离,和阴影大小。其中水平偏移和垂直偏移是必须的值,模糊半径和阴影大小可选。
color:表示阴影的颜色
完整的阴影属性包含6个参数值,阴影类型,水平偏移长度,垂直偏移长度,模糊半径,阴影大小,阴影颜色。其中水平偏移长度和垂直偏移长度是必须的,其他的都是可选的。
例子:盒子的阴影效果
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>盒子阴影</title>
        <style type="text/css">
            div{
                width: 200px;
                height: 100px;
                background-color: #FF9900;
                -webkit-box-shadow: 5px 5px 5px #333;
                -moz-box-shadow:5px 5px 5px #333;
                box-shadow: 5px 5px 5px #333;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>


效果如下图所示:

盒子的描边效果
用box-shadow属性可以给盒子设置丰富的描边,这种描边效果可以取代单调的边框,实现描边的方法,只需把水平偏移值和垂直偏移值设置为0,仅设置模糊半径,阴影大小,阴影颜色。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>盒子描边效果</title>
        <style type="text/css">
            div{
                margin: 20px auto;
                width: 200px;
                height: 100px;
                background-color: #FF9900;
                -webkit-box-shadow: 0 0 5px 5px #333333;
                -moz-box-shadow:0 0 5px 5px #333333;
                box-shadow: 0 0 5px 5px #333333;        }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>


效果如下图所示:

盒子的内阴影
box-shadow属性中添加值inset,即可实现向内的阴影
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>盒子的内阴影</title>
        <style type="text/css">
            div{
                width: 200px;
                height: 100px;
                background-color: #FF9900;
                -webkit-box-shadow: inset 5px 5px 5px #333333;
                -moz-box-shadow:inset 5px 5px 5px #333333;    
                box-shadow: inset 5px 5px 5px #333333;    }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>


效果如下图所示:

盒子尺寸的计算方法-box-sizing属性
当一个盒子的border,padding,margin等属性全部设置时,在不同的浏览器下,会有不同的尺寸,特别在IE浏览器中,width和height是包含border和padding的,标准的width和height是不包含border,padding的,为此要写大量的hack.
CSS3对盒模型进行了改善,新增的box-sizing属性,可以用于定义width和height计算方法,可以自由定义是否包含border和padding
参数说明:
box-sizing属性定义盒元素尺寸的语法如下:
box-sizing:context-box   padding-box   border-box   inherit;
contexnt-box:默认值,计算方法为width/height=content,表示指定的宽度和高度权限内容区域,边框和内边距的宽度不包含在内。
padding-box:计算方法为width/height=content+padding,表示指定的宽度和高度包含内边距和内容区域,边框宽度不包含在内。
border-box:计算方法为width/height=content+padding+border,表示指定的宽度和高度包含边框,内边距和内容区域。
inherit:表示继承父元素中box-sizing属性的值
例子:盒子尺寸的计算方法
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>盒子尺寸的计算方法</title>
        <style type="text/css">
            div{
                margin: 5px;
                width: 200px;
                height: 80px;
                background-color: #fe0;
                border:10px solid #fe0;
                padding: 10px;
                font-weight: bold;
                font-size: 18px;
                line-height: 40px;
            }
            .s1{
                box-sizing: border-box;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
            }
            .s2{
                box-sizing: padding-box;
                -webkit-box-sizing: padding-box;
                -moz-box-sizing: padding-box;
            }
            .s3{
                box-sizing: content-box;
                -webkit-box-sizing: content-box;
                -moz-box-sizing: content-box;
            }
        </style>
    </head>
    <body>
        <div class="s1">bordr-box</div>
        <div class="s2">padding-box</div>
        <div class="s3">content-box</div>
    </body>
</html>


效果如下图所示:

盒子溢出内容处理overflow-x和overflow-y属性
CSS3新增的这两个属性分别表示水平方向上的溢出处理,和垂直方向上的溢出处理
1参数说明
overflow-x :visible  auto  hidden   scroll no-display  no-content
overflow-y: visible  auto  hidden   scroll no-display  no-content
visible:默认值,盒子溢出时,不裁剪溢出的内容,超出盒子边界的部分将显示在盒元素之外。
auto:盒子溢出时,显示滚动条
hidden:盒子溢出时,溢出的内容将会被裁剪,并且不提供滚动条
scroll:始终显示滚动条
no-display:当盒子溢出时,不显示元素,该属性值是新增的。
no-content:当盒子溢出时,不显示内容,该属性时新增的。
例子:盒子溢出内容处理
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>盒子溢出内容处理</title>
        <style type="text/css">
            div{
                margin: 10px;
                width: 200px;
                height: 80px;
                padding: 10px;
                border: 1px solid #FF9900;
                float: left;
            }
            #box1{
                overflow-x: scroll;
                overflow-y: scroll;
            }
            #box2{
                overflow-x: auto;
                overflow-y: auto;
            }
            #box3{
                overflow-x: hidden;
                overflow-y: hidden;
            }
            #box4{
                overflow-x: visible;
                overflow-y: visible;
            }
        </style>
    </head>
    <body>
        <div id="box1">阿富汗总统阿什拉夫·加尼7日说,阿富汗政府并不想无限期关押塔利班囚犯,而是希望在放人前得到塔利班保证:不会再把他们送上战场攻打阿富汗安全部队。
        </div>
        <div id="box2">阿富汗总统阿什拉夫·加尼7日说,阿富汗政府并不想无限期关押塔利班囚犯,而是希望在放人前得到塔利班保证:不会再把他们送上战场攻打阿富汗安全部队。
        </div>
        <div id="box3">阿富汗总统阿什拉夫·加尼7日说,阿富汗政府并不想无限期关押塔利班囚犯,而是希望在放人前得到塔利班保证:不会再把他们送上战场攻打阿富汗安全部队。
        </div>
        <div id="box4">阿富汗总统阿什拉夫·加尼7日说,阿富汗政府并不想无限期关押塔利班囚犯,而是希望在放人前得到塔利班保证:不会再把他们送上战场攻打阿富汗安全部队。
        </div>
    </body>
</html>


效果如下图所示:

实战:设计网站服务条宽页面
当一些网站提供一些服务时,都会有一些服务条款,服务条款的页面比较简单,但可以实现不同的风格。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>网站服务条款</title>
        <style type="text/css">
            #policy{
                font-family: 宋体;
                margin: 10px auto;
                box-sizing: content-box;
                width: 400px;
                padding: 20px;
                background-color: #e4e4e4;
                box-shadow: inset 0 0 15px 5px #bbb;
            }
            #policy header{
                font-size: 24px;
                font-weight: bold;
                line-height: 25px;
            }
            #policy section{
                background-color: #FFFFFF;
                font-size: 12px;
                line-height: 25px;
                box-sizing: border-box;
                width: 400px;
                height: 200px;
                border: 1px solid #CCCCCC;
                overflow-x: hidden;
                overflow-y: scroll;
            }
            #policy footer{
                text-align: center;
                padding-top: 5px;
            }
            #policy footer input{
                border: 1px solid #666;
                box-shadow:2px 2px 1px #bbb;
            }
        </style>
    </head>
    <body>
        <div id="policy">
            <header>网站服务条款</header>
            <section>
                <p>欢迎您加入”仓宝在线”。为了向您提供更快更好的服务,请仔细阅读下列条款:</p>
                <p>一、 服务条款的接受</p>
                   <p>    本服务条款所称的用户是指完全同意所有条款并完成注册程序。</p>
                <p>二、服务条款的变更和修改</p>
                      <p>“仓宝在线”有权随时对服务条款进行修改,并且一旦发生服务条款的变动</p>
                <p>三、 用户应遵守以下法律及法规:</p>
                    <p>(1)用户同意遵守《中华人民共和国保守国家秘密法》、不经事先通知终止向该用户提供服务。</p>
                    <p>(2)用户应了解国际互联网的无国界性,应特别注意遵守当地所有有关的法律和法规。</p>
            </section>
            <footer>
                <input type="button" value="同意" />
                <input type="button" value="不同意" />
            </footer>
        </div>
    </body>
</html>


效果如下图所示:

增强的用户界面设计
界面设计方面,为了增强用户体验,设计师们会想尽办法来实现心目中的效果,也因此徒增很多工作量 ,CSS3在用户界面方面有很大改进,可以允许改变元素尺寸,定义外轮廓线,改变焦点导航顺序,让元素变身,以及给元素添加内容,这些功能的改进,使得设计师设计出的页面,具有很高的体验。
允许用户改变尺寸-resize属性
如果你使用火狐或者谷歌,你肯定注意到textarea标签元素的下面默认有个小手柄,他可以让用户调整他们的大小,CSS3新增的属性resize,可以把其他元素也应用同样的效果。
参数说明
resize:该属性定义一个元素是否允许用户调整大小。其语法如下:
resize: none   both   horizontal  vertical  inherit
none:默认值,表示用户不能调整元素
both:表示用户可以调整元素的宽度和高度
borizontal:表示用户可以调整元素的宽度,但是不能调整元素的高度
vertical:表示用户可以调整元素的高度,但是不能调整元素的宽度
inherti:继承父元素
提示:resize属性要和overflow或者overflow-x,overflow-y一起使用,才能把元素定义为可调整大小的,且溢出属性不能设置为visibal
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>可以调整大小的div</title>
        <style type="text/css">
            div{
                width: 100px;
                height: 80px;
                max-width: 600px;
                max-height: 400px;
                padding: 10px;
                border: 1px solid #FF9900;
                resize: both;
                overflow: auto;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>


效果如下图所示:

定义元素的外轮廓线outline属性
outlline属性可以定义一个元素的外轮廓线,以突出显示该元素,外轮廓线看起来很像边框,而且语法也和边框很相似,但是外轮廓线不占用元素尺寸,CSS3支持了该属性,参数说明:
outline:outline-width    outlline-style    outline-color   inherit
取值说明:
outline-width:定义元素轮廓的宽度
outline-style:定义元素轮廓的样式风格
outline-color:定义元素轮廓的颜色
inherit:继承父元素的轮廓样式
outline和边框有很多相似的地方,但是有很大的不同,outline属性定义的外轮廓线总是封闭的,完全闭合的,外轮廓线可能不是矩形,如果元素的display属性值为inline,外轮廓可能就变得不规则。
outline是一个复合的属性,包含了4个子属性,outline-width属性,outline-style,outline-color,outline-offset
outline-width:用于定义外轮廓的宽度,语法如下:
outline-width:thin   medium  thick   length   inherit
thin:定义为较细的轮廓线
medium:默认值,定义中等的轮廓线
thick:定义较粗的轮廓线
length:定义轮廓的宽度值,宽度指包含长度单位,不允许为负值
inherit:继承父元素的值 
轮廓的风格属性-outline-style
outline-style:用于定义元素轮廓的风格,语法如下:
outlline-style:  none    dotted dashed   solid  double   groove ridge  inset  outset  inherit
none:没有轮廓
dotted:定义轮廓为点状
dashed:定义轮廓为虚线
solid:定义轮廓为实线
double:定义轮廓为双线条,双线的宽度等于outline-width的值
groove:定义轮廓为3d凹槽,显示效果取决于outline-color的值
ridge:定义轮廓为3d凸槽,显示效果取决于outline-color的值
inset:定义轮廓为3d凹边,显示效果取决于outline-color的值
outset:定义轮廓为3d凸边,显示效果取决于outline-color的值
inherit:表示继承父元素
轮廓得颜色属性outline-color
outline-color属性用于定义元素轮廓得颜色,语法如下:
outline-color:color    invert    inherit
color:表示颜色值,CSS中可以使用得任何颜色,也可以是半透明颜色。
invert:为默认值,执行颜色反转,以保证轮廓在任何背景下都是可见得
inherit:表示继承父元素
轮廓得偏离属性outline-offset
outline-offset用于定义外轮廓与元素边界得距离,语法如下:
outline-offset:length  inherit
length表示偏移距离得长度值,长度值包含长度单位,可以为负值
inherit:表示继承父元素
例子:使用外轮廓渲染表单
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>使用外轮廓渲染表单</title>
        <style type="text/css">
            #login{
                margin:20px auto;
                width: 300px;
                border: 1px solid #f90;
                padding: 20px;
                line-height: 22px;
                outline: 2px solid #CCCCCC;
                background-color: #ffffff;
                font-size: 18px;
            }
            #login h1{
                font-size: 18px;
                margin: 0;
                padding: 5px;
                border-bottom: 1px solid #fc6;
                margin-bottom: 10px;
            }
            #login label{
                display: block;
                width: 100px;
                float: left;
                text-align: right;
                clear: left;
                margin-top:15px ;
            }
            #login input{
                float: left;
                width: 150px;
                margin-top: 15px;
                line-height: 22px;
                height: 24px;
                border: 1px solid #7f9db9;
            }
            #login input:focus{
                outline: 4px solid #FFCC66;
            }
            #login div{
                clear: both;
                padding-left: 100px;
                padding-top: 20px;
                font-size: 12px;
            }
            #login div button{
                width: 80px;
                font-size: 14px;
                line-height: 22px;
                background-image: -moz-linear-gradient(top,#ffffcc,#ffcc00);
                background-image: -webkit-gradient(linear,left top ,left bottom)
                from (#ffffcc),to (#ffcc99);
                border: 1px solid #FF9900;
            }
            #login div button:hover{
                outline: 2px solid #FFCC66;
            }
        </style>
        
    </head>
    <body>
        <form id="form1" name="form1" method="post" action="">
            <div id="login">
                <h1>用户登录</h1>
                <label for="username">用户名:</label>
                <input type="text" name="username" id="username" />
                <label for="password">密码:</label>
                <input type="password" name="password" id="password" />
                <div><button>登录</button><a href="#">忘记密码</a></div>
            </div>
        </form>
    </body>
</html>


效果如下图所示:

伪装的元素-appearance-属性
CSS新增的appearance属性可以方便的把元素伪装成其他类型的元素,给界面设计上带来极大的灵活性,基于webkit的代替属性是webkit-appearance,基于gecko的代替属性是-moz-appearance属性
参数说明:
appearance属性用于定义一个元素看起来像别的元素,语法如下:
appearance:normal   icon   window   button  menu   field
notmal:正常的修饰元素
icon:把元素修饰的像一个图标
window:把元素修饰的像一个视窗
button:将元素修饰的像一个按钮
menu:将元素修饰的像一个菜单
field:把元素修饰的像一个输入框
例子:
为元素添加内容-content属性
如果给元素插入内容,很少人想到使用CSS,在CSS中,可以使用content属性为元素添加内容,这已然替代了部分javascript的功能
参数说明:
content:none normal  string  counter  attr  url  inherit
none:如果有指定的添加内容,则设置为空
normal:默认值,不做任何指定或者改动
string:指定添加的文本内容
counter:指定一个计数器作为添加内容
attr:把选择的元素的属性值作为添加内容,
url:指定一个外部资源作为添加内容,如图像,音频视频等,url作为一个网络地址
inherit:继承父元素
content属性的使用,更多的是与CSS结合
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>添加content</title>
        <style type="text/css">
            #nav{
                margin: 20px auto;
                width: 200px;
                border: 1px solid #FF9900;
                padding: 20px;
                line-height: 22px;
                font-size: 18px;
            }
            #nav a{
                display: block;
                font-size: 12px;
                line-height: 22px;
                font-size: 18px;
            }
            a[href$=html]:before{
                content: "网页";
            }
            a[href$=jpg]:before{
                content: "图片";
            }
            a[href$=doc]:before{
                content: "文档";
            }
        </style>
    </head>
    <body>
        <div id="nav">
            <a href="1.html"></a>
            <a href="1.jpg"></a>
            <a href="1.doc"></a>
        </div>
    </body>
</html>


效果如下图所示:





 

Tags:HTML   HTML网页   网页

很赞哦! ()

随机图文

文章评论

    共有条评论来说两句吧...

    用户名:

    验证码:

本站推荐

站点信息

  • 网站名称:JavaStudy
  • 建站时间:2019-1-14
  • 网站程序:帝国CMS7.5
  • 文章统计242篇文章
  • 标签管理标签云
  • 统计数据百度统计
  • 微信公众号:扫描二维码,关注我们