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

时间 2020-07-03

标签 web 前端学习笔记 css 固定宽度布局栏目 HTML 繁體版

原文原文链接

1、单列布局：css

这是最简单的一种布局方式，之因此给出该示例，仍是为了保证本篇博客的完整性。html

<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。见以下效果图。ide

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

该布局也是常常会用到的，这里咱们先给出最终的效果图，而后再给出代码，以便你们都能现有一个感官上的认识，再看code就会容易不少。spa

下面为与上图匹配的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以后的效果。code

3、“1-3-1”固定宽度布局：xml

和上面的1-2-1固定布局同样，该布局也是常常会用到的，这里咱们仍是给出最终的效果图，而后再给出代码，以便你们都能现有一个感官上的认识，再看code就会容易不少。 htm

和上例相比，该示例在代码中只是简单的多出了一个div(#navi)，其CSS中也包含float:left。剩下就是其余相关div的宽度须要从新计算，计算方式等同于1-2-1给出的公式。下面为与改图匹配的HTML代码。blog

<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>

4、“1-((1-2)+1)-1”固定宽度布局：

根据下面的效果图，再结合前面的示例，相信你们可以很快理解该布局的含义。

与上图匹配的代码以下，与前面一个示例相比主要的变化是加入了#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设计完全研究》中的第十三章，书中的例子简明扼要、通俗易懂，所以选取部分主要内容与你们分享，同时也便于从此本身的在线查阅。