DIV教程之网页制造技能:DIV宽度100%DIV居中

只看该作者 · 发表于 2015-1-15 22:58:36

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

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

x

你的设计不仅仅用于web浏览器，也可以发布在其他设备上，比如PowerPoint。
破洛洛文章简介：div宽度100%，外部元素浮动，div居中.
01.<divclass="pagelist_b">
02.<divclass="page">
03.<spanclass="totlerecord">5</span>
04.<spanclass="totlepages">1/5</span>
05.<spanclass="current">1</span>
06.<ahref="#">2</a>
07.<ahref="#">3</a>
08.<ahref="#">4</a>
09.<ahref="#">5</a>
10.<ahref="#">></a>
11.</div>
12.</div>

在这个布局中，“.pagelist_b”是内部框架，100%宽度。而目标，是为了让“.page”块可以居中显现。但是由于“.page”块中的节点其实不流动，没法确认其终极宽度，再者，“.page”块中的内容必要界说特别的款式，而被附上“display:block;”属于将其块元素化，而招致“.page”中的内容没法完善的居中。
这两天俄然偶然中看到网上的相干文章，想起了position:relative;（绝对浮动）的弄法。大抵十分普通的申明一下这里的思绪：“.page”向右浮动50%，是之外层“.pagelist_b”的宽度为尺度的；内层（如A,SPAN）向左浮动50%，是以层“.page”的宽度为尺度的，这里无需界说内层的宽度。如许算是一个小技能，让“.page”居中了。也补足了float没有center属性的缺点。假如没法一般显现，记得在page_b加多一句overflow:visible;
01.<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02.<htmlxmlns="http://www.w3.org/1999/xhtml">
03.<head>
04.<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
05.<metahttp-equiv="Content-Language"content="utf-8"/>
06.<title>newdocument</title>
07.<metaname="robots"content="all"/>
08.<metaname="generator"content="editplus"/>
09.<metaname="author"content="hayden@yeah.net,hayden"/>
10.<metaname="keywords"content=""/>
11.<metaname="description"content=""/>
12.<linkrel="stylesheet"rev="stylesheet"href=""type="text/CSS"media="all"/>
13.<scripttype="text/javascript"src=""></script>
14.<styletype="text/css">
15.*{word-wrap:break-word;margin:0;padding:0;}
16.
17..pagelist_b{width:100%;height:80px;text-align:center;}
18..page{position:relative;left:50%;float:left;}
19..pagespan{position:relative;left:-50%;border:1pxsolid#ddd;display:inline;float:left;padding:06px;height:30px;line-height:30px;margin:2px;}
20..pagespan.totlerecord{}
21..pagespan.current{cursor:pointer;}
22..pagea:link,.pagea:visited{border:1pxsolid#ccc;display:inline;float:left;padding:06px;height:30px;line-height:30px;margin:2px;text-decoration:none;position:relative;left:-50%;color:#666}
23..pagea:hover{border:1pxsolid#666;}
24.
25.</style>
26.</head>
27.<body>
28.
29.
30.<divclass="pagelist_b">
31.<divclass="page">
32.<spanclass="totlerecord">5</span>
33.<spanclass="totlepages">1/5</span>
34.<spanclass="current">1</span>
35.<ahref="#">2</a>
36.<ahref="#">3</a>
37.<ahref="#">4</a>
38.<ahref="#">5</a>
39.<ahref="#">></a>
40.</div>
41.</div>
42.
43.</body>
44.</html>
</p>
Div全称division意为“区分”使用DIV的方法跟使用其他tag的方法一样。

只看该作者 · 发表于 2015-1-26 22:29:53

由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

只看该作者 · 发表于 2015-2-5 05:15:21

难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

只看该作者 · 发表于 2015-2-11 07:00:29

所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

只看该作者 · 发表于 2015-3-2 00:30:21

Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

只看该作者 · 发表于 2015-3-11 03:39:18

运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

仓酷云 · 发表于 2015-3-17 21:33:16

Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

只看该作者 · 发表于 2015-3-25 07:09:00

HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

		自动登录	找回密码
密码			立即注册

[DIV+CSS] DIV教程之网页制造技能:DIV宽度100%DIV居中

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

相关帖子