手把手教你用套路写页面（HTML、CSS初中级前端教学）（第一节）

时间 2019-11-08

标签手把手套路页面 html css 初中前端教学一节栏目 HTML 繁體版

原文原文链接

不少人不太会写 HTML 和 CSS，这里教你如何分析页面结构，如何使用各类标准套路写出各类页面。css

以 HTML 和 CSS 为主，部分动态内容加入 js 实现。前端

全部技巧所有简单暴力，没有兼容性问题（除非你要兼容IE8），可是很是好用。react

源代码：github.com/qq20004604/…
做者微信：qq20004604
讨论（QQ群）：387017550

目录：webpack

一、肯定页面内容
二、环境准备
三、第一次页面区块划分思路
四、第一次の实现
套路1：上下固定中自适应布局
4.一、先搞定root样式文件
套路2：定高不定宽，内有居中和相对最右侧的元素
4.二、搞定header
套路3：文字居中，大小不定但高度固定
4.三、搞定footter
套路4：不定高，总体居中，左右分栏
4.四、搞定content
4.五、总结
to be continue...

一、肯定页面内容

二、环境准备

脚手架：webpack3；
前端框架：React；
css预处理器：less、postcss；
其余：babel、eslint、file-loader、style-loader、css-loader、uglifyjs-webpack-plugin、url-loader；

采用我本身以前配好的脚手架，见github连接：github.com/qq20004604/…git

能够直接fork该脚手架，而后在该脚手架基础上进行开发；github

三、第一次页面区块划分思路

前注解释：web

div#box，表示 <div id='box'></div>
div.content-box，表示 <div class='content-box'></div>

原图分为三块：api

header：Crulse和头像所在的那个部分；
content：中间的左边栏和右边主要内容区域；
footter：下方的copyright；

整体思路：浏览器

上下部分固定，中间高度可变，宽度都为100%；
中间区域固定宽度，左和右定宽不定高；

详细思路以下：bash

总体被 div#app 所包含，撑满 100% 的页面区域，position设置为relative；
div#app 下包含 div#header，div#content，div#footter 三部分，三部分的position都设置为 absolute；
div#header 设置为 top：0，left：0，with：100%，height设置为实际高度；
div#footter 思路一样，bottom：0，left：0，with：100%，height设置为实际高度；
div#content的top和bottom设置为header和footter的height，left和right设置为0；

而后，div#content再划分为两块，具体思路以下：

div#content下包含 div.content-box，宽度设置为定宽。而 div#content 的 overflow-x 属性设置为auto，目的是当中间过窄时，出现滚动条；
div.content-box 下含 div.aside和div.article。具体须要注意的状况，等下一次页面模块划分时再进行分析；

四、第一次の实现

于 src/page 文件夹下新建 main 文件夹，并在该文件夹下新建 app.jsx。

此时 jsx 部分写法以下：

render() {
    return <div id={s.root}>
        <Header/>

        <Content/>

        <Footter/>
    </div>;
}
复制代码

所以要引入（固然你也要新建）三个不一样的jsx文件和根容器的样式文件，以下：

import s from './style.less';
import Header from './header.jsx';
import Content from './content.jsx';
import Footter from './footter.jsx';
复制代码

套路1：上下固定中自适应布局

以这个页面为例，是标准的上下固定中自适应布局。

这种布局其实很简单。

第一，先引入reset.css统同样式，确保不一样浏览器的样式是一致的。

第二，DOM结构以下，容器内包含上中下

<div id='app'>
    <Header/>

    <Content/>

    <Footter/>
</div>
复制代码

第三，最外层DOM（<div id='app'>）的思路是，撑满整个可视区域做为基准容器，并设置绝对定位，为子容器提供定位参考。

这种写法的好处是，咱们能够肯定最外层DOM必定的撑满的，若是咱们使用body标签做为最外层DOM，由于默认样式的不一样，咱们是不肯定的。

样式以下：

#root {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
复制代码

第四，上和下这2个固定。

经过设置绝对定位的属性，使得上和下，分别位于基准容器的最上面和最下面。

样式以下：

#header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
}

