专栏首页HTML5学堂一步步实现静态页面布局

一步步实现静态页面布局

本文内容概要:

1 CSS选择器

2 盒模型

3 浮动

4 页面布局案例

5 课后习题

上周我们详解的讲解了一个网站的开发流程以及如何使用标签来进行一个网页的布局操作,那本周的这篇文章我们主要与大家分享的是如何去实现我们网页的布局,这也是作为前端的我们需要做的第一个大操作——实现网站的页面布局。本文主要讲解CSS的基本选择器、盒模型、浮动等知识点,并会提供一个布局案例来给大家做参考。

在上周,在文章的最后给大家留了一个网页结构的案例,通过使用讲解的所有标签来书写了一个页面,可是在那个页面里面,我们只能看到最初始的一些默认样式,倘若这时候我们需要给不同的标签、不同的段落使用不同的字体或者颜色,我们应该怎么去处理?首先我们考虑如何去写之前要考虑的一点是,我怎么准确无误的找到我需要改变的标签,那这时候我们需要借助一个手段来找到目标标签了——CSS选择器。

一、CSS选择器

到底什么是CSS选择器,了解它之前我们先来看看他的语法是怎么样的。代码如下:

.wrap  {
     width:  100px;
}
<div  class="wrap"></div>

代码解释:选择器后面加一对大括号,在大括号内设置样式属性与属性值。其中选择器通常是需要改变的HTML元素,每条声明由一个属性和一个属性值组成,且每个属性有一个值。属性与属性值用冒号分开,分号结束。

了解它的书写语法之后,通俗的理解选择器就是用来辅助我们查找页面中需要处理的标签的。那今天我们主要给大家介绍的是常见的三种选择器:ID选择器、类名选择器、标签名选择器。下面我们一个个来做一个了解。

1 ID选择器

在页面中唯一存在,好比我们的身份证号码,需要我们人为的定义,且优先级最高。

基本语法:#ID名 { }

具体例子:

#wrap  {
          width:  1200px;
          border-top:  10px  solid  #000;
}
<div  id="wrap"></div>

代码解释:id是div的属性,而wrap是id的属性值。Id相当于身份证,而wrap就是相当于身份证号码。

2 类名选择器

在页面中可以多次出现,有一个范围,比如一个班级编号,也需要我们自己去定义。

基本语法:.类名 { }

具体例子:

.wrap  {
          width:  1200px;
          border-top:  10px  solid  #000;
}
<div  class="wrap"></div>
<div  class="wrap"></div>

代码解释:class是div所在的班级,而wrap是这个班级的编号,而一个页面中多次使用班级编号就好比多个人在报备自己的班级一样。

3 标签名选择器

直接使用标签的名字做选择器,不需要定义,但是选择范围太大,不建议使用。

基本语法:标签名 { }

具体例子:

div  {
          width:  1200px;
          border-top:  10px  solid  #000;
}
<div></div>

代码解释:标签选择器就像人的性别一样,是与生俱来的特性。

二、盒模型

了解了我们页面布局上常使用的三种基本标签之后,我们已经可以找到需要做改变的标签了,但是具体我需要改什么,要怎么去改我们还是一无所知。

举个例子,大家在生活中会见到很多不同的三维立体物体,比如一个箱子,一个球。当我们想要知道这个物品的大小、宽高的时候都会去做一个测量。一样的,我们页面中的每一个标签也都是有宽高的,当然除了宽(width)、高(height)以外,我们的标签还具有几个属性,那就是外边距(margin)、边框(border)、内边距(padding)。这几个属性加上我们的宽、高就构成了要给大家讲解的第二大点——盒模型。

所谓的盒模型其实不难理解,举个例子:一个盒模型就相当于你从网上买鱼缸,鱼缸就是实质内容,width和height就是鱼缸的宽度与高度,而纸箱跟鱼缸之间的会使用泡沫来防止损坏,这个泡沫就是内边距(padding),外包纸箱的厚度是边框(border),在运输快递的过程中,纸箱跟纸箱之间的那个距离就是我们所说的外边距(margin)。具体这5个属性我们需要怎么去使用,一起来看看。

1 宽(width)和高(height)

宽高是设置内容区域的大小。

代码例子:

<style>
    .wrap  {
         width:  600px;
         height:  800px;
    }
