仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 950|回复: 7
打印 上一主题 下一主题

[DIV+CSS] 来看看:CSS浮动结构基本

[复制链接]
精灵巫婆 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:16:00 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
可以增加更多的用户而不需要建立独立的版本。可以一次设计,随处发布。
基于浮动的结构使用了float(浮动)属性来并排定位元素,并在网页上创立列。能够使用这个属性来创立一个围绕在四周的效果,比方围绕在照片四周,可是当你把它使用到一个<div>标签上时,浮动就酿成了一个壮大的网页结构工具。float属性把一个网页元素挪动到网页(大概其他包括块)的一边。任何显现在浮动元素下方的HTML都在网页中上移,并围绕在浮动四周。


  float属性承受3种分歧值之一:left(左)、right(右)和none(无)。要把一张图片移到网页的右侧,能够创立这个类款式,并把它使用到<img>标签上:

.floatRight{float:right;}
  不异的属性使用到一个充斥内容的<div>标签上也能够创立一个工具条:

#sidebar{
float:left;
width:170px;}
  1-3展现了这两个款式的感化。

  注重:none值封闭了任何浮动,把元素像一个一般的没有浮动的元素一样定位。这只要已使用到元素的浮动有效时才有效。你大概有一个使用了特定类如“sidebar”的元素,这个元素浮动到右侧。但在网页中,你大概要带有这个类的元素不要浮动,可是又要安排在网页流以内,就如这个“注重”方框。经由过程用float:none创立一个更详细的CSS选择器能够避免这个元素浮动。


  如1-3的一个复杂的两列计划只必要几个步骤。

  1.把每列都包抄在一个带有ID大概class属性的<div>标签内里。

  在1-3中,列在右边工具条中的旧事项目被包抄在一个<div>内里――<divid="news">,而且主内容在另外一个div内里――<divid="main">。

  2.把工具条<div>浮动到右侧大概右边。

  当你利用浮动时,源按次(增加HTML到一个文件的按次)很主要。浮动元素的HTML必需显现在要包抄它的元素的HTML后面。

  1-4展现了3个两列的计划。右边的图表展现了网页HTML的源按次:给banner的一个<div>,前面随着sidebar的<div>,最初是maincontent的<div>。在右侧,你能够看到实践的网页结构。在HTML中sidebar在maincontent后面,因而它能够浮动到右边(上图,下图)大概右侧(中图)。


  3.给浮动的sidebar设定一个宽度。

  除非你正浮动一张带有预设宽度的图片,不然你应当一直给浮动设定一个宽度。如许,给浮动元素创立一个流动的尺寸,使扫瞄器给其他内容腾出了包抄该地位的空间。
  这个宽度多是一个流动的尺寸好比170px大概10em。你也能够对基于扫瞄器窗口宽度的弹性计划利用百分比。假如sidebar是20%宽,扫瞄器窗口是700px宽,那末sidebar将是140px宽。可是假如会见者调剂窗口尺寸为1000px,那末sidebar也增年夜为200px。流动宽度的sidebar更简单计划,由于你不用思索sidebar舒展时的一切分歧宽度。但是,百分比让你在两列之间坚持不异的比例,可使其更悦目。
  注重:当全体的网页计划是一个流动宽度时,sidebar的百分比宽度值也取决于包括元素的流动宽度。这个宽度不取决于窗口尺寸,当扫瞄器窗口改动尺寸时它不会产生改动。

  4.给maincontent增加一个右边距。

  假如sidebar比网页上的其他内容更短,来自立列的文本包抄sidebar的下方,损坏了两个并分列的展示效果。增加一个右边距即是大概年夜于缩进网页次要内容的sidebar宽度,发生一个第二列的幻觉效果:

#main{margin-left:180px;}
  特地说一下,使右边距比sidebar的宽度略年夜一般是个好主张:如许发生了一些空的空间――一个红色的――在两个元素之间。因而,当使用百分比来设定sidebar的宽度时,给右边距设定一个略微年夜一些的百分比值。

  没有需要往制止给maincontent的div计划宽度,由于扫瞄器只需扩展到合适现有的空间。即便要一个流动宽度的计划,也不用给主内容的div计划宽度,就如你将鄙人一节中所看到的。

在Div+CSS标准化的影响下,网页设计人员已经把这一要求作为行业标准。那么什么是Div+CSS标准?Div+CSS的标准化设计到底有什么好处?
第二个灵魂 该用户已被删除
沙发
发表于 2015-1-26 21:40:12 | 只看该作者
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心,坚持不懈的决心。在自己无法解决某些问题时,就需要虚心请教别人.
谁可相欹 该用户已被删除
板凳
发表于 2015-2-4 23:19:16 | 只看该作者
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心,坚持不懈的决心。在自己无法解决某些问题时,就需要虚心请教别人.
海妖 该用户已被删除
地板
发表于 2015-2-10 23:20:39 | 只看该作者
所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.
变相怪杰 该用户已被删除
5#
发表于 2015-3-1 17:59:09 | 只看该作者
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。
小魔女 该用户已被删除
6#
发表于 2015-3-10 22:58:57 | 只看该作者
学Dreamweaver技术的过程其实是一个增加信心的过程。
飘飘悠悠 该用户已被删除
7#
发表于 2015-3-17 16:08:07 | 只看该作者
直接用代码建立链接,如:可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。
老尸 该用户已被删除
8#
发表于 2015-3-24 12:13:41 | 只看该作者
不管老师做怎样的解释,而我却对它感到很是吃力,诸如里面有许多不知道的功能。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-22 20:15

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表