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

1,制作百度知道页面中的“品牌全知道”板块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>车展全知道</title>
</head>
<body>
<img src="MyJpg/iknowshouye.jpg">
<h3>品牌全知道</h3>
<table>
    <ul>
        <li><img src="MyJpg/icon-1.jpg">理肤泉敏感全知道</li>
        <li><img src="MyJpg/icon-2.jpg">薇姿健康肌肤全知道</li>
        <li><img src="MyJpg/icon-3.jpg">中信银行全知道</li>
        <li><img src="MyJpg/icon-4.jpg">Windows全知道</li>
        <li><img src="MyJpg/icon-5.jpg">海信电视全知道</li>
        <li><img src="MyJpg/icon-6.jpg">多美滋全知道</li>
        <li><img src="MyJpg/icon-7.jpg">三星手机全知道</li>
    </ul>
</table>

</body>
</html>

2,使用HTML5的结构元素布局网上商城购物页面(写出框架即可)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天猫商城</title>
    <style>
        header{ height:150px ;border: 1px solid red}
        section{height: 400px;border: 1px solid yellow}
        footer{height: 150px;border: 1px solid blue}
    </style>
</head>
<body>
<header><img src="MyJpg/a.jpg"width="1600"height="150"></header>
<section><img src="MyJpg/b.jpg"width="1600"height="400"></section>
<footer><img src="MyJpg/c.jpg"width="1600"height="400"></footer>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/jiangmye/article/details/80665112
今日推荐