html实现最基本的模块布局

Original 2019-01-17 15:42:11 243
abstract:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml&quo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>这是我的第一个html作品</title>

<style type="text/css">

.cp{padding: 5px;border: 1px solid #ccc;width: 1200px;margin: 0 auto;overflow: hidden;}

.cp h3{ text-align:center;font-size:28px;margin:0px;height: 35px;line-height: 35px;color: #6f6c6c;background-color: beige;padding: 5px;}

.cp ul{margin:0px;padding: 0px;}

.cp ul li{ width:290px;  float:left; margin: 8px 4px; border: 1px solid #ccc; list-style: none;}

.cp ul li img{ width:100%; height:100%; margin:0 auto;}

.cp ul li a{width:290px; height:30px;float: left; text-align:center; font-size:14px; color:#FFF; line-height:30px;background:#666;text-decoration:none; }

.cp ul li a:hover{background: #F60;}

</style>

</head>

<body>

<div class="cp">

<h3>模块标题</h3>

<ul>

<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547718225272&di=486b7365bcde8afd4391647356f18f93&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F78310a55b319ebc4cb0136c68926cffc1e171677.jpg"><a href="#">标题标题</a></li>

<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547718225272&di=486b7365bcde8afd4391647356f18f93&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F78310a55b319ebc4cb0136c68926cffc1e171677.jpg"><a href="#">标题标题</a></li>

<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547718225272&di=486b7365bcde8afd4391647356f18f93&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F78310a55b319ebc4cb0136c68926cffc1e171677.jpg"><a href="#">标题标题</a></li>

<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547718225272&di=486b7365bcde8afd4391647356f18f93&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F78310a55b319ebc4cb0136c68926cffc1e171677.jpg"><a href="#">标题标题</a></li>

<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547718225272&di=486b7365bcde8afd4391647356f18f93&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F78310a55b319ebc4cb0136c68926cffc1e171677.jpg"><a href="#">标题标题</a></li>

<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547718225272&di=486b7365bcde8afd4391647356f18f93&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F78310a55b319ebc4cb0136c68926cffc1e171677.jpg"><a href="#">标题标题</a></li>

<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547718225272&di=486b7365bcde8afd4391647356f18f93&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F78310a55b319ebc4cb0136c68926cffc1e171677.jpg"><a href="#">标题标题</a></li>

<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547718225272&di=486b7365bcde8afd4391647356f18f93&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F78310a55b319ebc4cb0136c68926cffc1e171677.jpg"><a href="#">标题标题</a></li>

</ul>

</div>

</body>

</html>



Correcting teacher:灭绝师太Correction time:2019-01-17 16:10:44
Teacher's summary:这种文档声明不想在看到啦,虽然现在效果实现没有问题但是到后面需要用到框架什么的时候会出问题的,下次作业请将页面设置为 HTML5 文档类型 哦

Release Notes

Popular Entries