HTML5网页设计

最新推荐文章于 2024-06-15 19:46:07 发布

离别遇见

最新推荐文章于 2024-06-15 19:46:07 发布

阅读量287

点赞数

文章标签： html5 css html

本文链接：https://blog.csdn.net/libieyujian/article/details/120015129

版权

页面布局与规划

div布局

div是Web标准中一种新的布局方式，它已经逐渐替代传统的表格( table )布局。

div布局的优势比表格布局更多，具体表现为结构与表现相分离，代码简洁、利于搜索，方便后期维护和修改。

(1)首先，将页面在整体上用

标记进行分块。
(2)其次，使用css对各版块进行定位。
(3 )再次，在各版块中添加相应的内容，实现局部布局。

注意：可能出现浮动塌陷

div高级：

通过float定位和绝对定位两种方式实现多栏式页面布局。和绝对定位两种方式实现多栏式页面布局。

流式布局是页面默认布局方式，是其他方式布局的基础，表格布局我们不在使用，取而代之的是DIV布局，DIV布局是目前最为流行布局方式，需要大家作为重点掌握。

例子：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        * {
  padding: 0;
  margin: 0;
}
#container div.background {
  width: 988px;
  height: 637x;
  background-image: url(./QQ图片20210105075558.jpg);
}

#container div.background div.form {
  background-color: #22252e;
  color: white;
  width: 485px;
  float: left;
  margin-top: 150px;
  margin-left: 220px;
  padding: 40px;
}

#container div.background div.form p.zhanghao {
  text-align: center;
  font-size: 26px;
}

#container div.background div.form p {
  margin-bottom: 15px;
  font-size: 14px;
}

#container div.background div.form input {
  width: 470px;
  height: 32px;
  background-color: #0f1014;
  color: white;
  margin-bottom: 20px;
  border: 1px solid #58595e;
  padding-left: 10px;
}

#container div.background div.form input.submit {
  width: 480px;
  background-color: #0f86ca;
  color: white;
  border: 1px solid #1fa5d8;
}

#container div.background div.form input.button {
  width: 480px;
  border: 1px solid #0f86ca;
  color: #3b9aec;
}

#container div.background div.form a {
  text-decoration: none;
  color: #0f86ca;
}

    </style>
</head>

<body>
    <div id="container">
        <div class="background">
            <div class="form">
                <form action="" method="post">
                    <p class="zhanghao">创建账号</p>
                    <p>创建暴雪游戏通行证，开启您的冒险旅程。</p>
                    <input type="text" name="" id="" placeholder="身份证号码"><br>
                    <input type="text" name="" id="" placeholder="姓名"><br>
                    <input type="email" name="" id="" placeholder="电子邮箱"><br>
                    <input type="password" name="" id="" placeholder="密码"><br>
                    <input type="submit" value="免费注册暴雪游戏通行证" class="submit"><br>
                    <input type="button" value="已经有通行证了？" class="button">
                    <p>点击“免费注册暴雪游戏通行证”即表示我同意并接受<a href="">暴雪战网最终用户许可协议</a>。</p>
                </form>
            </div>
        </div>
    </div>
</body>

</html>

展示：
请添加图片描述

离别遇见

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5网页设计

页面布局与规划div布局div是Web标准中一种新的布局方式，它已经逐渐替代传统的表格( table )布局。div布局的优势比表格布局更多，具体表现为结构与表现相分离，代码简洁、利于搜索，方便后期维护和修改。(1)首先，将页面在整体上用标记进行分块。(2)其次，使用css对各版块进行定位。(3 )再次，在各版块中添加相应的内容，实现局部布局。注意：可能出现浮动塌陷div高级：通过float定位和绝对定位两种方式实现多栏式页面布局。和绝对定位两种方式实现多栏式页面布局。流式布局是页面默认
复制链接

扫一扫