1. 程式人生 > >使用HTML5和CSS3開發電子商務網站——第二章,課後作業

使用HTML5和CSS3開發電子商務網站——第二章,課後作業

1.製作百度知道頁面中的"品牌全知道"板塊。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>品牌全知道</title>
</head>
<body>
    <h2><img src="../案列2picture/pin1.jpg"> </h2>
<p>
    <h3>品牌全知道</h3>
</p>
<ul>
    <li><img src="../案列2picture/pin2.jpg"> 理膚泉敏感全知道</li>
    <li><img src="../案列2picture/pin3.jpg"> 薇姿健康肌膚全知道</li>
    <li><img src="../案列2picture/pin4.jpg"> 中興銀行全知道</li>
    <li><img src="../案列2picture/pin5.jpg"> Windows7全知道</li>
    <li><img src="../案列2picture/pin6.jpg"> 海信電視全知道</li>
    <li><img src="../案列2picture/pin7.jpg"> 多美滋全知道</li>
    <li><img src="../案列2picture/pin8.jpg"> 三星手機全知道</li>
</ul>
</body>
</html>

2.使用HTML5的結構元素佈局京東商城購物車頁面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京東商城-商品購買</title>
    <style>
      header{height: 200px; border: solid 1px;}
      section{height: 500px;border: solid 1px;}
      footer{height: 500px;border: solid 1px; }
    </style>
</head>
<body>
<header>
    <img src="../picture/jingd.jpg"width="1000"height="200">
</header>
 
<section>
    <img src="../picture/jing1.png"width="1000"height="500">
</section>
 
<footer>
    <img src="../picture/jing3.png"width="1000"height="500">
</footer>
</body>
</html>