您的位置：首页 > Web前端 > CSS

CSS学习笔记（四）--CSS高级

2017-03-11 23:24 369 查看

CSS 水平对齐

1.对齐块元素:使用 margin 属性来水平对齐

.center{
margin:auto;
width:70%;//占据中间比例。
}


使用 float 属性来进行左和右对齐

CSS 尺寸

图像可以通过设置像素改变尺寸：height：10px。也可以改变百分比

其他元素也一样。



CSS 分类



CSS 图片库

<!doctype html>
<html>
<head>
<style>
div.img
{
margin:3px;
border:1px solid #bebebe;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:3px;
border:1px solid #bebebe;
}
div.img a:hover img
{
border:1px solid #333333;
}
div.desc
{
text-align:center;
font-weight:normal;
width:150px;
font-size:12px;
margin:10px 5px 10px 5px;
}
</style>
</head>
<body>

<div class="img">
<a target="_blank" href="/i/tulip_ballade.jpg">
<img src="/i/tulip_ballade_s.jpg" alt="Ballade" width="160" height="160">
</a>
<div class="desc">在此处添加对图像的描述</div>
</div>

<div class="img">
<a target="_blank" href="/i/tulip_flaming_club.jpg">
<img src="/i/tulip_flaming_club_s.jpg" alt="Ballade" width="160" height="160">
</a>
<div class="desc">在此处添加对图像的描述</div>
</div>

<div class="img">
<a target="_blank" href="/i/tulip_fringed_family.jpg">
<img src="/i/tulip_fringed_family_s.jpg" alt="Ballade" width="160" height="160">
</a>
<div class="desc">在此处添加对图像的描述</div>
</div>

<div class="img">
<a target="_blank" href="/i/tulip_peach_blossom.jpg">
<img src="/i/tulip_peach_blossom_s.jpg" alt="Ballade" width="160" height="160">
</a>
<div class="desc">在此处添加对图像的描述</div>
</div>

</body>
</html>


透明背景图片

<!DOCTYPE html>
<html>
<head>
<style>
div.background
{
width: 400px;
height: 266px;
margin:15px;
background: url('/i/tulip_peach_blossom_w.jpg') no-repeat;
border: 1px solid black;
}

div.transbox
{
width: 338px;
height: 204px;
margin:30px;
padding:0;
background-color: #ffffff;
border: 1px solid black;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}

div.transbox p
{
margin: 30px 40px;
color: #000000;
font:bold 12px Verdana, Geneva, sans-serif;
line-height:1.5;
}
</style>
</head>

<body>

<div class="background">
<div class="transbox">
<p>
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>

</body>
</html>


IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。

IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小，越透明。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航