返回顶部下载帮助
网站模板
模板颜色分类:
当前位置: html教程 >

css图片排版

2020-04-17 文章标签: css 排版 浏览次数:

我们来介绍css入门,我们从基础标签介绍起,现阶段我们看到的网站大部分是div和css可以实现,一些效果要借助于javascript。我们先总css说起,包含知识点css设置图片边框,css设置图片大小,css设置图片对齐方式,css设置半透明图片,css设置圆角图片,css设置阴影图片,css设置设计镶边效果,css设置设计水印效果

css教程

1.css设置图片边框

demo1

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上机练习</title>
<style type="text/css">
img {
    margin:12px;
    height:200px;
}
.pic1 {
    border-style: dotted;
    border-color: #000066;
    border-width: 2px;
}
.pic2 {
    border-style: dashed;
    border-color: #FF0000;
    border-width: 10px;
}
</style>
</head>
<body>
<img src="//freemuban.com/img/202004171.jpg" class="pic1" />
<img src="//freemuban.com/img/202004172.jpg" class="pic2" />
</body>
</html>

demo2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上机练习</title>
<style type="text/css">
img {
    text-align:center;
    height: 300px;
    border-left-style: solid;
    border-left-color: #33CC33;
    border-left-width: 20px;
    border-right-style: solid;
    border-right-color: #33CC33;
    border-right-width: 20px;
    border-top-style: solid;
    border-top-color: #3300FF;
    border-top-width: 30px;
    border-bottom-style: solid;
    border-bottom-color: #666;
    border-bottom-width: 30px;
}
</style>
</head>
<body>
<img src="//freemuban.com/img/202004171.jpg" />
</body>
</html>

demo3

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上机练习</title>
<style type="text/css">
img {
    text-align:center;
    height: 300px;
    border-style: solid;
    border-color: #3300FF #33CC33 #666 #33CC33;
    border-width: 30px 20px;
}
</style>
</head>
<body>
<img src="//freemuban.com/img/202004171.jpg" />
</body>
</html>

demo4

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上机练习</title>
<style type="text/css">
img {
    text-align:center;
    height: 300px;
    border: solid  #3300FF 30px;
}
</style>
</head>
<body>
<img src="//freemuban.com/img/202004171.jpg" />
</body>
</html>

2.css设置图片大小

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上机练习</title>
<style type="text/css">
body{
    margin:0;
    padding:0;
}
img{
    width:50%;          /* 相对宽度 */
}
</style>
</head>
<body>
<img src="//freemuban.com/img/demo1.jpg"  /><img src="//freemuban.com/img/demo2.jpg" />
</body>
</html>

3.css设置图片对齐

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上机练习</title>
<style type="text/css">
body {
    margin: 0;
    padding: 0;
}
img { height: 100px; }
.left { text-align: left; }
.right { text-align: right; }
.center { text-align: center; }
</style>
</head>
<body>
<p class="left"><img src="//freemuban.com/img/left.png" /></p>
<p class="center"><img src="//freemuban.com/img/center.png" /></p>
<p class="right"><img src="//freemuban.com/img/right.png" /></p>
</body>
</html>

demo2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上机练习</title>
<style type="text/css">
body {font-size:48px;}
p span {padding: 0 12px; }
.baseline {vertical-align:baseline;}
.sub {vertical-align:sub;}
.super {vertical-align:super;}
.top {vertical-align:top;}
.text-top {vertical-align:text-top;}
.middle {vertical-align:middle;}
.bottom {vertical-align:bottom;}
div{
    position: absolute;
    left: 135px;
    top: 110px;
}
div span {
    padding:0 12px;
    font-size: 14px;
}
.span1 {
     padding-left:2px;   
}
.span2 {
     padding-left:0px;
     margin-left:-6px;   
}
</style>
</head>
<body>
<p>valign:
<span class="baseline"><img src="//freemuban.com/img/box.gif" title="baseline" /></span>
<span class="sub"><img src="//freemuban.com/img/box.gif" title="sub" /></span>
<span class="super"><img src="//freemuban.com/img/box.gif" title="super" /></span>
<span class="top"><img src="//freemuban.com/img/box.gif" title="top" /></span>
<span class="text-top"><img src="//freemuban.com/img/box.gif" title="text-top" /></span>
<span class="middle"><img src="//freemuban.com/img/box.gif" title="middle" /></span>
<span class="bottom"><img src="//freemuban.com/img/box.gif" title="bottom" /></span>
<span class="text-bottom"><img src="//freemuban.com/img/box.gif" title="text-bottom" /></span>
</p>
<div>
    <span>baseline</span>
    <span>sub</span>
    <span>super</span>
    <span>top</span>
    <span class="span1">text-top</span>
    <span class="span2">middle</span>
    <span class="span2">bottom</span>
    <span class="span2">text-bottom</span>
</div>
</body>
</html>

demo3

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上机练习</title>
<style type="text/css">
p { font-size: 20px; }
</style>
</head>
<body>
<p>纵向对齐<img src="//freemuban.com/img/box.gif" style="vertical-align:5px;">方式: 5px</p>
<p>纵向对齐<img src="//freemuban.com/img/box.gif" style="vertical-align:-20px;">方式: -20px</p>
<p>纵向对齐<img src="//freemuban.com/img/box.gif" style="vertical-align:15px;">方式: 15px</p>
</body>
</html>

