【HTML学习】——网站布局

最新推荐文章于 2022-12-18 11:53:25 发布

我是小杨我就这样

最新推荐文章于 2022-12-18 11:53:25 发布

阅读量275

点赞数

分类专栏： # HTML 文章标签： html css

本文链接：https://blog.csdn.net/weixin_44478378/article/details/106516103

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

- 网站布局
- div元素布局

网站布局

大多数网站会将内容安排到多个列中（就像杂志和报纸那样），使用<div>元素创建多个快去区域

CSS用于对元素进行定位，或者为页面创建背景色彩丰富的外观

注意：表格并不是布局工具

div元素布局

<div>元素是用于分组HTML元素的块级元素

例：用5个<div>元素创建5个区域

<html>
    <head>
        <style type="text/css">
        #container{widows: 500px;}
        #header{background-color: antiquewhite; }
        #menu{background-color: coral; height: 200px; width: 100px; float: left;}
        #content{background-color: dodgerblue; height: 200px; width: 400px; float: left;}
        #footer{background-color: brown; clear: both; text-align: center;}
        h1 {margin-bottom: 0;}
        h2 {margin-bottom: 0; font-size: 14px;}
        ul {margin: 0;}
        li {list-style: none;}
        </style>
    </head>

    <body>
        <div id="container">

        <div id="header">
            <h1>Main Title of Web Page</h1>
        </div>

        <div id="menu">
            <h2>Menu</h2>
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>Python</li>
            </ul>
        </div>

        <div id="content">Content goes here</div>

        <div id="footer">All right reserved</div>
    </body>>
</html>

在这里插入图片描述

使用CSS最大的好处：如果把CSS代码放到外部样式表中，那么站点会更容易维护——通过编辑单一的文件，就可以改变所有的页面布局
由于创建高级的布局非常耗时间，使用模板是一个快速的选项。（网上有许多模板，进行优化即可）

我是小杨我就这样

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【HTML学习】——网站布局

文章目录网站布局div元素布局网站布局大多数网站会将内容安排到多个列中（就像杂志和报纸那样），使用<div>元素创建多个快去区域CSS用于对元素进行定位，或者为页面创建背景色彩丰富的外观注意：表格并不是布局工具div元素布局<div>元素是用于分组HTML元素的块级元素例：用5个<div>元素创建5个区域<html> <head> <style type="text/css">
复制链接

扫一扫