web前端学习笔记(CSS固定宽度布局)

摘要:
PageContent这是一行文本,在布局框中显示为示例。最后,请注意:这两个都添加到#footer的CSS中。否则,如果本示例中的内容高度高于侧边高度,则页脚将被内容底部覆盖,因为左浮动的div不在标准流中。

一、单列布局:

      这是最简单的一种布局方式,之所以给出该示例,还是为了保证本篇博客的完整性。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>固定宽度布局</title>
<style type="text/css">
#header,#pagefooter,#content {
    border: 1px solid red;
    margin: 10px auto 10px 10px;
    padding: 5px;
    width: 360px;
}
</style>
</head>
<body>
<div id="header">
    <h2>Page Header</h2>
    <p>
        这是一行文本,这里作为样例,显示在布局框中。<br/>
        这是一行文本,这里作为样例,显示在布局框中。 
    </p>
</div>
<div id="content">
    <h2>Page Content</h2>
    <p>
        这是一行文本,这里作为样例,显示在布局框中。<br />
        这是一行文本,这里作为样例,显示在布局框中。
    </p>
</div>
<div id="pagefooter">
    <h2>Page Footer</h2>
    <p>这是一行文本,这里作为样例,显示在布局框中。</p>
</div>
</body>
</html>

      从CSS代码可以看到,3个div的宽度都设置为固定值360像素,同时将margin设置为margin: 10px auto 10px 10px,从而实现了右侧好像有个弹簧,将他们全部挤到左侧,反之,如果想把他们全部挤到左侧,可以将margin设置为margin: 10px 10px 10px auto。见如下效果图。

web前端学习笔记(CSS固定宽度布局)第1张

 二、“1-2-1”固定宽度布局:

      该布局也是经常会用到的,这里我们先给出最终的效果图,然后再给出代码,以便大家都能现有一个感官上的认识,再看code就会容易很多。

web前端学习笔记(CSS固定宽度布局)第2张
      下面为与上图匹配的HTML代码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>布局固定宽度</title>
<style type="text/css">
div ,p, h2 {
    margin: 2px;
    padding: 5px;
}
#container {
    width: 612px;
    margin: 10px auto;
}
#header,#footer {
    width: 596px;
    border: 1px solid red;
} 
#content {
    float: left;
    width: 360px;    
    border: 1px solid red;
}
#side {
    float: left;
    width: 220px;
    border: 1px solid red;
}
#footer {
    clear: both;
}
</style>
</head>
<body>
<div id="container">
    <div id="header">
        <h2>Page Header</h2>
    </div>
    <div id="content">
        <h2>Page Content 1</h2>
        <p>对于一个网页设计者来说,HTML语言一定不会感到陌生,因为它是所有网页制作的基础。但是如果希望网页能够美观、大方,并且升级方便,维护轻松,那么仅仅HTML是不够的,CSS在这中间扮演着重要的角色。</p>
    </div>
    <div id="side">
        <h2>Side Bar 1</h2>
        <p>对于一个网页设计者来说,HTML语言一定不会感到陌生。</p>
    </div>
    <div id="footer">
        <h2>Page Footer</h2>
        <p>这是一行文本,这里作为样例,显示在布局框中。</p>
    </div>
</div>
</body>
</html>

      这里需要主要关注的是CSS中#content和#side都被设置为向左浮动float: left,二者的宽度相加等于总宽度,例如这里将它们的宽度分别设置为360px和220px。本例出于方便展示的目的,添加了padding/border/margin将各个div的边界显示的分离出来,这样#content和#side每个div的实际所占宽度均为自身宽度 + (5px + 5px) + border(1px + 1px) + margin(2px + 2px)。最后需要注意的是#footer的CSS中添加了clear:both,否则如本例content的高度高于side高度,footer将会被content的底部覆盖,这是因为float为left的div没有在标准流中。如下图为#footer去掉clear:both之后的效果。

