HTML布局--使用<div>元素

最新推荐文章于 2022-11-16 10:48:34 发布
最新推荐文章于 2022-11-16 10:48:34 发布
阅读量81 收藏
点赞数
原文链接：http://www.cnblogs.com/shaojiafeng/p/7944263.html
版权

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

 

上图代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="container" style="width: 500px">
    <div id="header" style="background-color: aqua">
        <h2 style="margin-bottom: 0;">Mr Shao</h2>
    </div>

    <div class="menu" style="background-color: cornflowerblue;height: 200px;width: 100px;float:left">
        <b>菜单</b><br>
        <p>HTML</p>
        <P>CSS</P>
        <P>Javascript</P>
    </div>

    <div class="content" style="background-color: yellow;height: 200px;width: 400px;float: left">
        内容部分
    </div>

    <div class="footer" style="background-color: cadetblue;clear: both;text-align: center">
        版权@shaojf.com
    </div>
    
</div>

</body>
</html>

 

转载于:https://www.cnblogs.com/shaojiafeng/p/7944263.html

weixin_34233856
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML前端(一)----DIV布局
CS_GaoMing的博客
01-18 1万+
HTML的基本语法使用，只包含DIV部分，非CSS+DIV实现...
HTML-布局
m0_73595197的博客
04-14 712
布局 1.1 盒子布局 1.1 border 盒子的主体为border，border表示边框，它有几种标签限制： 1.1.1 none（定义无标签） <!DOCTYPE html> <html lang="en"> <head> <title>布局</title> <style> div4{ border: 1px none ; background-col
CSS HTML元素布局及Display属性
weixin_34013044的博客
07-22 107
　　本篇文章主要介绍HTML的内联元素、块级元素的分类与布局，以及dispaly属性对布局的影响。 目录 1. HTML 元素分类：介绍内联元素、块级元素的分类。 2. HTML 元素布局：介绍内联元素、块级元素的布局。 3. CSS display属性：介绍此属性对布局的影响。   1. HTML元素分类 HTML元素大题可分为内联(inline)元素和块(block)元素。 1...
html中打出"<div>"
hongxiao2016的博客
10-01 203
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>学习javascript</title> </head> <body> 今天学习了div容器标签:<div><!-- 这样是不行的 --> 今天学习了...
HTML＜div＞标签
inttaojiao的博客
06-07 1024
html <div>标签元素 HTML DIV目录 Html div介绍 DIV标签使用说明 Div作用 html div演示代码 一、Html DIV介绍 - TOP 这里htmldiv是指html源代码里的div标签。 如在html中DIV代码片段： <div class="yangshi">演示</div> 二、DIV标签使用说明： - TOP 1）、在DIV+CSS切图布局重构技术中，提到div，而在html中代码布局使用最...
HTML布局-使用＜div＞元素的代码
weixin_57762539的博客
11-17 931
HTML布局-使用<div>元素的代码~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术：DW 作者：李凯顺 撰写时间：2021/11/17 可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。 使用 <div> 元素的 HTML 布局 注释：&lt
形考任务五 使用 元素以及CSS样式表对下面的内容进行的布局设计.zip
11-24
在本形考任务中，我们将探讨如何利用HTML的`<div>`元素以及CSS样式表来实现页面布局设计。`<div>`元素是HTML中的一个非常重要的结构元素，它用于组合其他HTML元素，形成一个可样式的区块。在这个任务中，我们将深入...
Html中＜div＞＜/div＞标签和＜li＞＜/li＞标签的简单应用
ZLQiang_csdn的博客
06-04 4055
实现简单的鼠标的导航渐变和简单电器分类页面 我们知道<div></div>标签： <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。 <div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。 如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。 <div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table&g
＜div＞ | HTML元素容器标签
weixin_44111587的博客
06-04 2329
定义与用法 <div>标签定义 HTML 文档中的一个区块或者一部分。 <div>标签用来组合块级元素，经常与 CSS 一起使用，用来布局网页。。 <div>标签就像一个容器单元，用于封装其他页面元素，并将HTML文档分为几部分。 提示：默认情况下，浏览器通常会在 <div> 元素前后放置一个换行符，我们您可以用 CSS 调整显示效果。 div标签和span标签的区别 div标签 跨度标签 HTML...
【前端】<div>的排版练习【HTML+CSS+JavaScript(JS)】
02-11
在前端开发中，`<div>`元素扮演着重要的角色，它是HTML中的一个基本容器，用于组织和布局网页内容。在这个【前端】<div>的排版练习中，我们将深入探讨如何利用HTML、CSS以及JavaScript（JS）来实现复杂的网页布局。 ...
前端常见的几种布局方式，2分钟即可看完，全是干货。
weixin_61145649的博客
11-16 4674
前端常见的几种布局方式，2分钟即可看完，全是干货。
常见的几种页面内容布局方式
热门推荐
wang839305939的博客
07-27 6万+
常见的页面布局，左右自适应布局
HTML5中网页布局及display属性重点总结
妖精小狗的博客
08-25 2万+
常见网页布局：   标准文档流： 标准文档流：指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式   标准文档流组成： 块级元素（block）：&lt;h1&gt;…&lt;h6&gt;、&lt;p&gt;、&lt;div&gt;、列表 内联元素（inline）：&lt;span&gt;、&lt;a&gt;、&lt;img/&gt;、
前端三种布局方式
m0_47431585的博客
03-17 1101
前端三种布局方式
多级评论的实现思路
weixin_30778805的博客
11-13 2148
一、表结构 class UserInfo(models.Model): """用户表""" username = models.CharField(max_length=32) password = models.CharField(max_length=64) email = models.CharField(max_length=32,nul...
使用div建立一个简单的前端页面
Future_LL的博客
03-28 3550
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;首页&lt;/title&gt; &lt;style type="text/css"&gt; /*取消文本的下划线*/ a{ text-decor
css实现简单的评论布局
weixin_33938733的博客
06-18 1139
1:float实现 <!doctype html> <html> <head> <title>hello</title> <style type="text/css"> .content{ ...
前端设计 最详细的div介绍+效果图+代码图
m0_61123456的博客
10-16 6026
楼主刚学不久 ， 学到css 发现十分有趣和好玩，今天跟大家分享一下 CSS中，div 标签的介绍，这也是我上课的笔记 div ，用得非常多的标签，也是最重要的标签 本身是一个html的标签， 特点： div默认宽度为100%，高度为0. 本身不支持高度 宽度属性，但可以通过css 来设置 语法： 《div》《/div》 应用场景 本身没有过多的自带属性或者样式，所以div可塑性很高。同时也是 div+css 布局的核心。 div默认单独显示在一行 ...
<div> --------------- </div>
最新发布
05-17
`<div>`标签是HTML中的一个容器标签，可以用来定义文档中的一个区域（division）。它是块级元素，可以用其`class`和`id`属性来定义样式，比如颜色、背景、边距等。在`<div>`中还可以嵌套其他的HTML元素，如图像、超链接、段落等。下面是一个简单的例子，展示如何用`<div>`标签创建一个简单的网页布局： ```html <!DOCTYPE html> <html> <head> <title>My Web Page</title> </head> <body> <header> <h1>My Web Page</h1> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <section> <h2>Welcome to my website!</h2> <p>Here you can find all kinds of interesting information about me and my interests.</p> </section> <footer> <p>Copyright © 2021 My Web Page</p> </footer> </body> </html> ``` 该代码创建了一个基本的网页布局。`<header>`元素用于网页的页眉，包含了网页的标题；`<nav>`元素用于网页的导航栏；`<section>`元素用于网页的主要内容区域；`<footer>`元素用于网页的页脚。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值