#footter {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
}
复制代码

第五，中自适应。

自适应的前提是不须要设置高度，所以一样适用绝对定位，经过配置 top 和 bottom 属性，使得高度自适应。

样式以下：

#content {
  position: absolute;
  top: 80px;
  bottom: 40px;
  left: 0;
  width: 100%;
}
复制代码

总结：

此时你有了一个上下固定中自适应布局而且宽度100%可视区域的布局了。而且他们都带有定位属性，你下面的布局能够基于这三块进行开发了。

4.一、先搞定root样式文件

核心有两步，其余都不过重要（也就是说，不重要的地方你就本身搞定咯）：

@import '~common/css/reset.css';

#root {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
复制代码

分别表示引入reset.css（这个我预置在脚手架里了，只要引入就行，全局生效）；

和设置根容器撑满整个可视区域。

套路2：定高不定宽，内有居中和相对最右侧的元素

这也是一个比较典型的布局。

以本页面为例：

header部分里有居中和相对最右侧必定距离两个DOM；
footter部分有居中元素；
content区域也能够认为，左右两个分栏他们做为整体来看，也是居中的；

写法思路以下：

第一，父容器设置定位属性，不论是absolute或者是relative均可以；

第二，居中元素的思路是很简单。

以左右居中为例，经过 left:50% 的属性，使其相对于最左侧半个容器宽度的距离。而后再经过 transform: translateX(-50%); 往回拉自身元素宽度 50% 的距离。这样天然就实现左右居中。

若是上下居中，思路是同样的，无非是设置 top:50% 和 transform: translateY(-50%);

第三，相对于最右侧必定距离的元素，这个思路也很简单。

该元素设置绝对定位：position: absolute;；
配置 right 属性，设置该元素最右侧距离父容器最右侧的距离；
设置该元素的宽高；
有必要的话，设置上下居中（参考上面第二条的方法）；

一样，若是是相对于左侧，顶部，底部，思路是一样的，只是换个css属性罢了。

4.二、搞定header

观察效果：

中间文字居中；
右侧头像和content区域内容最右边靠左一点；

参考上面的【套路2：定高不定宽，内有居中和相对最右侧的元素】，咱们将整个结构变为：

中间文字和右侧头像做为总体，放在一个DIV下，这个DIV相对于整个header居中；
中间文字相对于他父DIV，居中；
右侧头像，相对于父DIV，靠右设置位置；

总体思路以下：

div#header内部设一容器div.header-box，固定宽度（同div#content区域宽度）且居中，相对定位；
居中的正常相对于div.header-box居中，右侧头像绝对定位并设置right的值来控制位置；
因为头像应该是可配置的，而且有默认值，所以头像的路径放在根路径中，有默认值（一个默认图片的地址），并将该值传到 div#header，做为头像 img 标签的 src 属性；

具体代码见 src/page/main/header.jsx 相关

图片路径写法：

须要注意的是，js和css中，图片路径的写法是不一样的。

具体来讲，以我这个webpack的配置为例，

一、一样图片放在 src/img 文件夹下，css中的写法是：

background-image: url('~@/logo.png');
复制代码

根据的配置是：

{
    loader: 'css-loader',
    options: {
        modules: false,
        minimize: true,
        sourceMap: false,
        alias: {
            '@': resolve('src/img'), // '~@/logo.png' 这种写法，会去找src/img/logo.png这个文件
            'common': resolve('src/common')
        }
    }
}
复制代码

二、js中的写法是：

state = {
    // 注意，css和js中，图片路径写法不一样
    avatarIcon: require('@/img/default-avatar.png')
}
复制代码

根据的配置是：

resolve: {
    // 省略后缀名
    extensions: ['.js', '.jsx'],
    alias: {
        '@': resolve('src'),
        'component': resolve('src/components'),
        'common': resolve('src/common'),
        'api': resolve('src/api'),
        'page': resolve('src/page'),
        'assets': resolve('src/assets')
    }
} 
复制代码

固然，也能够写成：avatarIcon: require('../../img/default-avatar.png')

