案例：
图片资源：
参考代码：如下
<!doctype html>
<html>
<head>
<style>
img{
margin:20px/*设置图片的四边为20像素*/
}
p{
font-size: 20px; /*所有p标签的文字大小设置为20px*/
line-height: 30px; /*行高为30像素*/
text-indent: 2em; /*设置首行缩进为两个字符的空格*/
}
em{
color: blue; /*斜体文字颜色改为黑色*/
}
strong{
color: red； /*加粗文字颜色改为红色*/
}
.number{
font-size: 30px /*给类名为number的标签设置字体大小*/
}
</style>
<meta charset="utf-8">
<title>美食专栏</title>
</head>
<body>
<img src="meishi.jpg"/>
<p>
<em>导语</em>
:臭豆腐是
<strong> 长沙 </strong >
有名的小吃，是一种独具风味的食品。“闻起来臭、吃起来香”是它的最大特点,不少外省人品尝后都赞不绝口。长沙的臭豆腐要数百年老店火宫殿炸得最好外焦微脆、内软味鲜,100多年来，进火宫殿的人没有不吃臭豆腐的。当年...
<em>[详情]</em>
</p>
<p>
<em>火宫殿臭豆腐</em>
:价格
<strong class="number"> 18 </strong >
元
</p>
</body>
</html>
更多推荐
HTML5网页设计基础——美食专题栏目
发布评论