上节回顾
上一节学习的内容,有一下几点,可以注意一下。或者说推荐这么做。
class可以设置多个值-css样式重用
可以给一个标签设置多个class值,这样我们可以为每个class应用一种样式。标签有多个class的话,就为这个标签应用了多个样式。并且之后别的标签要求重用其中的部分样式,只需要设置那个class就好了。
要设置多个class的值,只需要用空格隔开每个值即可。下面的例子分别设置了背景色、高度、宽度、外框,然后div的设置了多个class:
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: red;
}
.c2{
height: 50px;
}
.c3{
width: 200px;
}
.c4{
border: 3px solid black;
}
</style>
</head>
<body>
<div class="c1 c2 c3 c4"></div>
<div class="c1 c2 c4"></div>
</body>
div做页面布局的建议
把整个网页先从上到下分成若干块,每一块都按下面的思路。
先写第一层div,可以设置背景色,如果有需要设置高度(height)和垂直居中(line-height),设了高度就是固定的高度,我们要确保内部的元素不会超出。不设高度,这个div的高度就靠内部的元素撑起来。
不要设置宽度。让它可以撑满一整块。
再写第二层div,这个设置一个像素的宽度。这样你整块的内容都限制在这个区域内。如果页面宽度太小,页面下方会出现滚动条,而不会导致这里面的内容会混乱。
第三层开始可以写你的内容,可以继续用div也可以用别的标签,宽度可以使用百分比了。继续用像素也ok,不过如果第二次的宽度要调整,并且里面宽度用的是百分比的话,貌似就是自动调整好了。如果用了float,最后不要忘记clear。
<body>
<div class="lv1" style="background-color: #dddddd;height: 48px;line-height: 48px;">
<div class="lv2" style="width: 800px;">
<div style="width: 30%;float: left;">左边的内容</div>
<div style="width: 70%;float: left;">中间的内容</div>
<div style="clear: both;"></div>
</div>
</div>
</body>
img标签的建议
在a标签里的img标签(图片),可能在IE上打开的时候,在最外面有一圈蓝色的边框。虽然我在自己的IE11上试了,并没有,可能旧版本还有这个问题。这个边框的颜色应该就是超链接字体的颜色,我们所要做的就是把img外面这个边框去掉。做法也很简单,写一个img的标签选择器,设置border为0就没有边框了。我们可以总是在head里加上这么一个标签选择器来避免这个问题,而不用担心对没有类似问题的客户端会有什么影响:
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img{
border: 0;
}
</style>
</head>
<body>
<a href="http://www.51cto.com/">
<img src="logo.jpg" />
</a>
</body>
css补充
上一节的css内容并没有讲完,这节继续讲后续的内容。
定位-position
position 属性定义建立元素布局所用的定位机制。
fixed-固定在窗口的某个位置
position: fixed;
:固定在窗口的某个位置。结合top、right、botom、left,确定固定的位置。
在页面右下角放置一个返回顶部的按钮,用position定位:
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.gotop{
width: 45px;
height: 45px;
background-color: black;
color: yellow;
position: fixed;
right: 15px;
bottom: 60px;
}
</style>
</head>
<body>
<div style="height: 2000px;background-color: #dddddd"></div>
<div class="gotop">返回顶部</div>
</body>
这里并不能实现返回顶部的效果,我们还需要后面才会学的JavaScript才能实现点击之后返回页面顶部。
再来实现一个始终显示在页面顶部的菜单:
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.bar{
height: 48px;
line-height: 48px;
background-color: red;
position: fixed;
top: 0;
left: 0;
right: 0;
}
</style>
</head>
<body style="margin: 0 auto">
<div class="bar">菜单</div>
<div class="bar" style="top: 50px;left: unset;right: unset;">菜单2</div>
<div style="height: 2000px;background-color: #dddddd;margin-top: 100px">主要内容</div>
</body>
和之前学的float一样,这里使用position样式之后,div也不再撑满一整行了。我们通过设置left和right属性,让他往两边都撑满了。下面的菜单2是没有设置left和right的效果。
另外,因为使用position,会有一个分层的效果。下面的div标签的内容也是从页面顶部开始显示的。为了不让菜单盖住主要内容,我们给下面的div设置了外边距(margin-top)。分开了两部分的内容。
absolute-绝对定位
这个和fixed都是决定定位。所以主要来看看和fixed的差别。把上面的返回顶部的例子里的position属性修改为absolute,看看效果。乍一看,貌似一样,但是如果滚动滚轮,就是发现,他会一起移动。也就是absolute绝对定位了之后,就会固定在父级元素之上。
把上面菜单的例子也改成absolute,菜单依然在页面顶上,但是往下流量页面 后,菜单就会向上滚出屏幕了。
ablolute单独的应用场景不多,主要是结合下面要将讲的相对定位一起使用。把一个元素绝对定位到另一个相对定位的元素上。
relative-相对定位
上面测试absolute的时候提到,他是绝对定位到它的父级元素上的。上面的例子中实际是决定定位在了整个页面上。如果要将它定位在另外一个元素里,简单的在外层加上一个元素标签是没用的。还需要在元素上加上 position: relative;
这个属性,才会被识别为 absolute 的父级标签。
<body>
<div style="height: 50px;width: 100px;border: 1px solid black;position: relative;">
<div style="background-color: red;position: absolute;bottom: 0;left: 0;right: 0;">相对定位</div>
</div>
</body>
设置偏移量:这里也有top、right、bottom、left属性。这里设置的偏移量。如果设置偏移属性,就是相对于其正常位置所进行的偏移。
定位在屏幕中间
用了position属性之后,通过 margin: 0 auto
无法实现居中了。那么现在居中要怎么做呢。
偏移量的属性不但可以使用像素(px),也是可以使用百分比的。设置为50%自然就居中了。但是这里定位是元素的起始位置,即左上角而不是中心。所以还得计算元素高度和宽度的一半,用外边距把元素撑回去:
<body>
<div style="background-color: red;height: 80px;width: 80px;
position: fixed;top: 50%;left: 50%;
margin-top: -40px;margin-left: -40px;">正中间</div>
</body>
分层(z-index)
元素应用了position属性之后,就会出现分层的情况。position元素会始终位于其他标准元素的上层。如下的例子,无论div的先后顺序如何,都是position元素在上层:
<body>
<div style="position: fixed;top: 20px;left: 20px;background-color: red;height: 70px;width: 70px;"></div>
<div style="height: 100px;width: 100px;background-color: blue;"></div>
</body>
如此,我们就把页面分成了2层。那么有2层,就能有3层甚至多层。
z-index 属性,设置元素的堆叠顺序。仅能在定位元素上奏效(例如 position:absolute;)。数值越大,处于外层,可以是负数。不设置的话应该是0
<body>
<div style="z-index: 10;position: fixed;top: 30px;left: 30px;background-color: yellow;height: 50px;width: 50px;"></div>
<div style="z-index: 5;position: fixed;top: 20px;left: 20px;background-color: red;height: 70px;width: 70px;"></div>
<div style="height: 100px;width: 100px;background-color: blue;"></div>
</body>
例子中,如果不设置z-index,或者值设置的一样,那么层级的关系就是不确定的。调整标签的顺序,效果会不一样(后面的标签会盖住前面的)。设置了z-index后,我们就能确定定位元素的层级关系。
透明度-opacity
上面已经学了网页的层级,下层的页面会被上层的页面覆盖掉。这里我们可以设置标签的opacity属性,使得上层页面不是完全覆盖下面的内容,而是有一点的透明度。
opacity 属性,透明度。取值范围从 0.0 (完全透明)到 1.0(完全不透明)。
<body>
<div style="font-size: 48px">网页的内容</div>
<div style="opacity: 0.8;background-color: #dddddd;position: fixed;top: 0;left: 0;bottom: 0;right: 0"></div>
</body>
小结-综合应用
我们可以设计一个这样的页面。平时显示正常的内容(这是第一层)。当我们点击了一个按钮需要提交数据的时候,这时候需要屏蔽掉用户对之前的页面内容的操作。这时候出现一个第二层,半透明的覆盖层,就如透明度里的例子那样。然后再在页面的中间弹出一个表单(第三层),让用户提交数据。这三层的代码大概是这样的:
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.lv1{
background-color: aquamarine;
font-size: 64px;
}
.lv2{
background-color: #dddddd;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 2;
opacity: 0.8;
}
.lv3{
height: 50px;
width: 100px;
position: fixed;
top: 30px;
left: 50%;
z-index: 3;
margin-left: -50px;
}
.disappear{
display: none;
}
</style>
</head>
<body>
<div class="lv1">网页的内容</div>
<div class="lv2 disappear">
<!--覆盖掉网页的内容的半透明层-->
</div>
<div class="lv3 disappear">
<form action="https://www.baidu.com/s">
<input type="text" name="wd" title="搜索内容" />
<input type="submit" value="搜索" />
</form>
</div>
</body>
直接打开页面,应该只显示了第一层的内容,另外两层暂时设置了 display :none;
隐藏了。这里JS还没学,网页的内容里可以加上一个按钮,触发一个JS,修改一下.disappear里的display属性,改成unset(就是没有设置)。这里我们只能暂时先手动改一下看一下效果了。修改后,第二层和第三层的内容就都显示出来了。先覆盖掉页面的内容,此时用户无法在选择第一层的内容了。然后中间是弹出的交互界面,用户可以输入内容提交表单,或者是以后会学的其他交互内容。
溢出处理-overflow
先来看一下显示图片的例子。找一张大一点的图片,然后放在一个div里。div设置小一点的高度和宽度。效果如下:
<body>
<div style="height: 100px;width: 80px;">
<img src="1.jpg" />
</div>
<div style="background-color: red;">看看这个内容在哪里</div>
</body>
这里虽然div设置了范围,但是div中的图片会按照正常尺寸显示出来,并没有受到上一层div标签尺寸的限制,即溢出了。后面还加了一个div,可以看到是接在前一个div的范围后显示的。
要处理这个问题,我们可以为图片也设置一个尺寸,比如:style="height: 100%"
。这样可以显示出整张完整的图片,但是会自适应一个尺寸。
这里要讲的是通过在div里设置overflow属性,来处理溢出内容的处理规则(图片尺寸不变)。overflow: hidden;
:内容会被修剪,并且其余内容是不可见的。overflow: auto;
:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。overflow: scroll;
:同上,和auto一样。
这里拿图片举例,但是实际应用中,各种可能会有溢出的情况都可以这么处理。一般图片的处理更多的应该是设置一个img的尺寸,做一下缩放。而在一个有限大小的区域内要显示很多的文字,更加适合用overflow:
<body>
<div style="background-color: #dddddd;height: 100px;width: 150px;overflow: auto;">
这个属性定义溢出元素内容区的内容会如何处理。
如果值为 scroll 或 auto,则会提供一种滚动机制。
如果值为 hidden,则溢出的部分会被修剪并隐藏。
默认值是 visible。
</div>
:hover 伪类
当鼠标移动到元素上时,才会生效的css属性。下面是一个菜单的例子,应用了hover实现了当鼠标放上去的时候,指向的那项会改变样式:
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
position: fixed;
top: 0;
left: 0;
right: 0;
height: 48px;
line-height: 48px;
background-color: blue;
}
.pg-body{
margin-top: 48px;
}
.w{
width: 980px;
margin: 0 auto;
}
.pg-header .menu{
color: white;
/*默认行内标签不能设置高度,*/
/*这里设置了display: inline-block;,*/
/*这样标签就能有高度了*/
/*这样a标签就撑满了整个区域。*/
/*这里也没设置具体的高度,貌似默认就撑满了。*/
display: inline-block;
padding: 0 10px;
}
.pg-header .menu:hover{
background-color: green;
color: red;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="w">
<a class="menu">文件</a>
<a class="menu">编辑</a>
<a class="menu">查看</a>
<a class="menu">收藏</a>
</div>
</div>
<div class="pg-body">
<div class="w">主要的内容</div>
</div>
</body>
另外这里a标签样式的设置也值得参考。这里设置了 display: inline-block;
,使得a标签的高度可以撑满整个div的高度。如果注释掉display,a标签的高度就只有文字的那点高度(可以通过鼠标悬停看到效果)。横向的宽度这里推荐是用内边距(padding)撑开的。
背景图片-background
之前都是用background设置背景色,我们也可以用图片当背景。代码如下:
<body>
<div style="background-image: url(‘1.jpg‘);height: 800px;width: 600px"></div>
</body>
这里的效果会重复使用这张图片平铺在整个区域中。图片的比例不变,多出的部分会裁剪掉。
网页渐变色背景
利用平铺的特性,可以实现渐变色背景的效果。做一个宽1像素,长1000像素的渐变图片,在这张图片里搞好渐变,然后作为背景图片。被平铺之后,就是一个渐变色背景了。这个方法应该是通用的。
限制平铺的方向
在上面的基础上,再增加一个background-repeat属性可以显示图片进行平铺。
<body>
<div style="background-image: url(‘1.jpg‘);height: 800px;width: 600px;background-repeat: no-repeat"></div>
</body>
background-repeat: no-repeat
:不允许平铺background-repeat: repeat-x
:只能横向平铺background-repeat: repeat-y
:只能纵向平铺
定位背景图(抠图)
有这么一张图:
好吧,是很多个小图标拼成的一张图,现在要显示其中的一个图标。我们可以这么做:
<body>
<div style="background-image: url(‘2.png‘);
background-repeat: no-repeat;
border: 1px solid black;
height: 20px;
width: 20px;"></div>
</body>
这样显示第一个图标没问题,如果要显示下面的图标,我们需要把图片往上移,这就用到了background-position属性,给背景图做一个定位:
<body>
<div style="background-image: url(‘2.png‘);
background-repeat: no-repeat;
background-position: 1px -119px;
border: 1px solid black;
height: 20px;
width: 20px;"></div>
</body>
background-position-x 和 background-position-y 是单独调整x轴和y轴。
上面的background属性还可以简写成这样:background: url(2.png) 1px -119px no-repeat;
,图片路径、纵向位移、横向位移、是否平铺。
这样做的好处是,一次请求就获得了好几个图标,减少了客户端和服务端的交互次数。如果每一个小图标都保存一张独立的图片,那么每次要获取到一个新图标可能还会发起一次请求。所以对于这种小图标可以拼接在一张图中使用。
小结-课堂练习
做一个右边有图标的input框,类似这样的:
运用上面讲的定位和背景图片的方法,把图标定位到方框的右边。
这里要注意,input的文字的输入范围右边要小于整个边框的范围,否则最右边的内容会被图标挡住。
<body>
<div style="height: 24px;width: 150px;position: relative;">
<input type="text" style="height: 24px;width: 125px;padding-right: 25px;" />
<span style="background: url(2.png) 1px -119px no-repeat;
display: inline-block;
height: 20px;width: 20px;
position: absolute;top: 5px;right: 0;"></span>
</div>
</body>
原文地址:http://blog.51cto.com/steed/2071774