流式和弹性图像

最新推荐文章于 2021-06-04 08:29:19 发布

baiding1123

最新推荐文章于 2021-06-04 08:29:19 发布

阅读量1k

点赞数 1

分类专栏： CSS/CSS3 文章标签： CSS 弹性图像

本文链接：https://blog.csdn.net/baiding1123/article/details/8665923

版权

CSS/CSS3 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>流式和弹性图像</title>
<style type="text/css">
.news{
width:95%;
margin:0 auto;
text-align:center;
background-color:#CCC;
border:1px solid #93C;
overflow:hidden;/*important!!!*//*因为这些元素都是浮动的，不在文档流中占据任何空间，这回倒是页脚向上升。为了避免这种情况要对他们的父元素引用溢出的方法，从而清理浮动元素*/
/*修饰，圆角，阴影效果*/
display:block;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
color:#fff;
text-shadow:3px 5px 7px #66a300;
-moz-box-shadow:3px 5px 7px #ccc;
-webkit-box-shadow:3px 5px 7px #ccc;
box-shadow:3px 5px 7px #ccc;
-webkit-box-reflect:below 2px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(0.52,transparent),to(white));
}
.news img{
width:25%;
max-width:440px;
float:left;
margin-bottom:5px;/*图片底部阴影不出现的Bug*/
display:inline;/*improtant!*/
padding:2%;
/*给图片添加阴影*/
box-shadow:2px 3px 2px #666666;
}
.news p{
width:68%;
float:right;
display:inline;
padding:2% 2% 2% 0;
}
</style>
</head>

<body>

<div class="news">
<img src="images/132705.jpg" alt="弹性布局" />
<p>这是一个弹性布局，包括图片弹性布局的例子，随着news元素的扩张和收缩，图像和文本段落也会扩展和收缩，从而保持视觉上的平衡
</p>
</div>
</body>
</html>
根据浏览器的大小自适应：