-
HTML布局
2018-06-10 16:16:42HTML网页布局常用的是:div和table元素。1、使用div元素的网页布局示例:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title...HTML网页布局常用的是:div和table元素。
1、使用div元素的网页布局
示例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>使用div元素的网页布局</title> </head> <body> <div id="container" style="width:500px"> <div id="header" style="background-color:#FFA500;"> <h1 style="margin-bottom:0;">主要的网页标题</h1> </div> <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;"> <b>菜单</b> <br> HTML<br> CSS<br> JavaScript </div> <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;"> 内容在这里 </div> <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> 版权 © runoob.com </div> </div> </body> </html>
效果:
2、使用table元素的网页布局
示例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>使用table元素的网页布局</title> </head> <body> <table width="500" border="0"> <tr> <td colspan="2" style="background-color:#FFA500;"> <h1>主要的网页标题</h1> </td> </tr> <tr> <td style="background-color:#FFD700;width:100px;vertical-align:top;"> <b>菜单</b><br> HTML<br> CSS<br> JavaScript </td> <td style="background-color:#eeeeee;height:200px;width:400px;vertical-align:top;"> 内容在这里</td> </tr> <tr> <td colspan="2" style="background-color:#FFA500;text-align:center;"> 版权 © runoob.com</td> </tr> </table> </body> </html>
效果:
补充:
<div>定义文档区块,块级(block-level)
<span>定义 span,用来组合文档中的行内元素。
示例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <p>我的母亲有 <span style="color:blue;font-weight:bold">蓝色</span> 的眼睛,我得父亲有 <span style="color:darkolivegreen;font-weight:bold">碧绿色</span> 的眼睛。</p> <div style="color:#0000FF"> <h3>这是一个在 div 元素中的标题。</h3> <p>这是一个在 div 元素中的文本。</p> </div> </body> </html>
-
-
网站布局之html布局及flex布局 一 .......
2016-11-02 23:16:31注: 虽然我们可以使用HTML table标签来设计出漂亮的布局,但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。 1 . HTML 布局 - 使用 元素 div 元素是用于分组 HTML 元素的块级元素。 下面的...大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位,或者为页面创建背景以及色彩丰富的外观。
注: 虽然我们可以使用HTML table标签来设计出漂亮的布局,但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。
1 . HTML 布局 - 使用<div> 元素
div 元素是用于分组 HTML 元素的块级元素。
下面的例子使用五个 div 元素来创建多列布局:
上面的 HTML 代码会产生如下结果:实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <div id="container" style="width:500px"> <div id="header" style="background-color:#FFA500;"> <h1 style="margin-bottom:0;">主要的网页标题</h1> </div> <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;"> <strong>菜单</strong><br> HTML<br> CSS<br> JavaScript </div> <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;"> 内容在这里 </div> <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> 版权 © runoob.com </div> </div> </body> </html>
2 . HTML 布局 - 使用表格
使用 HTML <table> 标签是创建布局的一种简单的方式。大多数站点可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位,或者为页面创建背景以及色彩丰富的外观。
注:即使可以使用 HTML 表格来创建漂亮的布局,但设计表格的目的是呈现表格化数据 - 表格不是布局工具!下面的例子使用三行两列的表格 - 第一和最后一行使用 colspan 属性来横跨两列:
上面的 HTML 代码会产生以下结果:实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <table width="500" border="0"> <tr> <td colspan="2" style="background-color:#FFA500;"> <h1>主要的网页标题</h1> </td> </tr> <tr> <td style="background-color:#FFD700;width:100px;"> <b>菜单</b><br> HTML<br> CSS<br> JavaScript </td> <td style="background-color:#eeeeee;height:200px;width:400px;"> 内容在这里 </td> </tr> <tr> <td colspan="2" style="background-color:#FFA500;text-align:center;"> 版权 © runoob.com </td> </tr> </table> </body> </html>
HTML 布局 - 有用的提示:
Tip: 由于创建高级的布局非常耗时,使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板(您可以使用这些预先构建好的网站布局,并优化它们)。
3 . Flex布局前言:2009年,W3C提出了一种新的方案----Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。lex布局将成为未来布局的首选方案。
——>Flex布局将在下篇文章中具体介绍.....
-
前端学习路线基础入门教程之html布局
2020-02-14 20:26:43网站布局 大多数网站会把内容安排到多个列中(就像杂志或...提示即使可以使用 HTML 表格来创建漂亮的布局,但设计表格的目的是呈现表格化数据 - 表格不是布局工具! HTML 布局 - 使用 <div> 元素新建一个前...网站布局
大多数网站会把内容安排到多个列中(就像杂志或报纸那样)。
可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位,或者为页面创建背景以及色彩丰富的外观。
提示即使可以使用 HTML 表格来创建漂亮的布局,但设计表格的目的是呈现表格化数据 - 表格不是布局工具!
HTML 布局 - 使用 <div> 元素新建一个前端学习qun438905713,在群里大多数都是零基础学习者,大家相互帮助,相互解答,并且还准备很多学习资料,欢迎零基础的小伙伴来一起交流。
div 元素是用于分组 HTML 元素的块级元素。
下面的例子使用五个 div 元素来创建多列布局:例子:
<html> <head> <style type="text/css"> #container{width:500px} #header {background-color:#99bbbb;} #menu {background-color:#ffff99; height:200px; width:100px; float:left;} #content {background-color:#EEE; height:200px; width:400px; float:left;} #footer {background-color:#99bbbb; 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>JavaScript</li> </ul> </div> <div id="content">Content goes here</div> <div id="footer">Copyright 91YB.com All Rights Reserved.</div> </div> </body> </html>
页面上显示为:
HTML 布局标签:
<div> 定义文档中的分区或节(division/section)。
<span> 定义 span,用来组合文档中的行内元素。HTML 布局 - 使用表格
使用 HTML<table> 标签是创建布局的一种简单的方式。
可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位,或者为页面创建背景以及色彩丰富的外观。
提示:即使可以使用 HTML 表格来创建漂亮的布局,但设计表格的目的是呈现表格化数据 - 表格不是布局工具!
下面的例子使用三行两列的表格 - 第一和最后一行使用 colspan 属性来横跨两列:
<!DOCTYPE html> <html> <body> <table width="500" border="0"> <tr> <td colspan="2" style="background-color:#99bbbb;"> <h1>Main Title of Web Page</h1> </td> </tr> <tr valign="top"> <td style="background-color:#ffff99;width:100px;text-align:top;"> <b>Menu</b><br /> HTML<br /> CSS<br /> JavaScript </td> <td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;"> Content goes here</td> </tr> <tr> <td colspan="2" style="background-color:#99bbbb;text-align:center;"> Copyright W3School.com.cn</td> </tr> </table> </body> </html>
页面上显示为:新建一个前端学习qun438905713,在群里大多数都是零基础学习者,大家相互帮助,相互解答,并且还准备很多学习资料,欢迎零基础的小伙伴来一起交流。
HTML 布局 - 有用的提示
提示:使用 CSS 最大的好处是,如果把 CSS 代码存放到外部样式表中,那么站点会更易于维护。通过编辑单一的文件,就可以改变所有页面的布局。
提示:由于创建高级的布局非常耗时,使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板(您可以使用这些预先构建好的网站布局,并优化它们)。
习题
-
html布局之 图标文字混排
2016-09-12 22:32:44摘要:做html布局的时候经常用到图标和文字的混排,使用的时候经常要调很长时间,今天来总结一下。摘要:做html布局的时候经常用到图标和文字的混排,使用的时候经常要调很长时间,今天来总结一下。
直接上代码:
<!doctype html> <html class="no-js"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <title>小徽章</title> <link rel="stylesheet" href="../assets/css/amazeui.css"> <style> #p { background-color: blue; width: 80%; margin: 0 auto; text-align: center; padding: 0.2em 0 0.5em 0; border-radius: 0.5em; } #p>img { display: inline-block; height: 1.2em; } #p>span { line-height: 1; color: #fff; } </style> </head> <body> <p id="p"> <img src="static/img/lock.png" alt="no"> <span class="am-text-bottom">点击分享到朋友圈开始预约</span> </p> <script type="text/javascript" src="../assets/js/jquery.min.js"></script> <script type="text/javascript" src="../assets/js/amazeui.js"></script> </body> </html>
效果如下:
说明:
- 给文字添加 am-text-bottom 类,使图片底部和文字底部对其(注意这里是和文字行高的底部);
- 根据第一条,所以要设置文字的行高为1,即文字行高的一倍,这样图片就和文字底部是对齐的;
- 设置图片的高度到合适位置;
- 设置容器的内padding,使上下背景色协调;
- OK
<完> -
html+css基础入门学习教程之HTML 布局 - 使用 <div> 元素
2020-03-02 21:26:59网站布局 大多数网站会把内容安排到多个列中(就像杂志或...提示即使可以使用 HTML 表格来创建漂亮的布局,但设计表格的目的是呈现表格化数据 - 表格不是布局工具! HTML 布局 - 使用 <div> 元素 新建一... -
html布局,form影响布局
2017-12-14 22:24:13from影响了布局如何解决,form要包裹整个布局,我的布局是两列右侧自适应的 -
HTML布局常用到的CSS
2013-12-20 09:35:47简述:做为一个程序员,最近被公司的一个电视端的WEB项目逼得不得不自己写前端的HTML布局+CSS。之前写得最多的是后台代码,所以突然要自己写前端布局还是有些不习惯。在这里就把电视端的常用布局以及开发电视端的WEB... -
HTML 布局、框架、字体
2011-07-17 18:39:33HTML 布局 This is some text. Another text. This is some text. This is some text. This is some text. This is some text. This is some t -
HTML 布局(十八)
2008-07-28 17:38:00在网络上,随处都可以看到像报纸那样的...HTML布局 - 使用表格One very common practice with HTML, is to use HTML tables to format the layout of an HTML page. A part of this page is formatted with two colum -
html布局(Layout)
2018-11-24 22:01:45一列布局 1.页面内容区域有一个固定宽度 2.页面内容区域在浏览器窗口中自动适应居中 实现方式: box{widht:自定义;margin 0 auto} 固定宽度设置 1.以主流的分辨率来判断 二列布局(1列固定宽度,1列... -
Android UI 使用HTML布局(直接打开服务器网页)
2014-06-25 15:57:46很多时候我们用HTML布局会更方便直接,记录一下。 我现在主要是直接调用服务器的网页(实际上是jsp的,只是返回的是html),所以需要联网,第一步添加权限。 布局文件直接用一个WebView,如下: android:layout_... -
HTML布局方式Flex属性详解
2018-02-02 11:29:48flexbox布局方式旨在容器中的元素在排版,对其,剩余空间处理的问题上提供一个高效的解决方式,无论子元素的大小是已知或未知,动态或者静态。flexbox布局的思想就是通过改变子元素的长、宽、顺序来更好的利用容器的... -
css滚动条:鼠标移入移出显示鼠标移除隐藏,不影响html布局
2019-08-23 17:34:08问题:鼠标移入移出显示鼠标移除隐藏,影响html布局? <div class='div1'> <div class='div2'> <div> <div>我是谁我在干什么</div> <div>我是谁我在干什么</div>... -
html布局:定位position使用技巧
2016-11-15 23:52:22布局是html中非常重要的一部分,而定位在页面布局中也是使用频率很高的方法,今天我们就说说定位在布局中的使用技巧和注意事项。 -
JS动态添加HTML布局
2018-08-25 10:11:34html: <tab-pane :label="lab1" name="name0"> <div class="t1"> <i-table :columns="columns3":data="data3">... -
2018前端最新 HTML布局 面试题
2019-03-25 21:03:32布局面试 一、flex弹性布局, 可以简单的使一个 div 元素居中(包括水平和垂直居中) CSS片段: - 水平居中 .box{ display: flex; justify-content:center; } - 垂直居中 .box{ display: flex; width: ... -
html布局之框架练习
2018-05-08 15:55:38代码如下:<head runat="server"...text/html; charset=utf-8"/> <title></title> <frameset cols="25%,50%,25%"> -
HTML布局标记与列表标记
2017-09-28 12:22:09布局标记首先要介绍的布局标记是div标记,div可以做网页的层也可以做网页的分区。当div做网页的层时可以实现漂浮在网页上的效果,就像我们经常可以在网站里看见的那些漂浮广告。div做网页的分区时,则是可以布置网页... -
html布局为了适应不同分辨率的显示器,用什么布局好?
2018-02-02 10:22:56一般都使用百分比,什么时候使用px,高度都是子元素撑起来的吗 -
Sahrepoint2013 创建HTML布局页面
2014-06-19 09:47:581.在IE中打开设计管理器,找到...4.然后打开SPD,在页面布局中找到对应的HTML页面,点击右键签出,再高级模式下编辑, 打开页面首先如果你要使用外部样式连接,用查找找到 id="PlaceHolderAdditionalPageHead"的标签在 -
ASP.NET 网页全球化的 HTML 布局准则
2006-04-25 16:42:00ASP.NET 网页全球化的 HTML 布局准则 HTML 布局的最佳做法是确保本地化人员只需翻译字符串,因为用户界面会调整所有控件的大小以适合字符串包含的文本。这是一个优点,因为从本地化过程中去除了手动 调整控件大小的... -
一个html布局的模板
2016-04-19 18:44:01DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Ty -
html布局之 图片文字混排
2016-11-23 14:55:171.ul li 中实现图片 文字混排 a.效果如下: b.实现代码如下 引用 打印 .opts-btn .icon-quote { background-position: 0 -5px; } .opts-btn li i { display: inline-block; -
ExtJs的html布局
2011-04-22 01:22:00title:'Ext.layout.CardLayout布局示例', frame:true,//渲染面板 height : 150, width : 750, applyTo :'panelShow2', defaults : {//设置默认属性 bodyStyle:'background-... -
web前端之html布局(六)-------div,table布局
2017-03-30 09:27:57<!DOCTYPE html> <html> <head> <meta charset="utf-8"> 布局练习</title> <body><table width="500" border="0"> ;"> 主要的网页标题 -
QQ空间首页模仿制作——HTML布局练习
2018-09-27 20:02:43QQZone.html: <!DOCTYPE html> <html> <head> <title>我的QQ空间</title> <link type="text/css" rel="