首页 > 代码库 > 网页布局.....待更(三大阶段，预计二周内更完)

网页布局.....待更(三大阶段，预计二周内更完)

2024-09-15 06:47:45   217人阅读

网页布局基础

       简介

       1.什么是网页布局
       网页布局是网页制作的基础，使用DIV+CSS布局网页是基础中的基础。
       2.流式布局，浮动布局，绝对定位布局。相关知识点：标准文档流，盒子模型，float属性position属性等。

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

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

       标准文档流

       特点：从上到下，从左到右输出文档内容

       由块级元素和行级元素组成

       块级元素：从左到右撑满页面，独占一行  触碰到页面边缘时，会自动换行。

       行级元素：能在同一行内显示，不会改变html文档结构。

       盒子模型：网页布局的基础，由四部分组成：边框(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="http://www.mamicode.com/CSS路径">

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

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

     自动居中一列布局案例 

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

      技术分享技术分享

       心得：图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


      b. 浮动布局案例 - float属性/解决浮动影响的方法
      c.绝对定位布局案例 - 绝对定位实现横向的两列或者多列布局。

 

网页布局.....待更(三大阶段，预计二周内更完)


联系
我们