web前端学习笔记(CSS固定宽度布局)第3张

三、“1-3-1”固定宽度布局:

      和上面的1-2-1固定布局一样,该布局也是经常会用到的,这里我们还是给出最终的效果图,然后再给出代码,以便大家都能现有一个感官上的认识,再看code就会容易很多。 

web前端学习笔记(CSS固定宽度布局)第4张      和上例相比,该示例在代码中只是简单的多出了一个div(#navi),其CSS中也包含float:left。剩下就是其他相关div的宽度需要重新计算,计算方式等同于1-2-1给出的公式。下面为与改图匹配的HTML代码。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>布局固定宽度</title>
<style type="text/css">
div, p, h2 {
    margin: 2px;
    padding: 5px;
}
div {
    border: 1px solid red;
}
#container {
    width: 788px;
    margin: 10px auto;
    border: 0;
}
#header,#footer {
    width: 772px;
}
#navi {
    float: left;
    width: 160px;
} 
#content {
    float: left;
    width: 360px;    
}
#side {
    float: left;
    width: 220px;
}
#footer {
    clear: both;
}
</style>
</head>
<body>
<div id="container">
    <div id="header">
        <h2>Page Header</h2>
    </div>
    <div id="navi">
        <h2>Navi Bar 1</h2>
        <p>对于一个网页设计者来说,HTML语言一定不会感到陌生,因为它是所有网页制作的基础。但是如果希望网页能够美观、大方,并且升级方便,维护轻松,那么仅仅HTML是不够的,CSS在这中间扮演着重要的角色。</p>
    </div>
    <div id="content">
        <h2>Page Content 1</h2>
        <p>对于一个网页设计者来说,HTML语言一定不会感到陌生,因为它是所有网页制作的基础。但是如果希望网页能够美观、大方,并且升级方便,维护轻松,那么仅仅HTML是不够的,CSS在这中间扮演着重要的角色。</p>
    </div>
    <div id="side">
        <h2>Side Bar 1</h2>
        <p>对于一个网页设计者来说,HTML语言一定不会感到陌生。</p>
    </div>
    <div id="footer">
        <h2>Page Footer</h2>
        <p>这是一行文本,这里作为样例,显示在布局框中。</p>
    </div>
</div>
</body>
</html>

四、“1-((1-2)+1)-1”固定宽度布局:

      根据下面的效果图,再结合前面的示例,相信大家能够很快理解该布局的含义。 

web前端学习笔记(CSS固定宽度布局)第5张 

       与上图匹配的代码如下,与前面一个示例相比主要的变化是加入了#left-container#right-container两个div。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>布局固定宽度</title>
<style type="text/css">
div, p, h2 {
    margin: 2px;
    padding: 5px;
}
div {
    border: 1px solid red;    
}
#container {
    width: 788px;
    margin: 10px auto;
    border: 0;
}
#header,#footer {
    width: 772px;
}
#left-container {
    float: left;
    width: 552px;
}
#navi {
    float: left;
    width: 160px;
} 
#content {
    float: left;
    width: 360px;    
}
#right-container {
    float: left;
    width: 204px;
}
#side {
    width: 188px;
}
#footer {
    clear: both;
}
</style>
</head>
<body>
<div id="container">
    <div id="header">
        <h2>Page Header</h2>
    </div>
    <div id="left-container">
        <div id="banner">
            <h2>Banner</h2>
            <p>对于一个网页设计者来说,HTML语言一定不会感到陌生,因为它是所有网页制作的基础。但是如果希望网页能够美观、大方,并且升级方便,维护轻松,那么仅仅HTML是不够的,CSS在这中间扮演着重要的角色。</p>
        </div><!-- end of banner -->
        <div id="navi">
            <h2>Navi Bar 1</h2>
            <p>对于一个网页设计者来说,HTML语言一定不会感到陌生,因为它是所有网页制作的基础。但是如果希望网页能够美观、大方,并且升级方便,维护轻松,那么仅仅HTML是不够的,CSS在这中间扮演着重要的角色。</p>
        </div>
        <div id="content">
            <h2>Page Content 1</h2>
            <p>对于一个网页设计者来说,HTML语言一定不会感到陌生,因为它是所有网页制作的基础。但是如果希望网页能够美观、大方,并且升级方便,维护轻松,那么仅仅HTML是不够的,CSS在这中间扮演着重要的角色。</p>
        </div>
    </div><!-- end of left container -->
    <div id="right-container">
        <div id="side">
            <h2>Side Bar 1</h2>
            <p>对于一个网页设计者来说,HTML语言一定不会感到陌生。</p>
        </div>
        <div id="side">
            <h2>Side Bar 2</h2>
            <p>对于一个网页设计者来说,HTML语言一定不会感到陌生。</p>
        </div>
    </div><!-- end of right container -->
    <div id="footer">
        <h2>Page Footer</h2>
        <p>这是一行文本,这里作为样例,显示在布局框中。</p>
    </div>
