仓酷云

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

[DIV+CSS] 来一发怎样举行CSS结构

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

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

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

x
属性值就追加上去,重复的属性值就以最后一个为准。这里要注意的是,样式的先后不是根据页面上应用的名字顺序,而是样式表里的样式顺序。
HTML的范围性迫使计划师们往开辟更伶俐的体例来使他们的网页更美妙。已往最经常使用的工具是<table>标签,它本是用来创立电子数据表――好比由数据行和列构成的信息显现表。可是计划师们却用HTML的表格来创立一种用来构造网页内容的脚手架(见1-1)。但是因为<table>标签原本不是要用于结构的,因而计划师们不能不常常以各类不平常的体例来利用这个标签――好比把一个表格放在另外一个表格的单位内里――仅仅为了失掉他们想要的效果。这类办法的事情量很年夜,增添了大批分外的HTML代码,并使得前面要修正计划很难。可是在CSS呈现之前,那就是网页计划师们所具有的统统举措。


  假如你已习气于利用<table>标签,那末当你入手下手利用CSS举行结构时,必需开展一种新的头脑。起首,忘记行和列(使用表格时的一种主要的看法)。没有列跨度、行跨度和格子状的表格布局在CSS中是找不到的。但是,你能够把一个<div>标签当做一个表格单位。有了表格单位,<div>标签就是把你要的内容定位在网页地区的一个逻辑地位。别的,如你所见,CSS计划常常把一个div嵌套在另外一个div内里,就像你把表格嵌套在表格内里来取得特定的效果一样――可是,侥幸的是,CSS办法只用少很多的HTML代码。

  壮大的<div>标签
  TheMighty<div>Tag

  不管利用表格仍是CSS,网页结构都是把年夜块的内容放进网页的分歧地区内里。有了CSS,最经常使用来构造内容的元素就是<div>标签。如第18页所述,<div>标签是没有固有格局化属性的一个HTML元素(除扫瞄器把这个标签当做前后有换行的块以外);反之,它被用来标识元素的一个逻辑组合大概网页中的一个分区。

  你将代表性地把一年夜块属于一同的HTML包抄在一个<div>内里。1-1中包括logo和导航栏的元素占有了网页顶部,因而用一个<div>标签把它们包抄起来很成心义。最少,你要给网页的一切次要地区包括<div>标签,比方横幅、次要内容地区、工具条、页脚,等等。可是它也大概把一个大概更多的div包在一个<div>内里。一种最经常使用的办法就是把<body>标签内里的HTML包在一个<div>内里。然后能够经由过程把CSS使用到包装<div>,设置基本的页面属性。你能够给网页内容设定一个全体的宽度,设置右边距和右侧距,大概把一切网页内容在屏幕的两头居中。

  一旦已把<div>标签放在了得当的地位上,再给每一个<div>标签增加一个类大概ID,酿成你分离对每一个<div>界说款式的句柄。关于只呈现一次和构成网页的基础构建块的网页部位,计划师们一般利用一个ID。一个网页横幅地区的<div>标签看起来大概像如许:<divid="banner">。你能够对一个ID每页只利用一次,因而当有一个屡次显现的元素时,就用一个类取代。假如你有几个定位照片和照片申明的div时,能够创立一个款式像如许:<divclass="photo">。

  有了相似这些的款式,就能够定位林林总总的网页元素了。使用CSS的float属性,你能够定位分歧的内容块给一张网页的右边大概右侧(大概一个包括块好比另外一个<div>的右边大概右侧)。

  至理名言
  更多并不是更好

  固然div关于CSS结构很主要,但也别对你的网页滥用div。一个罕见的圈套是信任你必需把一张网页中的统统都包抄在一个<div>标签内里。假定你的主导航栏是一个链接的无序列表。因为它是一个主要的元素,你大概会探索用一个<div>来把它围起来:<divid="mainNav"><ul>...</ul></div>。可是当<ul>标签探囊取物时,就没有需要往增加一个<div>了。只需<ul>包括次要的导航栏链接,就只需增加ID款式给这个标签:<ulid="mainNav">。过剩的<div>只是一些没有需要的代码。
样式的调整更加方便。内容和样式的分离,使页面和样式的调整变得更加方便。
透明 该用户已被删除
沙发
发表于 2015-1-18 05:48:36 | 只看该作者
AdobeDreamweaver(前称MacromediaDreamweaver)是Adobe公司的著名网站开发工具。
愤怒的大鸟 该用户已被删除
板凳
发表于 2015-1-26 21:40:12 | 只看该作者
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。
爱飞 该用户已被删除
地板
发表于 2015-2-4 23:12:10 | 只看该作者
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。
5#
发表于 2015-2-10 23:16:07 | 只看该作者
滚动条)层属性--溢出(visible/hidden/scroll/auto)
再现理想 该用户已被删除
6#
发表于 2015-3-1 17:59:09 | 只看该作者
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上
不帅 该用户已被删除
7#
发表于 2015-3-10 22:58:57 | 只看该作者
学Dreamweaver技术的过程其实是一个增加信心的过程。
飘灵儿 该用户已被删除
8#
 楼主| 发表于 2015-3-17 16:08:07 | 只看该作者
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。
简单生活 该用户已被删除
9#
发表于 2015-3-24 12:13:41 | 只看该作者
是当我和赵丽芬崔明艳老师进行交流后,很快就了解了还不太清楚的内容和并不了解的知识(像布局表格、绘制布局单元格等)。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-5-17 01:19

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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