精华内容
下载资源
问答
  • HTML布局

    千次阅读 2018-06-10 16:16:42
    HTML网页布局常用的是: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 table标签来设计出漂亮的布局,但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。  1 . HTML 布局 - 使用 元素 div 元素是用于分组 HTML 元素的块级元素。 下面的...
    大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位,或者为页面创建背景以及色彩丰富的外观。

    注: 虽然我们可以使用HTML table标签来设计出漂亮的布局,但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。 

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

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

    下面的例子使用五个 div 元素来创建多列布局:

    实例
    <!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>
    上面的 HTML 代码会产生如下结果:

    2 .  HTML 布局 - 使用表格
    使用 HTML <table> 标签是创建布局的一种简单的方式。

    大多数站点可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位,或者为页面创建背景以及色彩丰富的外观。
    注:即使可以使用 HTML 表格来创建漂亮的布局,但设计表格的目的是呈现表格化数据 - 表格不是布局工具!

    下面的例子使用三行两列的表格 - 第一和最后一行使用 colspan 属性来横跨两列:

    实例
    <!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 代码会产生以下结果:


    HTML 布局 - 有用的提示:
    Tip: 由于创建高级的布局非常耗时,使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板(您可以使用这些预先构建好的网站布局,并优化它们)。

    3 .   Flex布局

    前言:2009年,W3C提出了一种新的方案----Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。lex布局将成为未来布局的首选方案。

    ——>Flex布局将在下篇文章中具体介绍.....


    展开全文
  • 网站布局 大多数网站会把内容安排到多个列中(就像杂志或...提示即使可以使用 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 表格来创建漂亮的布局,但设计表格的目的是呈现表格化数据 - 表格不是布局工具! HTML 布局 - 使用 <div> 元素 新建一...
  • from影响了布局如何解决,form要包裹整个布局,我的布局是两列右侧自适应的
  • HTML布局常用到的CSS

    2013-12-20 09:35:47
    简述:做为一个程序员,最近被公司的一个电视端的WEB项目逼得不得不自己写前端的HTML布局+CSS。之前写得最多的是后台代码,所以突然要自己写前端布局还是有些不习惯。在这里就把电视端的常用布局以及开发电视端的WEB...
  • HTML 布局、框架、字体

    千次阅读 2011-07-17 18:39:33
    HTML 布局 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:48
    flexbox布局方式旨在容器中的元素在排版,对其,剩余空间处理的问题上提供一个高效的解决方式,无论子元素的大小是已知或未知,动态或者静态。flexbox布局的思想就是通过改变子元素的长、宽、顺序来更好的利用容器的...
  • 问题:鼠标移入移出显示鼠标移除隐藏,影响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:34
    html: &lt;tab-pane :label="lab1" name="name0"&gt; &lt;div class="t1"&gt; &lt;i-table :columns="columns3":data="data3"&gt;...
  • 布局面试 一、flex弹性布局, 可以简单的使一个 div 元素居中(包括水平和垂直居中) CSS片段: - 水平居中 .box{ display: flex; justify-content:center; } - 垂直居中 .box{ display: flex; width: ...
  • html布局之框架练习

    千次阅读 2018-05-08 15:55:38
    代码如下:&lt;head runat="server"...text/html; charset=utf-8"/&gt; &lt;title&gt;&lt;/title&gt; &lt;frameset cols="25%,50%,25%"&gt;
  • HTML布局标记与列表标记

    千次阅读 2017-09-28 12:22:09
    布局标记首先要介绍的布局标记是div标记,div可以做网页的层也可以做网页的分区。当div做网页的层时可以实现漂浮在网页上的效果,就像我们经常可以在网站里看见的那些漂浮广告。div做网页的分区时,则是可以布置网页...
  • 一般都使用百分比,什么时候使用px,高度都是子元素撑起来的吗
  • Sahrepoint2013 创建HTML布局页面

    千次阅读 2014-06-19 09:47:58
    1.在IE中打开设计管理器,找到...4.然后打开SPD,在页面布局中找到对应的HTML页面,点击右键签出,再高级模式下编辑, 打开页面首先如果你要使用外部样式连接,用查找找到 id="PlaceHolderAdditionalPageHead"的标签在
  • ASP.NET 网页全球化的 HTML 布局准则

    千次阅读 2006-04-25 16:42:00
    ASP.NET 网页全球化的 HTML 布局准则 HTML 布局的最佳做法是确保本地化人员只需翻译字符串,因为用户界面会调整所有控件的大小以适合字符串包含的文本。这是一个优点,因为从本地化过程中去除了手动 调整控件大小的...
  • 一个html布局的模板

    万次阅读 2016-04-19 18:44:01
    DOCTYPE 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:17
    1.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:00
     title:'Ext.layout.CardLayout布局示例',  frame:true,//渲染面板  height : 150,  width : 750,  applyTo :'panelShow2',  defaults : {//设置默认属性  bodyStyle:'background-...
  • <!DOCTYPE html> <html> <head> <meta charset="utf-8"> 布局练习</title> <body><table width="500" border="0"> ;"> 主要的网页标题
  • QQ空间首页模仿制作——HTML布局练习

    万次阅读 多人点赞 2018-09-27 20:02:43
    QQZone.html:  &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;我的QQ空间&lt;/title&gt; &lt;link type="text/css" rel="

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 50,721
精华内容 20,288
关键字:

html布局