</div>
</body>
</html>

注:该篇博客源自《CSS设计彻底研究》中的第十三章,书中的例子简明扼要、通俗易懂,因此选取部分主要内容与大家分享,同时也便于今后自己的在线查阅。

免责声明:文章转载自《web前端学习笔记(CSS固定宽度布局)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇NLog使用方法Python多进程与多线程下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

圣杯布局和双飞翼布局区别

圣杯布局和双飞翼布局实现的都是两边侧栏宽度固定,中间宽度自适应,效果如下: 圣杯布局是由国外的Kevin Cornell提出的一个布局模型概念,在国内由淘宝UED的工程师传播开来布局要求:1.三列布局,中间宽度自适应,两边定宽2.中间栏要在浏览器中优先渲染3.允许任意列的高度最高4.用最简单的CSS、最少的HACK语句 双飞翼布局是经淘宝UED工程师针对圣...

CSS之多个div一行排列

  使多个div横着排的两种方法,一种是浮动float,一种是布局display   一、使用float   元素一旦浮动,脱离文档流(不占页面空间,后面未浮动元素会上前补位。   1、代码示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="...

Eclipse启动Tomcat时server.xml和content.xml自动还原问题

当我们在处理中文乱码或是配置数据源时,我们要修改Tomcat下的server.xml和content.xml文件。 但是当我们修改完后重启Tomcat服务器时发现xml文件又被还原了,修改无效果。 为什么会还原? Tomcat服务器在Eclipse中启动时,会自动发布Eclipse中部署的项目,但是我的项目是自己手动在外面部署的,Eclipse只认得在它里...

10大经典CSS3菜单应用欣赏

很多时候,我们的网页菜单需要个性化,从而来适应各种行业的用户视觉操作体验。本文将带领大家一起来欣赏10个非常经典的CSS3菜单应用,菜单涉及到动画菜单、Tab菜单、面包屑菜单等。 1、CSS3飘带状3D菜单 菜单带小图标 这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起...

五:HttpServletResponse对象

一、HttpServletResponse对象介绍 HttpServletResponse对象代表服务器的响应。这个对象中封装了向客户端发送数据、发送响应头,发送响应状态码的方法。查看HttpServletResponse的API,可以看到这些相关的方法。 1.1、负责向客户端(浏览器)发送数据的相关方法    1.2、负责向客户端(浏览器)发送响应头的相...

互动直播中的前端技术——即时通讯

前言 在疫情期间,上班族开启了远程办公,体验了各种远程办公软件。老师做起了主播,学生们感受到了被钉钉支配的恐惧,歌手们开启了在线演唱会,许多综艺节目也变成了在线直播。在这全民互动直播的时期,我们来聊聊互动直播中的即时通讯技术在前端中的使用。 即时通讯技术 即时通讯(Instant Messaging,简称IM)是一个实时通信系统,允许两人或多人使用网络实时...