4 Web page overall structure layout HTML

Layout first, then do
it piece by piece How to use div flexibly and reasonably


<!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>

A simple layout, but it is not beautiful without css+js. Step by step, it will gradually become better. Next time!

Insert picture description here
See you tomorrow and upload some small materials later!

4 Web page overall structure layout HTML

Guess you like