列表，表格与媒体元素第二章

第一题：制作百度知道页面中的“品牌全知道”板块。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>品牌全知道</title>
</head>
<body>
<img src="../picture/iknowshouye.jpg" alt="车展" title="车展" width="200" height="50"/>
<h3>品牌全知道</h3>
<ul>
    <li><img src="../picture/icon-1.jpg" alt="理肤泉敏感" title="理肤泉敏感" width="25" height="20"/>理肤泉敏感全知道</li>

    <li><img src="../picture/icon-2.jpg" alt="薇姿健康肌肤" title="薇姿健康肌肤" width="25" height="20"/>薇姿健康肌肤全知道</li>

    <li><img src="../picture/icon-3.jpg" alt="中信银行" title="中信银行" width="25" height="20"/>中信银行全知道</li>

    <li><img src="../picture/icon-4.gif" alt="Windows7" title="Windows7" width="25" height="20"/>Windows7全知道</li>

    <li><img src="../picture/icon-5.jpg" alt="海信电视" title="海信电视" width="25" height="20"/>海信电视全知道</li>

    <li><img src="../picture/icon-6.jpg" alt="多美滋" title="多美滋" width="25" height="20"/>多美滋全知道</li>

    <li><img src="../picture/icon-7.jpg" alt="三星手机" title="三星手机" width="25" height="20"/>三星手机全知道</li>
</ul>

</body>
</html>

第二题：使用HTML5的结构元素布局贵美商城购物车页面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        header,section,footer{
            height: 300px;
            border: 1px solid crimson;
        }
    </style>
</head>
<body>
<header>
    <h2>网页头部</h2>
</header>
<section>
    <h2>网页主体部分</h2>
</section>
<footer>
    <h2>网页底部</h2>
</footer>
</body>
</html>

列表，表格与媒体元素 第二章

猜你喜欢

列表，表格与媒体元素第二章