一步步实现静态页面布局

本文内容概要:

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)

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据科学学习手札

(数据科学学习手札43)Plotly基础内容介绍

  Plotly是一个非常著名且强大的开源数据可视化框架,它通过构建基于浏览器显示的web形式的可交互图表来展示信息,可创建多达数十种精美的图表和地图,本文就将...

2354
来自专栏十月梦想

浮动

    将红色背景的div想左边漂浮,则原来的绿色div不显示是红色被遮挡在面。 

552
来自专栏AhDung

【C#】分享一个可灵活设置边框的Panel

---------------------------更新:2014-05-19---------------------------

551
来自专栏林德熙的博客

C# 对 byte 数组进行模式搜索

最简单的方法是进行数值判断,但是代码最少是使用Linq ,效率比较高是使用 Boyer-Moore 算法,下面就告诉大家几个算法的代码

251
来自专栏程序员互动联盟

【专业技术】CSS知识点总结

1、CSS指层叠样式表(Cascading Style Sheets) 2、使用CSS样式常见的三种方式: 1)<link href=".............

34710
来自专栏老马寒门IT

03-移动端开发教程-CSS3新特性(下)

1. CSS3动画 1.1 过渡的缺点 transition的优点在于简单易用,但是它有几个很大的局限。 transition需要事件触发,所以没法在网页加载时...

33613
来自专栏Web项目聚集地

CSS 3D的魅力

最近玩了玩用css来构建3D效果,写了几个demo,所以博客总结一下。 在阅读这篇博客之前,请先自行了解一下css 3D的属性,例如:transform-st...

604
来自专栏阮一峰的网络日志

CSS动画简介

现在,我很少写介绍CSS的文章,因为感觉网站开发的关键还是在服务器端。 但是,CSS动画除外,它实在太有用了。 ? 本文介绍CSS动画的两大组成部分:trans...

3138
来自专栏web前端教室

WEB前端架构(三)

先跟关注我的各位说声抱歉,快一周没更新了。 实在是因为太忙了,最近周末在忙装修的事,周内又要加班。 因为是新公司嘛,本来就忙,三天前又被临时抓去写一个手机微信上...

17610
来自专栏前端儿

CSS常见兼容性问题总结

浏览器的兼容性问题,通常是因为不同的浏览器对同一段代码有不同的解析,造成页面显示不统一的情况。

863

扫描关注云+社区