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

传统的div+css设计(第十四章)(图文)

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

简介本章的知识点如下:
1了解页面是如何布局的
2理解层的含义,以及层的特性和他的使用方式
3学习创建框模型以及它的使用规律和特点
4了解CSSHack
5简单的布局页面的创建

理解块级的意义
再web设计中,设计者使用CSS来修饰页面的内容,而与CSS这个名字相关的还有一个名字是CSS-P,它是CSS的一个扩展,表示如何布局页面内容再浏览窗口中的位置,那么使用样式表是怎样工作的呢,下面的例子通过层来布局页面。
例子:通过层来了解页面布局内容的位置
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>通过层来定位页面内容的位置</title>
        <style type="text/css">
            #nav{
                position: absolute;
                font: 1em 幼圆  bold;
                left: 10;
                line-height: 2em;
                width: 8em;
                background: orange;
            }
            #content{
                margin-left: 7em;
                font: 1.2em arial;
                border-left: 0.1em orange dotted;
            }
        </style>
    </head>
    <body>
        <div id="nav">
            <ul>
                <li>目录一</li>
                <li>目录二</li>
                <li>目录三</li>
                <li>目录四</li>
                <li>目录五</li>
            </ul>
        </div>
        <div id="content">
            绰号其实也讲历史含蕴,短小精悍,翻译给其他国家的人听
        </div>
    </body>
</html>

效果如下图所示:

CSS样式表可以可以通过被封再层上的这种方式来限制页面所修饰的内容,就是说,为了使用样式表只是对页面局部起修饰作用,于是页面设计者将局部内容定义在某个范围内,这个范围便称之为CSS层,CSS层可以使用HTML标签来定义,这种使用方法是web设计中的一种
行<span>和层<div>
设计者经常把CSS样式表放在<span>和<div>这两个布局页面的标签中,他们的作用是令样式表可以仅仅对标签呢的元素起作用,区别是<span>是指行内的对象,而<div>标签针对的是层内的对象。
层的基本定位
通过一些基本的属性可以给层定位在页面中的任何位置,这些主要的属性有方位属性,如果层的上下左右,描述大小的属性,如层的宽,高,参照位置。
left:相当于窗口左边的位置
right:相当于窗口右边的位置
top:相当于窗口上边的位置
bottom:相当于窗口下边的位置
width:表示层的宽度
height:表示层的高度
position:用来控制采用什么样的方式定位图层
position可以定义为absolute,relative,static属性,absolute属性表示为层的位置以网页左上角为基准来设置,relation表示以其原始位置来设置,static表示层的位置以HTML默认的位置来设置。事实上只要通过left和top就可以控制层在页面中的位置了,而width和height来设置层的大小。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>层的定位</title>
        <style type="text/css">
            div{
                position: absolute;
                width: 300px;
                height: 300px;
                left: 5em;
                top: 5em;
            }
        </style>
    </head>
    <body>
        <div>
            1958年,邵逸夫与邵仁枚成立“邵氏电影公司”,在香港制作电影,邵逸夫任总裁。1961年,
            位于九龙清水湾的邵氏影城于12月6日正式启用。1970年代,邵氏兄弟踏足当时发展迅速的电视行业,
            与无线电视合作,培训艺员。90年代末期,本身已拥有嘉禾、金公主和德宝三间电影公司影片永久版权的
            卫星电视(STAR TV,即如今的“星空传媒集团”)曾多次出价洽购760部邵氏电影的永久版权,
            以壮大其中文片库的实力,但邵氏拒绝,最后,邵氏于2000年宣布将该批电影的永久版权以4亿港元的价钱
            售予由马来西亚收费电视台ASTRO旗下的“天映娱乐”,该公司并花费2亿港元作数位复修。
        </div>
    </body>
</html>


效果如下图所示:

层的叠加
层不同于表格,框架的最大优势就是可以叠加,因为层具有一个z轴的特点,Z轴好比3D坐标中的Z轴,是一个上下层级的关系,就是说一个层可以覆盖在另一个层的上面,它的规律是这样,根据层依次出现的顺序,以此来判断层的上下级关系。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>层的叠加</title>
        <style type="text/css">
            div{
                width: 300px;
                height: 300px;
            }
            #div1{
                position: absolute;
                background-color: green;
                left: 2em;
                top: 2em;
            }
            #div2{
                position: absolute;
                background-color: blue;
                left: 4em;
                top: 4em;
            }
            #div3{
                position: absolute;
                background-color: red;
                left: 6em;
                top: 6em;
            }
        </style>
    </head>
    <body>
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
    </body>