三、若是图片会上传到CDN，有固定路径，那就更好写了，直接写成绝对路径便可；

四、图片放在static文件夹下，css能够直接写为：background-image: url('/default-avatar.png')

js的话能够写为：

state = {
    avatarIcon: 'static/default-avatar.png'
}
复制代码

套路3：文字居中，大小不定但高度固定

文字居中是一个很常见的需求，但状况又比较多。所以咱们采用固定套路来实现。

要求描述：

父容器 footer，不定高不定宽；
文字的 font-size 已知，但里面文字内容数量不定（也就是说宽度不固定），但要求上下居中，左右居中；

考虑到要求，所以将文字包含在一个div中，总体考虑，因而HTML代码以下：

<div id='footter'>
    <div className='footter-copyright'>
        @Copyright 2019 company
    </div>
</div>
复制代码

思路：

将全部文字视为一个总体，不设 div 宽度，让文字大小天然撑起来 div 的宽度和高度；
经过套路2，让该文字所在div上下左右居中；
需求完成；

css以下：

.footter-copyright {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* 下面三个属性的px值保持一致
     * 另外，除了第三个，其余2个能够省略，但我习惯明确写其高度和行高
     * 好处是，若是有特殊需求，调起来很方便。
     */
    height: 16px;
    line-height: 16px;
    font-size: 16px;
}
复制代码

另外一种写法（已知高度固定）：

.footter-copyright2 {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    height: 40px;
    line-height: 40px;
    font-size: 16px;
  }
复制代码

4.三、搞定footter

footter 明显就更简单了，只有一段居中文字而已。参考【套路3：文字居中，大小不定但高度固定】实现他。

套路4：不定高，总体居中，左右分栏

这也是一个典型的状况。

总体居中，宽度固定（能够观察，包括淘宝在内绝大多数页面，中间区域都是定宽的）；
居中部分左右分栏，且宽度固定；
这里额外状况是，左右分栏之间有距离，但其实没什么影响；
左中右三层分栏和左右两层分栏的写法是没有区别的；

思路以下：

不考虑极端状况的显示效果（好比用户让浏览器可视区域高度特别小）；
三层DIV：
祖父容器提供定位属性；
父容器定宽，左右居中，且高度撑满祖父容器；
左右分栏在该父容器下，且高度撑满，位置分别相对于父容器的左右，宽度定宽配置；

特殊状况：

例如总体是撑满整个页面的（即不定宽）；
此时通常是左侧定宽，右侧不定宽；
左侧写法同上面；
右侧写法其实没啥变化，无非是经过 right 和 width 定位，变为经过 left 和 right 定位；
此时右侧内部应写成可响应模式，而后使用浮动布局（即 float）；

4.四、搞定content

参考上面的【套路4：不定高，总体居中，左右分栏】

须要注意的是，这个中间总体看似只有1170px宽，实际应该是1200px宽，右侧分栏的左右分别有 30px 宽度的空隙（这种须要经验和交互进行沟通，或者本身量一下）。

所以右侧分栏实际应该多写一层div，即实际内容区域应在右侧分栏div区域内。

代码以下（更详细代码参考个人github，连接见【4.5】）：

@aside-bk-color: #2d4054;

#content {
  position: absolute;
  top: 80px;
  bottom: 40px;
  left: 0;
  width: 100%;
  background-color: #f3f3f3;

  .content {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 1200px;
    height: 100%;

    .aside {
      position: absolute;
      left: 0;
      width: 270px;
      height: 100%;
      background-color: @aside-bk-color;
    }

    .article-box {
      position: absolute;
      left: 270px;
      right: 0;
      height: 100%;
      padding: 0 30px;

      .article {
        position: relative;
        width: 100%;
        height: 100%;
        // 带上颜色，用于肯定该位置是正确的
        background-color: #fff;
      }
    }
  }
}
复制代码

4.五、总结

此时，页面效果图以下：

源代码：github.com/qq20004604/…
做者微信：qq20004604
讨论（QQ群）：387017550

五、左侧边栏

to be continue...

其余

问一下有没有长三角地区【国企】招前端开发、全栈开发，有的话麻烦私聊