美文网首页
静态页个人心得(1)

静态页个人心得(1)

作者: 黑莓小宝闪电朵朵 | 来源:发表于2018-09-23 23:32 被阅读0次

    今天来说一下自己写静态页时的心得和一些前提准备。
    以下面这个图为例:
    首先在拿到一个页面时,不要着急看内容,首先要看的是这个结构如何。
    一般页面的结构是这样的


    主体结构

    注:借图->大前端

    首先咱们先来分析一下这个结构图,这个图写的很清楚,一般页面大体就是这样的一个结构,我们可以去除掉不是很重要的,只留下最简单的3个结构header main footer这三个部分是页面最根本的元素,不管你写什么东西,这三块都是必不可少的。
    现在来看一下这次的正主,这个页面就是把结构图清楚的表达了出现。
    当我看到这个页面时我可能想到以下几点:
    1.结构
    2.布局
    3.样式
    4.细节

    1. 结构
      首先是header main footer然后navheader里。大致结构是这样
    <header>
      <nav></nav>
    </header>
    <main>
      <article></article>
      <aside></aside>
    <main>
    <footer>
    </footer>
    
    1. 布局
      header里是左右布局
      main里是左右布局
    2. 样式结构
      整体颜色:黑白灰
      aside宽度固定
      article宽度不固定
      article 上下有边距
      articleaside有左右边距
      ......
    3. 细节
      整体有内边距
      h1标签要有
      aside有box-shadow
      article有box-shadow
      .....
      示例图
      如果你能读到这里,那么恭喜你,你可能会发现再看到这些页面时不会有手足无措的感觉。希望我的这几点建议,可以帮助到看这篇文章的你。

    相关文章

      网友评论

          本文标题:静态页个人心得(1)

          本文链接:https://www.haomeiwen.com/subject/crwqoftx.html