</html>


效果如下图所示:

框模型
层的内部便是一个框模型,这个概念很重要,在CSS广泛应用之前,建立一个出色的页面布局只能通过框架集,表格,大量内嵌表格框架,或者一堆p标签,而当使用层的框模型思路布局时,设计者们就找到了最好的选择,有时完全可以替代框架,表格等,这种方法不仅可以为页面代码精简,而且大大缩短了页面的刷新时间。更利于代码管理
理解框模型
层中内容的外面被很多空间级的物质包围,如空距padding,边框borders和边距margin。页面中任意一个层中内容的周围理论上是被这样包围的。页面内容为层中内容,如果设计者愿意,可以用任意东西去取代页面内容,一段文本,或者一幅图像,一个表格,设置是框架集,当然也可以是一个层。
空距padding属性
padding属性又被成为内边距,padding可被细分为padding-top,padding-left,padding-right,padding-bottom,他们可以控制一个框模型中的每一边距。
当padding:1em只定义1一个值时,表示所有框模型空距为1em
当padding:1em 2em:表示顶边距和底边距为1em,左右边距为2em.
当padding:1em 2em 3em :表示所有框模型上边距为1em,左右边距为2em,下边距为3em。
当padding:1em 2em 3em 4em :按照顺时针方向,上,右,下,左边距分别为1em ,2em ,3em ,4emm .
边框border的扩展属性
border是一种使用率很高的属性,表格,边框中都有它的身影,对于边框,不仅可以改变它的宽度,而且可以改变它的格式和颜色,所以,边框的属性具有多样式的扩展,其属性可以细分为border-width属性,border-style属性,border-color属性,属性说明
border-width:表示边框的宽度。
border-style:属性表示边框的样式,常用的有solid,dotted,dashed。
border-color:表示边框的颜色。

边距margin
margin又被称为外边距,就好像围绕在边框外的一层气场,padding属性值不能为负,而margin属性值可以为负,以此对内容进行叠加,如果两个或者两个以上的纵边挨在一起时,那么彼此相邻的边距会发生合并现象,最终彼此边距之间的距离为2个边距之中较大的,而非两个边距之和。

框模型的溢出
有时候,如果层中的内容太多,以至于超出层的范围,IE浏览器会自作主张的帮忙拉伸范围,但是会导致页面布局发生错乱,为了改变这种情况,令层的大小不会发生改变,可以使用overflow属性。在默认情况下,overflow属性的值为visible,意思是页面内容都是可见的。这是层大小失去控制的原因。
可以将overflow的属性设置为auto,则窗口会根据页面的内容的多少来确定是否出现滚动条,此外,还可以设置为hidden和scroll属性,前者会严格按照属性的大小设置框的大小,超出范围的内容将会被隐藏,后者页面无论如何都将显示滚动条。
层的display属性
层的表现是通过框这种结构,框可以是块级对象,也可以是行级对象,那么所谓display属性就是用来控制其中的内容是块级还是行级,所以,基本的定义为block,表现为块级,或者定义为line表现为行级。
CSSHack
目前世界上有很多种流行的浏览器,比如IE,火狐,谷歌,他们基于不同的内核,对于CSS解析也就不一样,这直接导致生成的页面效果不同,对于设计者来说,这是很头疼的一件事,怎样才能兼容各种浏览器呢,只能针对于不同的浏览器写不同的样式表,这种写法称之为CSSHack.
尽管有许多Hack针对不同的浏览器提供了解决方案,如在IE和火狐浏览器种布局不同的问题时,常用的一个是!important,由于它不被IE支持,而其他浏览器支持,使用这个特性可以解决很多问题,如有时在定义padding对象时在IE和火狐种有误差,则设计者先指定被非IE浏览器能识别的声明,再添加一个IE也能识别的声明,其中需要注意CSS的先后声明顺序。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css hack</title>
        <style type="text/css">
            .select{
                border: 20px solid navy !important;
                width: 230px !important;
                padding: 20px !important;
                border: 20px solid orange;
                width: 300px;
                padding: 20px;
                font: 1.5em;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="select">
            再火狐中的效果是蓝色,它的width设置为14em,而在IE7中设置的效果是橙色边框,它的width设置为20em
        </div>
    </body>
</html>


效果如下图所示:




 

Tags:HTML   HTML网页

很赞哦! ()

随机图文

文章评论

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

    用户名:

    验证码:

本站推荐

站点信息

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