4.css设置半透明图片

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
img { width:300px;}
.opacity {/* 透明度样式类 */
    opacity: 0.3; /* 兼容标准浏览器 */
    filter:alpha(opacity=30); /* 兼容IE浏览器 */
    -moz-opacity:0.3; /* 兼容FF浏览器 */
}
</style>
</head>
<body>
<img src="//freemuban.com/img/demo1.jpg" title="图像不透明度" /> 
<img class="opacity" src="//freemuban.com/img/demo2.jpg" title="图像透明度为0.3" />
</body>
</html>

5.css设置圆角图片

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
img { width:200px;border:solid 1px blue;}
.r1{border-radius:10px;}
.r2{border-radius:10px 20px;}
.r3{border-radius:10px 20px 30px;}
.r4{border-radius:10px 20px 30px 40px;}
.r11{border-radius:10px/5px;}
.r22{border-radius:10px 20px/5px 10px;}
.r33{border-radius:10px 20px 30px/5px 10px 15px;}
.r44{border-radius:10px 20px 30px 40px/5px 10px 15px 20px;}
</style>
</head>
<body>
<img class="r1" src="//freemuban.com/img/demo1.jpg" title="圆角图像" /> 
<img class="r2" src="//freemuban.com/img/demo1.jpg" title="椭圆图像" />
<img class="r3" src="//freemuban.com/img/demo1.jpg" title="圆形图像" />
</body>
</html>

demo2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
img { width:300px;border:solid 1px #eee;}
.r1 {
    -moz-border-radius:12px; /*兼容Gecko引擎*/
    -webkit-border-radius:12px; /*兼容Webkit引擎*/
    border-radius:12px; /*标准用法*/
}
.r2 {
    -moz-border-radius:50%; /*兼容Gecko引擎*/
    -webkit-border-radius:50%; /*兼容Webkit引擎*/
    border-radius:50%; /*标准用法*/
}
</style>
</head>
<body>
<img class="r1" src="//freemuban.com/img/demo1.jpg" title="圆角图像" /> 
<img class="r2" src="//freemuban.com/img/demo2.jpg" title="椭圆图像" />
</body>
</html>

6.css设置阴影图片

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
img { width:300px; margin:6px;}
.r1 {
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
    -moz-box-shadow:8px 8px 14px #06C; /*兼容Gecko引擎*/
    -webkit-box-shadow:8px 8px 14px #06C;/*兼容Webkit引擎*/
    box-shadow:8px 8px 14px #06C;/*标准用法*/
}
</style>
</head>
<body>
<img src="//freemuban.com/img/demo1.jpg" title="无阴影图像" /> 
<img class="r1" src="//freemuban.com/img/demo2.jpg" title="阴影图像" />
</body>
</html>

demo2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
img { width:300px; margin:6px;}
.r1 {
    -moz-border-radius:12px;
    -webkit-border-radius:12px;
    border-radius:12px;
    -moz-box-shadow:-10px 0 12px red, 
      10px 0 12px blue,
      0 -10px 12px yellow,
      0 10px 12px green;
    -webkit-box-shadow:-10px 0 12px red, 
      10px 0 12px blue,
      0 -10px 12px yellow,
      0 10px 12px green;
    box-shadow:-10px 0 12px red, 
      10px 0 12px blue,
      0 -10px 12px yellow,
      0 10px 12px green; 
}
</style>
</head>
<body>
<img src="//freemuban.com/img/demo1.jpg" title="无阴影图像" /> 
<img class="r1" src="//freemuban.com/img/demo2.jpg" title="阴影图像" />
</body>
</html>

7.css设计镶边效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<STYLE type="text/css">
body { background: #F0EADA; }
img {
    background: white;
    padding: 5px 5px 9px 5px;
    background: white url(//freemuban.com/img/shad_bottom.gif) repeat-x bottom left;
    border-left: 2px solid #dcd7c8;
    border-right: 2px solid #dcd7c8;
}
</STYLE>
</head>
<body>
<img src="//freemuban.com/img/demo2.jpg"  width="300">
<img src="//freemuban.com/img/demo2.jpg"  width="400">
</body>
</html>

8.css设计水印效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<STYLE type="text/css" media="all">
body { background: #F0EADA; }
.watermark {
    position: relative;
    float: left;
    display: inline;
}
.img {
    background: white;
    padding: 5px 5px 9px 5px;
    background: white url(//freemuban.com/img/shad_bottom.gif) repeat-x bottom left;
    border-left: 2px solid #dcd7c8;
    border-right: 2px solid #dcd7c8;
}
.logo {
    filter: alpha(opacity=40);       /* IE */
    -moz-opacity: 0.4;               /* Moz + FF */
    opacity: 0.4;                   /* 支持CSS3的浏览器(FF 1.5也支持)*/
    position: absolute;
    right: 20px;
    bottom: 20px;
}
</STYLE>
</head>
<body>
<div class="watermark"><img src="//freemuban.com/img/20200417bg.jpg" class="img" width="400"> <img src="//freemuban.com/img/baidulogo.png" class="logo" width="100"> 
</div>
</body>
</html>


建站咨询 - 联系我们 - 广告服务 - 友情链接 - 版权声明 - 手机版

免责声明:站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!版权归原创者所有,如果侵犯了您的权益,请通知我们,我们会及时删除侵权内容。