html局对布局和相对布局,关于HTML学习重点-绝对布局和相对布局总结

最新推荐文章于 2023-04-12 10:25:12 发布
VIP文章 最新推荐文章于 2023-04-12 10:25:12 发布
阅读量1.3k 收藏
点赞数
文章标签： html局对布局和相对布局

其实这篇文章早就该写了，很久写了关于HTML布局相关的经验总结，一直在百度云上，只是偶尔查询翻到对应资料，担心日后很难找到，所以最后还是决心以文章的形式记录下来供大家参考查阅，实现这篇文章应有的价值；

之前从事Java几年，对JavaWeb相关技术都有较深的了解，当然自从从事C++工作之后，一直在专研C++相关技术，所以对Java而言，我已经忘得差不多了，虽然如此，如果真的要恢复所有相关知识，也不需要太多时间，废话不多说，从事java前端UI设计师必不可少的  ，包括动态的JSP(ASP、PHP)和静态的HTML(CSS)以及JS和局部刷新，这里我们说的是HTML。

关于HTML学习，其实就是学习UI设计，现在大多数的UI都是以XML文件进行布局解析，包括手机Andriod(之前学习过一段时间)，QT高级UI应用(qss)以及C++皮肤库DUILIB等等，使用XML布局是一个种很合理很自然的方法，因为它确确实实将UI和业务逻辑完全分离了，如果不是如此，可以想象那是多乱！在设计的时候，我们一般都会遵循MVC模式，也就是将模型、视图以及控制器完全分离，让我们更好的专注业务模型开发，MVC应用很广泛，比如最简单的JavaWeb实现：jsp+serverlet+jdbc以及MFC文档视图框架都是典型的实现；

关于UI(皮肤)或界面开发，从之前学习JavaWeb和DUILIB等开发经验来看，学习的重点不是学会里面各种标签的使用！因为这些使用都有相应的文档，

