网页布局基础

Posted 缥缈一叶舟

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了网页布局基础相关的知识,希望对你有一定的参考价值。

网页布局基础

    简介     

    什么是网页布局?
    网页布局是网页制作的基础,使用DIV+CSS布局网页是基础中的基础。三种基本布局方式:流式布局,浮动布局,绝对定位布局

    网页设计的特点:1:网页宽度可变  2头+内容主体(根据需要分栏)+页脚(不重要的内容)   对长度设置百分比可实现网页自适应

    W3C标准包括结构化标准语言,表现标准语言,行为标准语言,倡导结构,样式,行为分离。

    CSS中,存在三种定位机制:标准文档流,浮动,绝对定位。

    标准文档流:从上到下,从左到右输出文档内容,由块级元素和行级元素组成。

    浮动:float属性left(左浮动)  right(右浮动) none(不浮动)   元素会左移或右移,直至碰到容器为止。

    关于浮动的详细介绍参考我转载的《CSS浮动-float/clear》

    绝对定位: position属性 拥有三种定位方式 1.静态定位(static) 2.相对定位(relative) 3.绝对定位(absolute  fixed(固定定位))

    参考我前面的《CSS基础》有详细解释。

    相对定位的特点:
   1.相对自身原有位置进行偏移  2.仍处于标准文档流中,会占据原来的空间位置  3.拥有偏移属性和z-index属性,即空间层叠现象。

    绝对定位特点:
    1.建立以包含块为基准的定位  2.完全脱离了标准文档流   3.随即拥有偏移属性和z-index属性
    未设置偏移量时:如position:absolute;
    1.无论是否有已经定位的祖先元素(一个元素设定了相对定位或者绝对定位,就是已经定位的元素),都会保持在元素的初始位置,宽度随着内容变化。
    2.脱离标准文档流
    设置偏移量时:如position:absolute;top:20px;left:50px;
    1.没有已定位的祖先元素
    ①会以根元素<html>为偏移的参照基准
    2.有已定位的祖先元素
    ①会以最近的已定位祖先元素作为参照基准

    盒子模型:网页布局的基础,由四部分组成:边框(border) 外边距(margin) 内边距(padding)  盒子中的内容(content) 盛放网页中的图片,内容,音视频等。    

     盒子模型的立体图片,从第一层到第五层依次为:border、content+padding、background-image、background-color、margin。 

     运用盒子模型制作下图:盒子模型制作        

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>几米简介</title>
 6     <link rel="stylesheet" type="text/css" href="css/style.css"><!--导入外部CSS样式-->
 7 </head>
 8 <body>
 9     <div class="content book">  <!--导样追加-->
10         <img src="images/book1.jpg" width="80" height="80">
11         <img src="images/book2.jpg" width="80" height="80">
12         <img src="images/book3.jpg" width="80" height="80">
13         <img src="images/book4.jpg" width="80" height="80">
14         <img src="images/book5.jpg" width="80" height="80">
15     </div>
16 </body>
17 </html>
html代码
img{
    margin:10px 18px;
    border:1px solid #b1adad;
}
.content{
    border:4px solid #badbdb;
    padding:44px 15px 15px;
    width:700px;
}
.book{
    background: url(../images/t_book.gif) no-repeat #eff9f9;    /*特别注意引用*/

}
*{
    margin:0;
    padding: 0;   /* 消除浏览器设置的外填充和内填充 */
}
CSS代码

     心得:    

   1.引用外部CSS样式须在<head></head>中添加代码<link rel="stylesheet" type="text/css" href="CSS路径">

    2.关于路径(重要):  .\\   表示项目文件所在目录之下的目录。
                              ..\\ 表示项目文件所在目录向上一级目录下的目录。
                              ..\\..\\表示项目文件所在目录向上二级目录之下的目录。

    3.*{margin:0;padding: 0;   /* 消除浏览器设置的外填充和内填充 */}  消除浏览器默认的标签外填充和内填充    

    自动居中一列布局案例 

     掌握三个技能点: 标准文档流,块级元素,margin属性-设置自动居中

      图1图2

       心得:图1三个层每层都把页面撑满了,为页面自动居中,给三个块设置一个包裹层wrap   #wrap{width:700px;margin:0px auto;} 

       auto会自动根据浏览器的宽度自动设置两边的外边距。原理:(浏览器的宽度-外包含层的宽度)/2=外边距   如果想让页面自动居中,当设置了margin属性为auto时,不能再设置浮动或绝对定位属性。 

