【聊代码】第三十五集 css样式（之五）

聊代码（第三十九集）css样式（之五）

上两集说的都是关于文字的代码，本集展示的是关于图片的代码。请看下面效果。

    

上图代码实例：

＜style type="text/css"＞img.a { height: 100px }

img.b { height: 250px }

img.c { height: 180px }

img.汉 { border:red solid thin; outline:#00ff00 dotted thick;height: 250px }

img.字 { height: 250px }

＜/style＞

＜p＞＜img class="a" src="http://www.oldkids.cn/upload/2018/08/10/blog_

20180810203823429.gif" /＞

＜img class="b" src="http://www.oldkids.cn/upload/2018/08/10/blog_

20180810210253607.jpg" / ＞

＜img class="c" src="http://www.oldkids.cn/upload/2018/08/10/blog_

20180810203823429.gif" /＞＜/p＞ ＜p＞

＜/p＞

＜p＞＜img class="汉" src="http://www.oldkids.cn/upload/2018/08/10/blog_

20180810214831665.png" / ＞

＜img class="字" src="http://www.oldkids.cn/upload/2018/08/10/blog_

20180810213605171.jpg" /＞＜/p＞

代码解析：

①本代码中列出了以“a”“b”“c”“汉”“字”命名的五个选择器，。

②＜p＞

＜/p＞是空行代码，用它是为了产生行距，免得上下图片紧贴在一起。（该代码是不显示的，所以在此用了截图）

③在以“汉”字命名的选择器中，大括号里的声明除了图片高度以外，添加了边框线属性。

④改变高度值即可改变图片大小（宽高比例不变）。