建立index.html:
<html lang="zh-CN">
<head>
<title>水果店</title>
<style type="text/css">
body{
border:2px dotted black;
margin:2% 20%;
background-color:#d2b48c;
height:500px;
}
</style>
</head>
<body>
</body>
</html>
插入必要元素：
<body>
<h1>水果店</h1>
<img alt="香蕉" width="180px" src="img1.jpg"></img>
<h2>香蕉2元</h2>
<p>味道鲜美，口味甘甜。</p>
<img alt="葡萄" width="180px" src=" img2.jpg"></img>
<h2>葡萄7元 </h2>
<p>晶莹剔透，清甜可口</p>
</body>
效果图：
将body元素字体改为微软雅黑
body{
border:2px dotted black;
margin:2% 20%;
background-colar:#d2b48c;
height:auto;
font-family:microsoft yahei;
}
将所有元素居中：
body{
border:2px dotted black;
margin:2% 20%;
background-colar:#d2b48c;
height:auto;
font-family:microsoft yahei;
text-align:center;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