<body>
    <div id="wrap">
    <div id="header"></div>
    <div id="mainbody">
    <div class="content book">  <!--导样追加-->
        <img src="images/book1.jpg" width="80" height="80">
        <img src="images/book2.jpg" width="80" height="80">
        <img src="images/book3.jpg" width="80" height="80">
        <img src="images/book4.jpg" width="80" height="80">
        <img src="images/book5.jpg" width="80" height="80">
    </div>
    </div>
    <div id="footer"></div>
    </div>
</body>

CSS   块级元素宽会继续父级元素宽,自适应     
#header{
    width:100%;
    height:200px;
    border:1px solid red;
}

#mainbody{
    width:100%;
    height:200px;
    border:1px solid black;
}
#footer{
    width:100%;
    height:200px;
    border:1px solid blue;
}
#wrap{width:770px;margin:0 auto;}
View Code

   浮动布局案例 - 横向多列布局

    主要应用技能:float属性-使纵向排列的块级元素,横向排列。

                        margin属性-设置两列之间的间距。

    下图为未设置浮动前样式:

     添加float属性使黑色和绿色块并列排列,为黑色块和绿色快添加代码:

    .left{width:800px;background: black;height:200px;float:left;}
    .right{width:140px;background: green;height:300px;float: left;} 

      可见,受到浮动影响的有两部分,第一部分是mainbody的父包含块,第二部分是紧随后面的元素(版权部分)。父层未设置浮动,两个子元素设置了浮动,父层高度无法扩展了

      为mainbody清除浮动影响:清除浮动有两种做法:1 没撑开的元素设置:overflow:hidden; 2 跑上去的元素设置clear:both;

当父包含块缩成一条时;用clear:both方法清除浮动无效;它一般用于紧邻后面的元素的清除浮动。这时可以用第二种方法:父包含块增加移除属性overflow:hidden。

     <div>块高度一般不要设置。

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
     *{margin:0;padding: 0;} 
     #swap{background: #00C;margin:0 auto;width:960px;}
     #header{background:#F30; width:100%;}
     #mainbody{background:#fc0; width:100%;overflow:hidden;/*继承了父包含块的宽度*/}
     #footer{background:#639; width:100%;}
     .left{width:800px;background: black;height:200px;float:left;}
     .right{width:140px;background: green;height:300px;float:right;}/*一般间距控制在10-20px*/
    </style>
</head>
<body>
<div id="swap">
    <div id="header">头部</div>
    <div id="mainbody">
        <div class="left"></div>
        <div class="right"></div>
    </div> 
    <div id="footer">版权部份</div>
</div>
</body>
</html>
View Code


    绝对定位布局案例 - 绝对定位实现横向的两列或者多列布局

    absolute实现横向两列布局不常用,主要用于一列固定宽度,另一列宽度自适应的情况。
    应用技能:父元素相对定位,relative    自适应宽度元素绝对定位(子元素),absolute
    注意:固定宽度列的高度>自适应宽度的列(否则浮动撑不起固定列)

 

#mainbody {
         width:100%;
         position:relative;
         margin-top:20px;
}

#sidebar {
    width:180px;
    padding-bottom:10px;
}

#content {
position:absolute;
margin-left:200px;
top:0;  /*不设置的话会保留原位置*/

网页布局之结构和表现原则        

   1、先按照结构和语义编写代码;
   2、然后进行CSS样式设置;
   3、减少HTML与CSS契合度。

   真正意义上的结构与表现分开的思想,就是高级思路的思想。   

  结构与表现的分离:
  text-indent:使文本缩进到想要的位置。
  只是一行简短文字数字,可以用段落排版的思路来“定位”,即用text-indent:**px 缩进来达到目的。
  如果设置一个极小的负值,则可以在浏览器上隐藏文本,却又能被搜索引擎搜索到

  1、拿到一个网页的设计图时,首先关注网页的文字内容及内容模块之间的关系,把重点放在编写html语义化的代码上,而不要过多的考虑设计图上的布局样式,等html按内容编写完以后再考虑样式如何实现,力求不改变样式结构的基础上完成要求的视觉效果。语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用!
  2、利用margin属性来移动设置html结构.margin可以是负值,通过负值,可以使该内容进行移动!实现四个方向的移动。在结构(HTML)和样式(css)中,可以先把内容通过HTML写出来,再利用margin移动位置,实现排版,降低样式和结构的耦合,并且减少代码。

 所以在做设计图的时候,也可以先单纯的考虑需要搭建的主要内容,以及放的位置,然后再想他的样式风格。力求在不改变html结构的情况下用css调整想要的效果

  设置图片内边距后:  为什么设置了内边距背景图就显示出来了呢?
    根据CSS盒子模型,一个元素,从上到下分为边框,内容和内边距,背景图,外边距,背景颜色,共5个层次.开始时,因为没有设置内边距,盒子内部尺寸等于内容的尺寸,因此,处于第二层的内容将处于第三层的背景图遮挡住.设置了内边距之后,盒子的内部空间被扩展,第二层的内容不再占据整个盒内空间,空余处的背景图也就被显示出来了! 

