从0开始学编程(8)--(128)----学会了假满屏=弹性+固宽布局,理解了一点浮动
忙乎了一天,加熬倒半夜,还是没用css整出自己的首页来,我是说,没有那种意义的,非copy的完全自己动手做一个来
看了很多的源代码
不过,建立一个首页基本的div的架构 倒也没问题了
给妈妈的电脑装了qq游戏,手写板真的很难用.还是要用鼠标
http://www.deman.cc/DIV+CSS/442.html <div id="header">
<div id="inheader"></div>
</div>
<div id="content"></div>
</div>
</div>
<div id="footer">
<div id="infoot"></div>
</div>
分析一下结构层，一个网页一般包括页头，内容区和页脚三大部分，我们将页头和内容放在一个容器层，取名为wrapper，而将页脚独立出来，取名为footer，为什么要这样设计，我们想让这个页脚在内容区不满一屏的情况下也是绝对居底的。其具体的实现原理可以参考这篇文章：《CSS Sticky Footer: 完美的CSS绝对底部》。
我们将wrapper和footer这两个容器设置100%的宽度，让它自动适应屏幕的宽度。并且也将header页头区域也设置成100%宽度。这样我们可以在页头和页脚中插入一张可以水平平铺的图片，使页头和页脚的背景在大屏幕下能水平充满整个屏幕空间。
作为正文内容，我们一般的做法是，当分辩率变大，让它居中显示，两侧留出空白。因为页头区域已经设置为100%宽度，所以我们在header中再添加一个容器层inheader，它来作为真正的页头文字内容的载体，我们再给它设置一个固定的宽度值，比如是960像素宽，然后让它自动居中。
#inheader{width:960px;height:110px; margin:0 auto; }
这样页头的正文浮动haeader的上层，这两个层可以设置不同的背景图片，形成一个叠加的页头效果，它能自动适应更大的屏幕分辩率。
同样的道理，页脚也可以采用这种方法来实现。
在上面的结构层，我在中间内容区没有采用这种方法，而是做了一点变通，我们可以看到在content这个内容区中，没有内嵌一个容器，而只有一个容器。如果我们为了让正文内容的两侧在大分辩率下两侧不显得太空洞，该怎么办呢，当然你可以采用页头和页脚的做法，在它的内容再加一个div。当然为了减少嵌套，我们可以采用变通的办法。我们可以将一张超大的图片加在body中背景中，并用background-position来定位居中显示这张图片，这样在内容区两侧的图片就显示出来了。
本博客就是一个具体案例，在大分辩率下看看本博客两侧图片，然后缩小窗口，就可以看到两侧图片在1024*768时只显示了一小块，而正文内容始终居中显示的。
为了演示效果，我们加入一些其它颜色调置，最后的样式如下所示：
4 楼 Jennycn 2011-10-24 搞了一晚上,才发现这句话无比重要:
div为块状元素，默认情况下占据一行的空间,要想让下面的div跑到右侧，就需要借助css的浮动来实现。 5 楼 Jennycn 2011-10-24 xhtml的块级元素(div)和内联元素(span)
块级元素：就是一个方块，像段落一样，默认占据一行出现；
内联元素：又叫行内元素，顾名思义，只能放在行内，就像一个单词，不会造成前后换行，起辅助作用。
一般的块级元素诸如段落<p>、标题<h1><h2>...、列表,<ul><ol><li> 、表格<table>、表单<form>、DIV<div>和BODY<body>等元素。而内联元素则如: 表单元素<input>、超级链接<a>、图像<img>、<span> ........ 块级无素的显著特点是：每个块级元素都是从一个新行开始显示，而且其后的无素也需另起一行进行显示。
6 楼 Jennycn 2011-10-24 可以用css的display:inline将块级元素改变为内联元素，也可以用display:block将内联元素改变为块元素。
7 楼 Jennycn 2011-10-24 理解了块级元素和内联元素，对理解浮动就容易多了。float是个重点，希望大家都能理解。上例中用float让元素向左浮动，在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素；且要指明一个宽度，否则它会尽可能地窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。
8 楼 nkhanxh 2011-10-24 建议不要管什么弹性布局。
据说淘宝什么的都是固定像素布局。
960宽度。
据说不值得。 9 楼 Jennycn 2011-10-24 nkhanxh 写道建议不要管什么弹性布局。
据说淘宝什么的都是固定像素布局。
960宽度。
据说不值得。
可是,那我左边行程单,右边地图,然后,还想做一点 提示性的信息,或者是别人写的和你的旅行相关的地方的旅行,那没地方放啊
我也不是要弹性布局,我就是要想满屏幕布局,是不是满屏幕的就是弹性的? 为啥不可以1400多宽度的? 10 楼 nkhanxh 2011-10-24 Jennycn 写道nkhanxh 写道建议不要管什么弹性布局。
据说淘宝什么的都是固定像素布局。
960宽度。
据说不值得。
可是,那我左边行程单,右边地图,然后,还想做一点 提示性的信息,或者是别人写的和你的旅行相关的地方的旅行,那没地方放啊
我也不是要弹性布局,我就是要想满屏幕布局,是不是满屏幕的就是弹性的? 为啥不可以1400多宽度的?
你可以宽点，1024的，但是最好别自适应宽度，这是有成法可循的。
别和传统经验作对，除非必要。 11 楼 Jennycn 2011-10-24 nkhanxh 写道Jennycn 写道nkhanxh 写道建议不要管什么弹性布局。
据说淘宝什么的都是固定像素布局。
960宽度。
据说不值得。
可是,那我左边行程单,右边地图,然后,还想做一点 提示性的信息,或者是别人写的和你的旅行相关的地方的旅行,那没地方放啊
我也不是要弹性布局,我就是要想满屏幕布局,是不是满屏幕的就是弹性的? 为啥不可以1400多宽度的?
你可以宽点，1024的，但是最好别自适应宽度，这是有成法可循的。
别和传统经验作对，除非必要。
我其实没理解,自适应是啥概念,就是不管宽度地设置为百分比是吧
那我可以不可以设置为1280呢
