我们来介绍css入门，我们从基础标签介绍起，现阶段我们看到的网站大部分是div和css可以实现，一些效果要借助于javascript。我们先总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>
