HTML布局

2人阅读 评论(0) 收藏 举报
分类:

用<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;">
<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>

大多数站点可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位,或者为页面创建背景以及色彩丰富的外观。

lamp即使可以使用 HTML 表格来创建漂亮的布局,但设计表格的目的是呈现表格化数据 - 表格不是布局工具!




查看评论

HTML与CSS布局技巧总结

很多人对CSS的布局有困惑,实际的应用场景中由于布局种类多难以选择。今天我花些时间总结下自己对CSS布局的理解,分析下了解各种布局的优劣,同时希望能分享给初入前端的朋友们一些在布局上的经验,如果有那些...
  • bingkingboy
  • bingkingboy
  • 2016-04-11 00:29:02
  • 19427

CSS —— html布局选择与注意事项

一、定位 1、相对定位:relative 按不同元素类型默认布局出现在应该出现的位置,可设置相对移动位置。为默认值。 注意事项:外边距合并情况,仅当父元素与子元素都是默认定位(relative),或指...
  • qq_19865749
  • qq_19865749
  • 2016-07-25 22:13:58
  • 974

HTML列表、块和布局

HTML列表   有序列表 无序列表 列表项 列表 列表项 描述 1、无序列表 使用标签:、 属性:disc、circle、square 2、有序列表 ...
  • u014604726
  • u014604726
  • 2016-09-09 20:00:27
  • 406

html的三种布局

1、流动布局(html网页默认的布局方式) 特点: 1、块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。 2、内联元素都会在所处的包含元素...
  • superman__007
  • superman__007
  • 2017-09-12 22:31:07
  • 2652

关于html css 的部分细节处理的经验 网页布局分析

1 打开psd图,进行页面划分,先大体模块儿,再细节 3、html css中清除属性时,一般将值设置为none;但是在line-height中,设置为none非法,所以如果样式中继承了父类的属性影响...
  • zxllynu
  • zxllynu
  • 2017-08-13 21:09:52
  • 233

[html5入门-21]Html中的几种布局简单比较

html中的布局主要由静态布局、自适应布局、流式布局以及响应式布局几类,简单比较以下这几种布局的区别和特点。 一 静态布局(Static Layout) 表现:在传统web设计中,不管浏览器尺寸具体大...
  • weixin_36185028
  • weixin_36185028
  • 2016-10-10 22:17:26
  • 1068

一个html布局的模板

  • tanqian351
  • tanqian351
  • 2016-04-19 18:44:01
  • 2081

html常用的样式布局

自己写写,留着以后备用 1、ul  li 标签排列布局 2、p 标签带有自动换行功能 3、文字对齐方式 text-align:center是垂直居中,如果水平对齐,只需要设置line-height的高...
  • zhaoxinglin123
  • zhaoxinglin123
  • 2015-04-22 22:44:06
  • 562

html -- div table布局 -- 加 布局简单例子

html --div table布局
  • yongaini10
  • yongaini10
  • 2016-09-02 22:32:18
  • 5344

html 文字布局 html 文字布局

  • 2011年06月30日 15:35
  • 591KB
  • 下载
    个人资料
    等级:
    访问量: 0
    积分: 88
    排名: 0
    文章分类
    文章存档
    最新评论