</style>
<div  class="wrap"></div>

代码解释:定义一个类名为wrap的div的宽度是600像素,高度是800像素。

2 边框(border)

边框的分开书写的方式:

border-width表示边框的粗细

border-style表示边框的样式

border-color表示边框的颜色

例如:1像素实线红色边框

<style>
    .wrap  {
        border-width:  1px;  //  边框大小1像素
        border-style:  solid;  //  实线边框
        border-color:  red;  //  边框颜色为红色
    }
</style>
<div  class="wrap">HTML5学堂</div>

边框有四个方向,如果想要给某一个方向单独设置的了话,可以使用border-top|border-right|border-bottom|border-left。除此你也可以使用border同时对四个方向的边框一起设置样式。

例如:左侧边框3像素实线蓝色

<style>
          .wrap  {
                    border:  3px  solid  blue;
          }
</style>
<div  class="wrap">HTML5学堂</div>

3 内边距(padding)

内边距是内容区与边框之间的距离。

padding的缩写方式:

//  表示四个方向的padding值都为10px;
padding:  10px;
//  第一个值表示上下边距各为10px,第二个值表示左右边距各为20px; 
padding:  10px  20px;    
//  第一个值表示上边距为10px,第二个值表示左右边距各为20px,第三个值表示下边距为30px;

padding:  10px  20px  30px;
//  表示上边距10px,右边距20px,下边距30px,左边距40px。 
padding:  10px  20px  30px  40px;    

除了上述的设置方法之外,也可以单独设置:padding-top|padding-right|padding-bottom|padding-left。

4 外边距(margin)

外边距是元素与元素之间的距离。在正常情况下,如果两元素横向排列,两元素之间的距离是两元素之间margin相加之和,如果两元素纵向排列,两元素之间的距离是取两元素之间margin的最大值。

它的书写方式与内边距一样,大家参考上面的内边距书写即可,这里就不再进行叙述了。但是外边距有一个很好用的特性在这里与大家分享一下。

块元素水平居中:

设置块元素的width;添加margin: 0 auto;

详情见案例:

<style>
    .wrap  {
        width:  600px;
        margin:  0  auto;
    }
</style>
<div  class=“wrap">HTML5学堂</div>

上周我们讲解了HTML标签,了解到块元素标签在页面中是默认一行展示的,倘若这时候我的页面中需要几个块元素标签并排放置,展示在同一行上,我们要怎么办?这就涉及到我们接下来讲解的东西了,一起来继续学习哈!

三、 浮动

1 什么是浮动

float中文就是指浮动,浮动通常是用在浮动布局上,我们通过CSS定义float让HMTL元素向左或者向右(靠)浮动。

2 为什么要浮动

每个div的特点处于同一行,而布局时常常需要将块并排进行布局,那么此时我们要实现模块并排的布局所以需要浮动。

3 浮动原理

我们就把页面中的一块区域比作水槽。需要浮动的元素比作一块积木。如果给元素(积木)设置了float属性,水槽里就有水了,元素(积木)首先应该向上浮起来。如果设置的是float:left;向左浮动,那么元素(积木)从右边向上浮起来到水面,然后向左浮动到水槽的左边。如果给元素设置的是float:right;向右浮动,那么元素先从左边浮起到水面,然后向右浮动到水槽的右边。以此类推。都是按照这种规律,不管有几个元素。

4 浮动基本语法

float有四个属性值,none、left、right。none指不浮动,left指元素左浮动,right指元素右浮动。

5 如何浮动

将我们需要的块设置float属性,如以下代码:

<style>
    .wrap  div  {
        float:  left;  //设置div向左边浮动,实现两个div并排展示
        width:  100px;
        height:  100px;
        background:  #ccf;
    }
</style>
<div  class="wrap">
     <div></div>
     <div></div>
</div>

四、案例介绍

学习完今天的几大类知识点后,我们可能都有了一个大致的了解,但是真实的页面布局操作到底是怎样的,我们通过下面的这个案例再来一起回顾一下吧。具体的案例代码可以到文章末尾获取。

