先整体布局，然后一块一块来做
如何灵活和合理的使用div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>小案例</title>
</head>
<body>
<!-- 头部内容 -->
<div>
<!-- logo -->
<div>
<img src="imglogo.gif" alt="logo">
</div>
<!-- 导航 -->
<div>
<ul>
<li><a href="">html5</a></li>
<li><a href="">JavaScript</a></li>
<li><a href="">CSS</a></li>
<li><a href="">PHP</a></li>
<li><a href="">IOS</a></li>
<li><a href="">Android</a></li>
<li><a href="">Photoshop</a></li>
<li><a href="">jQuery</a></li>
</ul>
</div>
<!-- banner图 -->
<div>
<img src="imgbanner.jpg" alt="banner">
</div>
</div>
<!-- 主体内容 -->
<div>
<!-- 文章 -->
<div>
<h1>how to become a fantasty web engineer</h1>
<h6>2 days ago 380 saw 1 comment</h6>
<p>fjsd;fadasdfsadfasdsadcc</p>
</div>
<!-- 链接 -->
<div>
<dl>
<dt>html</dt>
<dd><img src="html1.jpg" alt="1"></dd>
</dl>
<dl>
<dt>html</dt>
<dd><img src="html1.jpg" alt="1"></dd>
</dl>
<dl>
<dt>html</dt>
<dd><img src="html1.jpg" alt="1"></dd>
</dl>
</div>
</div>
<!-- 页脚内容 -->
<div>
just do IT!
</div>
</body>
</html>
一个简单的布局，但没有css+js显得很不美观，一步步来，慢慢的就变好看了的，下次一定！
记住以下几点：
1页面尺寸
2整体造型
3页头
4文本
5页脚
6图片
7多媒体
万变不离其宗，一个简单网页乃至网站展示的内容基本上都是由以上组成。让我们一起学习，互相成长。
最新评论