4网页整体结构布局HTML

最新推荐文章于 2022-01-12 22:14:11 发布

一只编程的嵩鼠

最新推荐文章于 2022-01-12 22:14:11 发布

阅读量702

点赞数 1

分类专栏：前端小白入门文章标签： html

本文链接：https://blog.csdn.net/qq_44682019/article/details/108817664

版权

前端小白入门专栏收录该内容

30 篇文章 0 订阅

订阅专栏

先整体布局，然后一块一块来做
如何灵活和合理的使用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="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>

一个简单的布局，但没有css+js显得很不美观，一步步来，慢慢的就变好看了的，下次一定！

在这里插入图片描述
明天见，等下上传一些小资料！

一只编程的嵩鼠

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
4网页整体结构布局HTML

先整体布局，然后一块一块来做如何灵活和合理的使用div<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>小案例</title></head><body> <!-- 头部内容 --
复制链接

扫一扫

专栏目录