<!doctype  html>
<html>
<head>
  <meta  charset='UTF-8'>                          
  <title>HTML5Course</title>
  <link  rel="stylesheet"  type="text/css"  href="reset.css">
  <style>
    .wrap  {
      height:  1200px;
      width:  1250px;
    }
    .test  {
      float:  left;
      width:  250px;
      height:  220px;
    }
    .test6  {
      float:  left;
      width:  850px;
      height:  300px;
    }  
    .test7  {
      float:  right;
      width:  400px;
      height:  400px;
    }  
    .test8  {
      float:  left;
      width:  300px;
      height:  350px;
    }  
    .test9  {
      float:  left;
      width:  550px;
      height:  350px;
    }  
    .test10    {
      float:  right;
      width:  400px;
      height:  400px;
    }  
    .test11  {
      float:  left;
      width:  850px;
      height:  150px;
    }
    .test12  {
      float:  left;
      width:  1250px;
      height:  100px;
    }
  </style>
</head>
<body>
  <div  class="wrap">
    <!--  此处的style="background:  #feccff"只是用来设置背景色的  -->
    <div  class="test"  style="background:  #feccff"></div>
    <div  class="test"  style="background:  #999999"></div>
    <div  class="test"  style="background:  #ffcccb"></div>
    <div  class="test"  style="background:  #ccccff"></div>
    <div  class="test"  style="background:  #fe0000"></div>
    <div  class="test6"  style="background:  #01cc00"></div>
    <div  class="test7"  style="background:  #0000fe"></div>
    <div  class="test8"  style="background:  #feccff"></div>
    <div  class="test9"  style="background:  #ffcc00"></div>
    <div  class="test10"  style="background: #fe0000"></div>   
    <div  class="test11"  style="background:  #999999"></div>
    <div  class="test12"  style="background:  #feccff"></div>
  </div>
</body>
</html>

代码的展示效果:

五、课后作业

使用今天所学的知识点完成下图的布局:

PS:关于课程案例的代码,如果需要下载可以前往GitHub:https://github.com/iceswan/htmlDemo

本文分享自微信公众号 - HTML5学堂(h5course-com),作者:HTML5学堂

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-05-02

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 传统企业站开发 - 页面布局

    前几期我们讲解了HTML+CSS的基本知识点,也带着大家分析过一些案例。从简单的页面结构到页面布局的实现,再到页面的优化。我们学习到的东西挺多的,但是在实战开发...

    HTML5学堂
  • 传统企业站开发 - 模块开发(二)

    上周我们讲解了页面模块的制作,详情可见:传统企业站开发 - 模块开发,我们到底如何更好的实现模块的制作,小编这边继续给大家举一个例子来进行讲解。那今天我们为大家...

    HTML5学堂
  • 如何清除浮动

    如何清除浮动 大家都知道,浮动会对文档产生影响,具体来看看会对文档产生什么影响? 清除浮动后的效果: ? 未清除浮动后的效果: ? 实例代码(未清除浮动): ...

    HTML5学堂
  • JavaScript事件与例子(三)

    两个例子,好友选中效果和左侧右侧子菜单 一、好友选中效果 可以通过设置属性的方式判断当前是否被选中,也可以通过获取当前元素的颜色从而得知当前元素状态是否被选中,...

    二十三年蝉
  • Hexo博客之butterfly主题优雅魔改系列(持续更新)

    相信在这之前,大家肯定看过网上的各种魔改教程。但是这些魔改教程基本上千篇一律,都是一种方式,大量修改模板(主题源文件)。这种方式的好处就是简单快速且直接,缺点就...

    Dreamy.TZK
  • 响应式绿色环保网页

    王凡汎
  • 你不知道的 CSS 文档流技巧,让布局更简单

    看到这两个案例时,你可以先短暂的想想平时都是如何实现的,很多同学的答案应该是这样的。

    六小登登
  • div嵌套盒子模型

    标准盒模型尺寸的计算 盒子模型的实际宽度:width+左右padding+左右border 盒子模型的实际长度:width+上下padding+上下border

    阮键
  • (2019)[前端]面试题[6]:水平垂直居中方法

    如果已知子元素宽高度,那么transform: translate(width/2,height/2);一样的效果。

    无道
  • 个人总结(css3新特性)

    css3这个相信大家不陌生了,是个非常有趣,神奇的东西!有了css3,js都可以少写很多!我之前也写过关于css3的文章,也封装过css3的一些小动画。个人觉得...

    守候i

扫码关注云+社区

领取腾讯云代金券