1 body{ margin:0;}
2 div{background:#460E29;width:700px;padding:20px}
3 img{background:url(http://img.mukewang.com/5385ac820001905201440133.jpg);}
4 </style>
5 </head>
6 <body>
7 <div><img src="http://img.mukewang.com/5385acb000013b0d00950095.jpg" /><img src="http://img.mukewang.com/5385acb000013b0d00950095.jpg" /><img src="http://img.mukewang.com/5385acb000013b0d00950095.jpg" /><img src="http://img.mukewang.com/5385acb000013b0d00950095.jpg" /> </div>
8 </body>
View Code

实践:导航条菜单的制作

     1.垂直菜单的制作    一般都使用 “ul\\li” 来制作“菜单导航条”    要点:基本的样式清除: *{margin:0;padding:0}
            无序列表圆点去除: ul{list-style:none}
            链接下划线去除: a{text-decoration:none}
            文本缩进标签 text-indent 不会影响总体宽度(padding会)
            需要将a标签设置为块元素,才能设高宽、hover效果 代码:a{display:block}
            hover格式 a:hover{}
           

<style type="text/css">
        *{
            margin:0;
            padding:0;
            font-size: 14px;
        }
        ul{
            list-style: none;
            width: 100px;
        }
        a{
            text-decoration: none;display: block;height: 30px;
            line-height: 30px;
            margin-bottom: 1px;
            width:100px;
            background: #ccc;
            text-indent: 20px;
        }
        a:hover{
            background: orange;
        }
    </style>
</head>
<body>
<ul> 
    <li><a href="#">首    页</a></li>
    <li><a href="#">新闻快讯</a></li>
    <li><a href="#">产品展示</a></li>
    <li><a href="#">售后服务</a></li>
    <li><a href="#">联系我们</a></li>
</ul>
</body>
View Code

     2.水平菜单的制作

     水平菜单的html结构与上面的垂直菜单完全相同,只是css样式有所变化。

     与垂直菜单相比
     1、li添加了float属性(主要)
     2、ul的宽度限制去掉了(主要)
     3、a的text-indent换成了text-align

    3.1伸缩菜单的制作(改变鼠标经过的高度)

    通过设置背景,改变外观样式

    通过a:hover,可以为菜单增加交互效果

     菜单<li>浮动后,<li>脱离文档流,导致<ul>将失去高度和宽度;如果需要对<ul>进行整体背景设置,首先要给<ul>定义宽、高。     

a{display:block;height:30px;text-align:center; line-height:30px; width:120px; background-color:#ccc;}
a.on, a:hover{ color:#fff;background-color:#F60;height:40px; line-height:40px;margin-top:-10px;}

   3.2水平伸缩菜单的制作(可以后学习)   

  水平方向伸缩菜单:
  javascript
  1、window.onload //DOM执行完以后在执行其下代码
  2、document.getElementsByTagName(\'a\');  //获取所有的a标签
  3、object(a).length  //说的是a标签的个数
  4、onmouseover、onmouseout  //鼠标移入移出
  5、clearInterval(this.time);  //实行动画前要先清除之前的动画 避免动画累加
  6、setInterval(function(){},30);  //每30毫秒 实行一下此函数
  7、This.offsetWidth+8+"px";  //当前的宽度+变宽的速度  
  jQuery:
 1、首先要引入jQuery再写script标签及jq代码 <script type="tt/js" src="....min.js"></script><script> jq代码 </script>
 2、$(\'a\').hover()  //选择所有a标签 jq封装的hover方法
 3、hover方法自带移入移出方法 function(){},function(){}
 4、$(this).stop().animate({"width":"160px"},200);  //实行当前动画前先停掉上一个动画;自带移入移出动画animate 宽度发生变化 延迟200毫秒

   导航条菜单制作总结
 1、用无序列表构建菜单;ul/li
 2、垂直菜单转变为水平菜单:float:left;
 3、在制作圆角菜单时,背景图片贴在<a>标签上; -------> 雪碧图的应用--- background-position
 4、在制作改变高度的伸缩菜单时,实现高度向上延伸的技巧: ----> margin-top用负值;
 5、用JS制作水平伸缩菜单时,“this”代表当前的<a>标签。

          

以上是关于网页布局基础的主要内容,如果未能解决你的问题,请参考以下文章

网页布局基础

CSS 网页布局基础

网页布局及响应式

如何通过单击片段内的线性布局从片段类开始新活动?下面是我的代码,但这不起作用

汇总css布局模型和常见代码缩写与长度单位

Java Web基础 网页开发过程