从0开始学编程(8)--(128)----学会了假满屏=弹性+固宽布局,理解了一点浮动

Jennycn

浏览: 92328 次
性别:
来自: 北京

最近访客更多访客>>

wincl36

openrace

s周萌

wushuitu986419

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

忙乎了一天,加熬倒半夜,还是没用css整出自己的首页来,我是说,没有那种意义的,非copy的完全自己动手做一个来

看了很多的源代码

不过,建立一个首页基本的div的架构倒也没问题了

给妈妈的电脑装了qq游戏,手写板真的很难用.还是要用鼠标

http://www.deman.cc/DIV+CSS/442.html

分享到：

<转>div+css 兼容ie6 ie7 ie8 ie9和Fire ... | <转>CSS命名规范大全

2011-10-23 17:55
浏览 795
评论(11)
分类:Web前端
查看更多

11 楼 Jennycn 2011-10-24

nkhanxh 写道

Jennycn 写道

nkhanxh 写道

建议不要管什么弹性布局。
据说淘宝什么的都是固定像素布局。
960宽度。

据说不值得。

可是,那我左边行程单,右边地图,然后,还想做一点提示性的信息,或者是别人写的和你的旅行相关的地方的旅行,那没地方放啊

我也不是要弹性布局,我就是要想满屏幕布局,是不是满屏幕的就是弹性的? 为啥不可以1400多宽度的?

你可以宽点，1024的，但是最好别自适应宽度，这是有成法可循的。
别和传统经验作对，除非必要。

我其实没理解,自适应是啥概念,就是不管宽度地设置为百分比是吧

那我可以不可以设置为1280呢

10 楼 nkhanxh 2011-10-24

Jennycn 写道

nkhanxh 写道

建议不要管什么弹性布局。
据说淘宝什么的都是固定像素布局。
960宽度。

据说不值得。

你可以宽点，1024的，但是最好别自适应宽度，这是有成法可循的。
别和传统经验作对，除非必要。

9 楼 Jennycn 2011-10-24

nkhanxh 写道

建议不要管什么弹性布局。
据说淘宝什么的都是固定像素布局。
960宽度。

据说不值得。

8 楼 nkhanxh 2011-10-24

建议不要管什么弹性布局。
据说淘宝什么的都是固定像素布局。
960宽度。

据说不值得。

7 楼 Jennycn 2011-10-24

理解了块级元素和内联元素，对理解浮动就容易多了。float是个重点，希望大家都能理解。上例中用float让元素向左浮动，在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素；且要指明一个宽度，否则它会尽可能地窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。

6 楼 Jennycn 2011-10-24

可以用css的display:inline将块级元素改变为内联元素，也可以用display:block将内联元素改变为块元素。

5 楼 Jennycn 2011-10-24

xhtml的块级元素(div)和内联元素(span)
块级元素：就是一个方块，像段落一样，默认占据一行出现；

内联元素：又叫行内元素，顾名思义，只能放在行内，就像一个单词，不会造成前后换行，起辅助作用。

一般的块级元素诸如段落<p>、标题<h1><h2>...、列表,<ul><ol><li> 、表格<table>、表单<form>、DIV<div>和BODY<body>等元素。而内联元素则如: 表单元素<input>、超级链接<a>、图像<img>、<span> ........ 块级无素的显著特点是：每个块级元素都是从一个新行开始显示，而且其后的无素也需另起一行进行显示。

4 楼 Jennycn 2011-10-24

搞了一晚上,才发现这句话无比重要:

div为块状元素，默认情况下占据一行的空间,要想让下面的div跑到右侧，就需要借助css的浮动来实现。

3 楼 Jennycn 2011-10-24

我今天做的这个,是基本在这个人这样的模板上改的,把自己logo和颜色加进去了.底下的文字去除,加了一排链接. 这篇叫,弹性+固宽布局.实际,就是一个假的满屏.

里面写的把页脚固定在底部,我学到了.

http://www.cnblogs.com/binyong/archive/2009/05/07/1451319.html

在当今用户的显示器越来越大的今天，之前的1024*768固宽布局有点越来越不合时宜，对大屏幕的用户而言，两侧空空的留白给人第一眼的印象是严重的屏幕浪费，作为网页设计师的你有责任给这一批用户一个良好的用户界面。

当然为了减少这种屏幕的浪费，采用弹性流体布局是最好的解决方案，它可以充分利用屏幕空间，无论你是多大分辩率的用户，都能尽情满屏展示内容。然而因为种种限制，目前的网页完全采用流体弹性布局条件还不具备(特别是浏览器厂商对标准的肆意蹂躏以及CSS标准的不完全支持等等)。作为夹在用户和厂商的中间者，我们只能以一种兼容的心态去适应两者的差距。所以，作为一种过渡的解决方案，有了这样一种布局：弹性+固宽布局。

这里所说有弹性，指的是背景去自适应屏幕宽度，而固宽呢，则是让正文内容无论在宽屏还是窄屏中都能自动居中。夹缝中求生存，以满足不同大小分辩率用户的需要。如下图所示的设计就是一个典型的样例。

图一

废话少说，言归正传，我们就来制作一个这样的布局结构：

首先构建结构层：

<div id="wrapper">
    <div id="main" class="clearfix">
        <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时只显示了一小块，而正文内容始终居中显示的。

为了演示效果，我们加入一些其它颜色调置，最后的样式如下所示：

2 楼 Jennycn 2011-10-24

难怪有程序员和我说,他们有时一天都调不好一个东西

真的很难

我都2天了,还没完全做出首页的界面来,现在是把页头和页脚做好了

中间的登录,还没有

1 楼 Jennycn 2011-10-24

ID和CLASS选择器的区别

id只能在页面中对应一个元素，就像我们的身份证号一样，每个人的都不一样；class为类，可以对应多个元素，比如说一年级三班的学生，它所对应的可能是10个20个学生。

id的优先级高于class，比如说今天三班的学生上体育课，小明留下来打扫卫生。那么三班的学生上体育课这是一个类，而小明打扫卫生这是个id，虽然小明也是三班的学生，但id高于class，所以小明执行打扫卫生的任务。

刚刚死活出现页脚,其他链接都是白色,就是有一个的颜色是蓝色的,搞了半天,才发现,就是这个class 和 id的问题,因为,我在class里全部是白色了,可是,这个蓝色的那个,我没有用那个class,直接是 a href=

其他的都是 a class=footer-item...所以,那个蓝色的就用的是footer这个id的,不过,奇怪的很,footer那个id里我规定的是白色的啊,倒是这个footer-item,我就没规定

搞不明白,这个dreamweaver有时出很奇怪的错

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论