最低0.47元/天 解锁文章
Shawn S
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
掌握 HTML 定位技巧，轻松打造精美网页布局
a451319296的博客
11-29 905
本文介绍了 HTML 中的定位技术，包括相对定位、绝对定位和固定定位等。通过掌握这些定位技巧，开发人员可以更好地设计和开发具有交互性和美观性的网站。本文重点讲解了定位方式的定义、位置偏移的控制、定位参考对象的改变以及层级关系的控制等方面。最后，本文提出了建议，希望读者能够根据不同的需求和场景选择合适的定位方式，并注意保持代码的简洁和可读性。
CSS网站布局实录 （第二版）PDF版
12-10
《CSS网站布局实录:基于Web标准的网站设计指南(第2版)》内容提要： 本书是一本讲述基于Web标准的应用CSS进行网站布局设计与重构的典范之作。 本书以实例为主,一步步地告诉大家如何进行符合Web 2.0标准的CSS布局设计。具备了知识全面、完美应用(CSS选择器、样式继承、层叠、格式化、XML标签、CSS滤镜等。文本、图像、超链接、列表、菜单、网站导航、表单、数据表格、浮动布局等CSS布局控制。),智能、创造型布局思维(智慧、完美视觉艺术效果之CSS布局技巧、CSS Hack实践战略),Web技术团队倾情奉献(来自CSS布局与Web标准应用之先驱——闪客帝国... [显示全部] 《CSS网站布局实录:基于Web标准的网站设计指南(第2版)》图书目录： 第1章 Web标准与CSS布局概述 1.1 Web标准的历史及发展 1.1.1 什么是Web标准 1.1.2 Web表现层技术 1.1.3 Web标准的历史 1.2 Web标准的构成 1.2.1 结构(Structure) 1.2.2 表现(Presentation) 1.2.3 行为(Behavior) 1.3 Web标准有什么好处 1.4 CSS布局与table布局的区别 1.4.1 CSS 2.0的优势 1.4.2 传统的table布局与CSS布局 1.5 向Web标准过渡 1.5.1 从HTML转向XHTML 1.5.2 发挥CSS 2.0的作用 1.6 常见问题 1.6.1 什么样的网站才符合Web标准 1.6.2 使用Web标准之后表格还有用吗 1.6.3 可以继续使用HTML来设计网页吗 1.6.4 为什么不直接使用到XML 1.6.5 学习CSS布局比表格困难吗 1.6.6 CSS布局是否意味着必须手写代码 1.6.7 什么叫网站重构 1.6.8 使用Web标准之后就不再存在兼容性问题了吗 1.6.9 有没有Web标准方面的优秀图书或网站 1.6.10 使用CSS设计只能做出简单的网页吗 1.7 面向现在与未来的设计 1.7.1 Web标准与Web 2.0 1.7.2 用户体验技术 1.7.3 用户体验设计的发展趋势 第2章 XHTML与CSS基础 2.1 XHTML基础 2.2 选择合适的DTD 2.3 选择合适的标签 2.4 给CSS留下接口 2.5 良好的XHTML编写习惯 2.6 CSS语法结构 2.6.1 CSS属性与选择符 2.6.2 类型选择符 2.6.3 群组选择符 2.6.4 包含选择符 2.6.5 id及class选择符 2.6.6 标签指定式选择符 2.6.7 组合选择符 2.6.8 伪类及伪对象 2.6.9 通配选择符 2.7 CSS数据单位 2.8 应用CSS到网页中 2.8.1 行间样式表 2.8.2 内部样式表 2.8.3 外部样式表 2.9 样式优先权问题 2.9.1 写法优先权 2.9.2 选择符优先权 2.9.3 样式继承 2.9.4 !important语法 2.10 代码注释 2.11 CSS开发环境与调试环境 第3章 CSS网页布局与定位 3.1 认识div 3.1.1 div是什么 3.1.2 如何使用div 3.1.3 理解div 3.1.4 并列与嵌套div结构 3.1.5 使用合适对象来布局 3.2 一列固定宽度 3.3 一列宽度自适应 3.4 二列固定宽度 3.5 二列宽度自适应 3.6 两列右列宽度自适应 3.7 二列固定宽度居中 3.8 三列浮动中间列宽度自适应 3.9 高度自适应 3.10 盒模型详解(.Box Model) 3.10.1 什么是盒模型 3.10.2 盒模型的细节 3.10.3 上下margin叠加问题 3.10.4 左右margin加倍问题 3.11 深入浮动(Float) 3.11.1 文档流(Document Flow) 3.11.2 浮动定位 3.11.3 浮动的清理(Clear) 3.11.4 何时选用浮动定位 3.12 绝对定位与相对定位 3.12.1 绝对定位 3.12.2 相对定位 3.12.3 何时选用绝对与相对定位 第4章 CSS网站元素设计 4.1 用CSS设计网站导航 4.1.1 横向导航 4.1.2 纵向导航 4.1.3 下拉及多级弹出式菜单 4.1.4 门户网站的导航设计(闪客帝国) 4.2 背景控制 4.2.1 背景颜色 4.2.2 背景图片 4.2.3 背景定位 4.2.4 背景滚动 4.2.5 背景属性缩写 4.2.6 基于背景控制的导航优化 4.3 使用列表元素 4.3.1 ul无序列表 4.3.2 ol有序列表 4.3.3 改变项目符号样式 4.3.4 使用图片自定义项目符号 4.3.5 使列表变为段落 4.3.6 列表缩进排版 4.3.7 复杂列
html 布局-相对位置及绝对位置,html 布局-相對位置及絕對位置
weixin_29195217的博客
06-09 597
來源：http://zhykhs.javaeye.com/blog/338563Div + CSS Example, Wayhome's Blogposition: absolute;top: 5px;right: 20px;position: absolute;left: 20px;bottom: 10px;position: absolute;top: 5px;left: 5px;positi...
html设置相对布局居中,设置控件相对于父控件居中
weixin_42486094的博客
06-15 1525
css盒子模型盒子模型一、display:blockblock元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。block元素可以设置margin和padding属性。二、display:inlineinline元素不会独占一行，多个相邻的行内元素会排列在...
html各类页面布局及属性说明
m0_72089989的博客
02-24 281
HTML页面布局及优缺点
定位position（前面布局无法实现
采菊东篱下，Python满乾坤！
08-29 812
文档流 文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。 定位： 1、relative 生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。 2、absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解
Android编程之绝对布局AbsoluteLayout和相对布局RelativeLayout实例详解
09-03
主要介绍了Android编程之绝对布局AbsoluteLayout和相对布局RelativeLayout实现方法,结合实例形式详细分析了Android绝对布局AbsoluteLayout和相对布局RelativeLayout的原理与使用技巧,需要的朋友可以参考下
CSS网页布局教程:绝对定位和相对定位
12-07
本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系。以及使用CSS的Left、Right、Top、Bottom属性（偏移属性）和Margin属性（外边距）对定位块级元素进行布局的方法。 CSS网页布局教程:...
android相对布局和绝对布局
12-21
这个程序写了对相对布局和绝对布局的例子，帮助大家理解两者的使用和区别。
学习iOS设计—-iOS8的颜色、文字和布局学习
02-26
现在的设计语言相对之前大为简化，能够让设计师将精力集中到动画和功能上，而不是繁复的视觉细节上。当然，即便你目前的设计目标是完全不同于iOS的平台，相互之间的设计理念也是相通的，你可以将在web和印刷领域学习...
8月16日知识总结
m0_70021245的博客
08-16 261
flex-flow 属性： 复合属性，flex-direction和flex-wrap。- flex-flow 属性： 复合属性，flex-direction和flex-wrap。- align-content属性 子元素整体，在父元素中的对齐方式。- align-content属性 子元素整体，在父元素中的对齐方式。- align-items 侧轴方向，子元素的排列。- align-items 侧轴方向，子元素的排列。...
HTML三大布局方式
热门推荐
weixin_46222426的博客
05-21 1万+
欢迎使用Markdown编辑器 提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录欢迎使用Markdown编辑器一、浮动布局 (float布局)二、使用步骤1.引入库2.读入数据总结 一、浮动布局 (float布局) 使用浮动来完成左中右三栏布局 float:left----左浮动 float:right----右浮动 注意：使用float浮动时，margin:0px auto;使块元素居中将会失效。 二、使用步骤 1.引入库 代码如下（示例）： import numpy a
关于HTML学习重点-绝对布局和相对布局总结
lixiang987654321的专栏
07-24 9084
其实这篇文章早就该写了，很久写了关于HTML布局相关的经验总结，一直在百度云上，只是偶尔查询翻到对应资料，担心日后很难找到，所以最后还是决心以文章的形式记录下来供大家参考查阅，实现这篇文章应有的价值； 之前从事Java2-3年，对JavaWeb相关技术都有较深的了解，当然自从从事C++工作之后，一直在专研C++相关技术，所以对Java而言，我已经忘得差不多了，虽然如此，如果真的要
html水平居中、垂直居中transfrom、translate的使用，利用position属性设置相对布局或绝对布局
kiiiiiiiiile的博客
07-19 406
html水平居中、垂直居中transfrom、translate的使用，利用position属性设置相对布局或绝对布局
html页面布局
墨城烟柳ベ旧人殇的博客
04-12 6266
本文主要是用HTML语言实现页面布局。
html的相对位置和绝对位置的理解，搭配float使用。
XC___XC的博客
08-05 2072
前言 通过在公司实习，对html也有了一定的认识，之前在网上看了一些的关于html的相对位置和绝对位置，不是很直观，通过同事和领导的指点，结合自己的认识，想在这说说我的看法。 为了代码看的直观一些，这里的CSS采用内联式（用style引用）和行内样式（直接在元素上写style）。 div独占一行 注意： 这里提醒一下，我们虽然设置了div的width，在没有设置float浮动的情况下，div默认情况下是独占一行的。这也是后面讲定位的一个很重要的知识点。 如下图： 代码： <!DOCTYPE htm
html 绝对布局 居中,CSS居中的实现方式
weixin_33099377的博客
07-14 336
1.水平居中1.1 text-align:center父盒子设置text-align:center,如果子盒子不是行内元素，可以先设置display:inline或者display:inline-block转成行内元素。.father{text-align:center;}.chlidren{display:inline-block;background: red;}抹茶冰淇淋居中方法研究imag...
HTML的绝对布局和相对布局的区别
qq_45486059的博客
08-12 2036
绝对布局（absolute;）：一般指的指是相对于顶层页面；相对布局（relative）指的是相对于上一层页面 代码： 相对布局 position: relative; top:300px; left:350px; 绝对布局 position: absolute; top:300px; left:350px; (一般用的是绝对布局) ...
html中相对位置与绝对位置介绍
hdxx2022的博客
12-04 1525
描述一个地区的位置有两种方法：相对位置和绝对位置。本文主要介绍了html中相对位置与绝对位置的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着微点阅读小编来一起学习学习吧用户在浏览网站时经常会看到左侧有一种宣传栏，它不会随着鼠标滚动而不被用户看到，它会始终以页面的中心为参照物始终保持在左侧一个固定的位置，今天我们来做一下这个小例子，让我们先了解一下盒模型和相对丶绝对位置的前端知识。盒模型分为两种一种是标准模型，另一种是IE模型，它的组成由外向里是ma
怎么使用div相对定位和绝对定位完成页面布局
最新发布
05-25
使用 div 相对定位和绝对定位可以实现灵活的页面布局，具体步骤如下： 1. 在 HTML 中创建需要布局的元素，使用 div 标签包裹它们。 2. 为需要相对定位的元素添加 position: relative; 的样式，这样会将该元素的定位基准点设置为该元素本身。 3. 为需要绝对定位的元素添加 position: absolute; 的样式，并设置其 top、bottom、left、right 属性，来确定该元素相对于定位基准点的位置。 4. 可以通过设置 z-index 属性来控制绝对定位元素的层级关系。 5. 调整相对定位元素的大小和位置，以适应绝对定位元素的位置变化。 下面是一个简单的例子： ```html <style> .container { position: relative; width: 500px; height: 500px; border: 1px solid #ccc; } .box1 { position: absolute; top: 20px; left: 20px; width: 100px; height: 100px; background-color: red; z-index: 2; } .box2 { position: absolute; top: 50px; right: 20px; width: 150px; height: 150px; background-color: blue; z-index: 1; } </style> <div class="container"> <div class="box1"></div> <div class="box2"></div> </div> ``` 这段代码会在一个宽高为 500px 的容器中创建两个绝对定位的元素，box1 在容器的左上角，box2 在容器的右上角。由于 box1 的 z-index 值比 box2 大，所以 box1 会被显示在 box2 上面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值