HTML与CSS（图解2）：图片
图片样式：
边框
<html> <head> <title>边框</title> <style> <!-- img.test1{ border-style:dotted; /* 点画线 */ border-color:#FF9900; /* 边框颜色 */ border-width:5px; /* 边框粗细 */ } img.test2{ border-style:dashed; /* 虚线 */ border-color:blue; /* 边框颜色 */ border-width:2px; /* 边框粗细 */ } --> </style> </head> <body> <img src="banana.jpg" class="test1"> <img src="banana.jpg" class="test2"> </body> </html>
<html> <head> <title>边框</title> <style> <!-- img.test1{ border-style:dotted; /* 点画线 */ border-color:#FF9900; /* 边框颜色 */ border-width:5px; /* 边框粗细 */ } img.test2{ border-left:#000099 dotted 2px; border-right:#FF0000 dashed 5px; border-top:#CCFF00 double 10px; } --> </style> </head> <body> <img src="banana.jpg" class="test1"><img src="banana.jpg" class="test2"> </body> </html>
图片的缩放：
<html> <head> <title>图片缩放</title> <style> <!-- img.test1{ width:50%; /* 相对宽度（当浏览器的宽度改变时，图片的宽度也随着改变），相对于它的父元素的宽度的50%，即为body元素宽度的50%,即浏览器宽度的50% */
height:80px; /* 绝对高度，当浏览器的窗口改变时，图片的高度不变 */
} --> </style> </head> <body> <img src="pear.jpg" class="test1"> </body> </html>
竖直对齐方式：
<html> <head> <title>竖直对齐</title> <style type="text/css"> <!-- p{ font-size:15px; } img{ border: 1px solid #000055; } --> </style> </head> <body> <p>竖直对齐<img src="donkey.jpg" style="vertical-align:baseline;">方式:baseline<img src="miki.jpg" style="vertical-align:baseline;">方式</p> <p>竖直对齐<img src="donkey.jpg" style="vertical-align:bottom;">方式:bottom<img src="miki.jpg" style="vertical-align:bottom;">方式</p> <p>竖直对齐<img src="donkey.jpg" style="vertical-align:middle;">方式:middle<img src="miki.jpg" style="vertical-align:middle;">方式</p> <p>竖直对齐<img src="donkey.jpg" style="vertical-align:sub;">方式:sub<img src="miki.jpg" style="vertical-align:sub;">方式</p> <p>竖直对齐<img src="donkey.jpg" style="vertical-align:super;">方式:super<img src="miki.jpg" style="vertical-align:super;">方式</p> <p>竖直对齐<img src="donkey.jpg" style="vertical-align:text-bottom;">方式:text-bottom<img src="miki.jpg" style="vertical-align:text-bottom;">方式</p> <p>竖直对齐<img src="donkey.jpg" style="vertical-align:text-top;">方式:text-top<img src="miki.jpg" style="vertical-align:text-top;">方式</p> <p>竖直对齐<img src="donkey.jpg" style="vertical-align:top">方式:top<img src="miki.jpg" style="vertical-align:top">方式</p> </body> </html>
图文混排：
<html> <head> <title>图文混排</title> <style type="text/css"> <!-- body{ background-color:bb0102; /* 页面背景颜色 */ margin:0px; padding:0px; } img{ float:left; /* 文字环绕图片 */ /*margin-right:50px; /* 右侧距离 */ /*margin-bottom:25px; /* 下端距离 */ } p{ color:#FFFF00; /* 文字颜色 */ margin:0px; padding-top:10px; padding-left:5px; padding-right:5px; } span{ float:left; /* 首字放大 */ font-size:85px; font-family:黑体; margin:0px; padding-right:5px; } --> </style> </head> <body> <img src="chunjie.jpg" border="0"> <p><span>春</span>节古时叫“元旦”。“元”者始也，“旦”者晨也，“元旦”即一年的第一个早晨。《尔雅》，对“年”的注解是：“夏曰岁，商曰祀，周曰年。”自殷商起，把月圆缺一次为一月，初一为朔，十五为望。每年的开始从正月朔日子夜算起，叫“元旦”或“元日”。到了汉武帝时，由于“观象授时”的经验越来越丰富，司马迁创造了《太初历》，确定了正月为岁首，正月初一为新年。此后，农历年的习俗就一直流传下来。</p> <p>据《诗经》记载，每到农历新年，农民喝“春酒”，祝“改岁”，尽情欢乐，庆祝一年的丰收。到了晋朝，还增添了放爆竹的节目，即燃起堆堆烈火，将竹子放在火里烧，发出噼噼啪啪的爆竹声，使节日气氛更浓。到了清朝，放爆竹，张灯结彩，送旧迎新的活动更加热闹了。清代潘荣升《帝京岁时记胜》中记载：“除夕之次，夜子初交，门外宝炬争辉，玉珂竞响。……闻爆竹声如击浪轰雷，遍于朝野，彻夜无停。”</p> <p>在我国古代的不同历史时期，春节，有着不同的含义。在汉代，人们把二十四节气中的“立春”这一天定为春节。南北朝时，人们则将整个春季称为春节。1911年，辛亥革命推翻了清朝统治，为了“行夏历，所以顺农时，从西历，所以便统计”，各省都督府代表在南京召开会议，决定使用公历。这样就把农历正月初一定为春节。至今，人们仍沿用春节这一习惯称呼。</p> </body> </html>
