首页 > 教程 > 关键词 > CSS+DIV,CSS,CSS教程,XHTML最新资讯 > 正文

基于XHTML的DIV+CSS网页制作布局技术

2008-11-13 14:33 · 稿源:互联网

  CSS布局常用的方法:float:none|left|right

  取值:

  none:??默认值。对象不飘浮

  left:??文本流向对象的右边

  right:??文本流向对象的左边

  它是怎样工作的,看个一行两列的例子

  xhtml:

  <div id="wrap">

  <div id="column1">这里是第一列</div>

  <div id="column2">这里是第二列</div>

  <div class="clear"></div> /*这是违背web标准意图的,只是想说明在它下面的元素需要清除浮动*/

  </div>

  CSS:

  #wrap{width:100;height:auto;}

  #column1{float:left;width:40;}

  #column2{float:right;width:60;}

  .clear{clear:both;}

  position:static|absolute|fixed|relative

  取值:

  static:??默认值。无特殊定位,对象遵循HTML定位规则

  absolute:??将对象从文档流中拖出,使用left,right,top,bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据body对象。而其层叠通过z-index属性定义

  fixed:??未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范

  relative:??对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置

  它来实现一行两列的例子

  xhtml:

  <div id="wrap">

  <div id="column1">这里是第一列</div>

  <div id="column2">这里是第二列</div>

  </div>

  CSS:

  #wrap{position:relative;/*相对定位*/width:770px;}

  #column1{position:absolute;top:0;left:0;width:300px;}

  #column2{position:absolute;top:0;right:0;width:470px;}

  他们的区别在哪?

  显然,float是相对定位的,会随着浏览器的大小和分辨率的变化而改变,而position就不行了,所以一般情况下还是float布局!

  CSS常用布局实例

  单行一列

  body{margin:0px;padding:0px;text-align:center;}

  #content{margin-left:auto;margin-right:auto;width:400px;}

  两行一列

  body{margin:0px;padding:0px;text-align:center;}

  #content-top{margin-left:auto;margin-right:auto;width:400px;}

  #content-end{margin-left:auto;margin-right:auto;width:400px;}

  三行一列

  body{margin:0px;padding:0px;text-align:center;}

  #content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;}

  #content-mid{margin-left:auto;margin-right:auto;width:400px;}

  #content-end{margin-left:auto;margin-right:auto;width:400px;}

  单行两列

  #bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}

  #bodycenter#dv1{float:left;width:280px;}

  #bodycenter#dv2{float:right;width:420px;}

  两行两列

  #header{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}

  #bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}

  #bodycenter#dv1{float:left;width:280px;}

  #bodycenter#dv2{float:right;width:420px;}

  三行两列

  #header{width:700px;margin-right:auto;margin-left:auto;}

  #bodycenter{width:700px;margin-right:auto;margin-left:auto;}

  #bodycenter#dv1{float:left;width:280px;}

  #bodycenter#dv2{float:right;width:420px;}

  #footer{width:700px;margin-right:auto;margin-left:auto;overflow:auto;clear:both;}

  单行三列

  • 相关推荐
  • 大家在看
  • 和平精英ss11赛季什么时候开始 ss11赛季具体上线日期时间

    和平精英目前还是在SS10赛季中,但是不少玩家已经在期待下一个SS11赛季了,很多玩家还不清楚S11赛季什么时候开始,下面就来为大家详细的介绍一下。

  • 和平精英SS10赛季手册奖励内容汇总 SS10赛季手册全部内容一览

    和平精英在10月13日上线了SS10赛季的赛季手册,很多玩家还不清楚这次的赛季手册的奖励内容是什么,下面就来为大家详细的介绍一下。

  • RHFITNESS任和参展第38届体博会,诚邀您的莅临

    2020 年 9 月 28 日,第 38 届中国国际体育用品博览会(以下简称“ 2020 体博会”)将在国家会展中心(上海)举行。本届体博会是疫情防控工作进入常态化后国内举办的首场综合性国际体育用品展会,吸引了超过 1000 家企业共聚上海。 RHFITNESS任和品牌将携带旗下多款智能跑步机、走步机,参展本届体博会,为观展人员带来更智能、澎湃的健身体验。升级机型、智能触控……汇聚各类智能特色新品。 RHFITNESS任和品牌定位于中高端家用运动?

  • 长安CS55 PLUS新增车型售9.29万元起:发动机热效率达40%

    9月23日消息,长安汽车官方宣布,旗下紧凑型SUV——CS55 PLUS蓝鲸版新增3款车型,提供手动和自动可选,售价区间为9.29-11.39万元。CS55 PLUS蓝鲸版可以看做是CS75 PLUS的缩小版,

  • Bluehost SSD VPS主机真实详细评测数据

    VPS主机其价格优势相对独立服务器来说是非常有吸引力的,很多站长一般都会将VPS主机作为建站的首选,尤其是外贸行业,站群推广行业。虚拟主机可能在权限方面没有VPS主机高,独立IP配置可能也相对来说比较少,这也导致VPS主机成为了主流的建站空间。那么我们在选择VPS主机时,应该要考虑哪些因素呢?本文针对VPS主机做一个详细的评测,主要选择的产品是Bluehost SSD VPS云主机,下面具体分析。1、价格外贸行业目前压力也比较大,尤?

  • 玖富受邀香港银行学会(HKIB)和香港电脑学会(HKCS) 主持网络研讨会

    2020年9月14日,玖富集团受香港银行学会(HKIB)和香港电脑学会(HKCS)邀请,参与主题为“虚拟银行如何在传统银行模式下突围而出”的网络研讨会。玖富集团、玖富国际董事总经理陈颖峰为活动进行全程主持。本次网络研讨会由香港银行学会(HKIB)和香港电脑学会(HKCS)在香港举办,围绕“虚拟银行如何在传统银行模式下突围而出”的主题展开线上研讨,分享了虚拟银行如何在金融科技时代满足客户需求,如何在不断探索的商业模式中保持灵活性?

  • 苹果中国应用商店下架RSS阅读器应用

    据外媒报道,苹果正在从中国区应用商店中下架的两款RSS阅读器应用,分别为Fiery Feeds 和 Reeder ,以遵守旨在阻止非法内容的有关规定。

  • 《自然》子刊发表金斯瑞cPass™ sVNT Kit重要数据

    日前,全球著名科学杂志《自然》子刊Nature Biotechnology上发表了一篇重大技术创新发明论文。该文章领衔通讯作者是美国杜克大学医学院和新加坡国立大学Duke-NUS联合新发传染病研究所主任、全球领先的病毒传染病研究科学家王林发教授。凭借国际领先的蛋白和抗体试剂研发能力,金斯瑞已与王林发教授团队达成全球商业化合作,并从Duke-NUS获得全球独家性商业授权,还为王教授在研究阶段提供了所有重要的试验试剂,论文中对金斯瑞全球

  • SpaceX、蓝色起源和Dynetics的月球着陆器通过美国宇航局审查

    9月27日消息,据国外媒体报道,美国太空探索技术公司SpaceX、蓝色起源和Dynetics的月球着陆器通过了美国宇航局(NASA)的审查。完成对蓝色起源、Dynetics和SpaceX拟议的月球着陆器的“认证基准审查”,对于人类着陆系统(HLS)和Artemis项目来说是重要的一步。据悉,美国宇航局的Artemis项目旨在2024年前将宇航员送回月球,而月球着陆器是该项目的关键部分,该着陆器将携带两名宇航员(其中一名是女性)前往月球。本周

  • WordPress.com新功能:可将所有博文内容转换为推文

    今年早些时候通过推文风暴(tweetstorms)这种更轻松的方式,WordPress.com 宣布允许用户以“折叠”的方式将多条推文嵌入到博文中。今天 WordPress.com 再推出了双向通道,用户只需要轻松点击几下,就能将现有的 WordPress 博客文章转换为推文风暴。

  • PC党喜迎春天:SSD还要再跌价至少两成

    过去快两年时间,SSD的价格一直在走低,很多用户借此机会用上了大容量固态盘。而根据统计机构TrendForce的最新预测,上述趋势还将延续,至少到圣诞采买季前都会如此。报告称,SSD主要部件闪

    PC
  • 企业想要吸引“回头客”?天威诚信SSL证书为您助力

    众所周知,对于企业来说,用户的个性化体验是其提高客户满意度的关键,但想要成功做到这一点,吸引更多的“回头客”,就必须访问个人数据。近年来,围绕第三方积累和使用个人数据的隐私问题已成为消费者关注的焦点。据Privitar的一项调查结果显示,虽然消费者依旧担心与公司共享个人数据,但企业仍然有机会发挥领导作用,通过保护客户数据来建立品牌忠诚度。调查显示,43%的消费者不知道他们是否曾与受数据泄露影响的企业合作过。?

  • Facebook Messenger迎来全新彩色新图标并增加新功能

    Facebook正在对其Messenger应用进行改造,为该应用引入了一个新的采用多彩渐变色的图标,而不是至今为止使用的简单的蓝色标志。新图标的灵感似乎来自于Instagram的图标,而Instagram的图标也是由Facebook拥有的。

  • PS5的SSD焊死在主板上 坏了就报废?别担心了 很难写死

    索尼PS5、微软XSX两款新一代主机已经发布,价格也基本一致,PS5在性能上这次要输一点,但PS5的SSD性能是个亮点,5.5GB/s的速度比XSX的2.4GB/s高出一倍。然而,大家有了新的担心。这两天天索尼

    PS5
  • Facebook在Instagram和Messenger上推出跨平台信息传递功能

    Facebook在整合旗下各个消息平台方面迈出了迄今为止最大的一步,允许Messenger和Instagram上的部分用户在应用之间互相发消息。除了推出跨平台消息,Instagram还将对其DM系统进行重大改革,将扩展从Messenger中获取的功能。

  • DNF真理的意识之棺超详细攻略 真理的意识之棺boss处理机制

    DNF的希洛克的P2阶段的无形之棺1界中有个真理的意识之棺地下城很多玩家还不清楚怎么打,下面就来为大家分享一下真理的意识之棺地下城中的三个boss处理机制攻略。

    dnf
  • 安信证书聚惠双节:SSL证书申请特价,还有礼品卡赠送

    2020 年的中秋节和国庆节是同一天,为了迎接“双节”的到来,国内领先的HTTPS解决方案服务商安信证书推出特价SSL证书申请活动,更有超值礼品卡赠送,小米10、华为P40 等商品等你来拿。今年中秋和国庆节在同一天,8天的长假让大家有足够的时间与家人团聚或者出去旅旅游。然而对网站运营人员来说,这个时候也是网站被攻击最频繁的,网站上的隐私数据极易被窃取。如何保障网站在节假日期间用户能够安全访问,给网站部署SSL证书是非常?

  • Intel 11代酷睿首测!PCIe 4.0 SSD直冲5GB/s

    AMD平台已经全面支持PCIe 4.0,Intel也正在慢慢跟上,比如此前发布的数据中心级SSD P7-P5500/P5600,以及面向轻薄本的Tiger Lake 11代酷睿,而在桌面上,将于明年3月正式发布的同样隶属于11代酷

  • PS5 SSD被焊死在主板上 玩家担忧:史上最短命游戏机?

    本周,索尼公布了PS5主机的官方拆解视频,在一饱内部做工和用料的同时,玩家意外得知,PS5此番自带的内置SSD存储芯片是直接焊接于主板上。索尼倒是在PS5内部预留了M.2 2230/2242/2280扩展位,

    PS5
  • CSP2020 | 京东健康构建精神专科领域线上线下一体化服务闭环

    2020 年以来,新冠肺炎疫情在全球持续蔓延,由其导致的群体性心理问题也逐渐爆发。疫情防控常态化下,面对持续的压力以及社交模式的改变,人们的心理压力也随之增加,对于心理和精神健康的关注已刻不容缓。9 月 19 日- 25 日,以“重大突发公共卫生事件与精神医学”为主题的中华医学会第十八次全国精神医学大会暨第十四次全国儿童青少年精神医学大会(CSP2020)在广州举行。京东健康专科互联网医院部总经理金方怡应邀出席大会,并?

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议
  • 热门标签