Primero diseñe, luego hágalo pieza por pieza
Cómo usar div de manera flexible y razonable
<!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="img\logo.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="img\banner.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>
Un diseño simple, pero no es hermoso sin css + js. Paso a paso, irá mejorando gradualmente. ¡La próxima vez!
¡Nos vemos mañana y sube algunos pequeños materiales más tarde!