静态页个人心得(1)
2018-09-23 本文已影响0人
黑莓小宝闪电朵朵
今天来说一下自己写静态页时的心得和一些前提准备。
以下面这个图为例:
首先在拿到一个页面时,不要着急看内容,首先要看的是这个结构如何。
一般页面的结构是这样的
主体结构
注:借图->大前端
首先咱们先来分析一下这个结构图,这个图写的很清楚,一般页面大体就是这样的一个结构,我们可以去除掉不是很重要的,只留下最简单的3个结构header
main
footer
这三个部分是页面最根本的元素,不管你写什么东西,这三块都是必不可少的。
现在来看一下这次的正主,这个页面就是把结构图清楚的表达了出现。
当我看到这个页面时我可能想到以下几点:
1.结构
2.布局
3.样式
4.细节
- 结构
首先是header
main
footer
然后nav
在header
里。大致结构是这样
<header>
<nav></nav>
</header>
<main>
<article></article>
<aside></aside>
<main>
<footer>
</footer>
- 布局
header
里是左右布局
main
里是左右布局 - 样式结构
整体颜色:黑白灰
aside
宽度固定
article
宽度不固定
article
上下有边距
article
和aside
有左右边距
...... - 细节
整体有内边距
h1
标签要有
aside
有box-shadow
article
有box-shadow
.....
示例图
如果你能读到这里,那么恭喜你,你可能会发现再看到这些页面时不会有手足无措的感觉。希望我的这几点建议,可以帮助到看这篇文章的你。