网页布局准则

  • A+
所属分类：Web前端
摘要

　　　　通过盒子模型，知道大部分html标签是一个盒子；　　　　通过css浮动，定位，可以让每个盒子排列成网页；
便宜好用的国外VPS推荐

 一、网页布局思路

　　　　通过盒子模型，知道大部分html标签是一个盒子；

　　　　通过css浮动，定位，可以让每个盒子排列成网页；

　　　　一个完整的网页是由标准流、浮动、定位一起完成布局的，每个都有自己专门的用法；

 

　1、网页布局准则

　　　　　　多个块级元素纵向排列找标准流；

　　　　　　多个块级元素横向排列找浮动；

　　　　　　为了约束浮动元素的位置，网页布局一般采用：

　　　　　　　　1、先用标准流的父元素上下排列，之后内部子元素采用浮动左右排列；

　　　　　　　　2、一个盒子浮动了，他的兄弟元素也浮动；

　　　　　　　　3、浮动的盒子只会影响浮动盒子后面的标准流，不影响前面的；

　　　　1). 标准流

　　　　　　可以让盒子上下排列 或者 左右排列，垂直的块级盒子显示就用标准流布局；

　　　　2). 浮动

　　　　　　可以让多个块级元素一行显示 或者 左右对齐盒子， 多个块级盒子水平显示就用浮动布局；

　　　　3). 定位

　　　　　　定位最大的特点是有层叠的概念，就是可以让多个盒子 前后 叠压来显示。 但是每个盒子需要测量数值。如果元素自由在某个盒子内移动就用定位布局；

 

　2、层级

　　　　　　通过z-index属性可以用来设置元素的层级，表示盒子摆放的前后次序；

      • 层级越高，越优先显示；

      • 只有元素开启了定位，z-index属性才可以使用；

      • 如果定位元素层级一样，则结构上 下面元素会盖住上面；

      • 父元素的层级再高，也不会盖住子元素；

 

　3、布局流程

　　　　　　为了提高网页制作的效率，布局时通常有以下的整体思路：

      • 必须确定页面的版心（可视区），测量可知；

      • 分析页面中的行模块，以及每个行模块中的列模块，页面布局的第一准则；

      • 一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置，页面布局第二准则；

      • 制作HTML结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要，所以，先理清布局结构，在写代码尤为重要，需要积累；

      • 然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。

 

　　　　　　注意：去掉列表默认的样式

　　　　　　无序和有序列表前面默认的列表样式，在不同浏览器显示效果不一样，而且也比较难看，所以，我们一般上来就直接去掉这些列表样式就行了。 代码如下

li { list-style: none; }

 　　

　　4、常见布局技巧

　　　　　　巧妙利用一个技术更快更好的布局：

　　　　　　　　1、margin负值的运用

　　　　　　　　2、文字围绕浮动元素

　　　　　　　　3、行内块的巧妙运用

　　　　　　　　4、CSS三角强化

 

　　　　　　　　　　1.让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框

　　　　　　　　　　2.鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index）

<style>     ul li {         float: left;         list-style: none;         width: 150px;         height: 200px;         border: 1px solid red;         margin-left: -1px; }     ul li:hover {         position: relative;         border: 1px solid blue;         /* 如果li有定位，则利用z-index提高层级 */         z-index: 1; } </style>

 

　　　　　　　　案例：盒子居中

<style>     * {         margin: 0;         padding: 0;         }      .box {          width: 300px;          height: 70px;          background-color: pink;          margin: 0 auto;          padding: 5px;         }      .pic {          float: left;          width: 120px;          height: 60px;          margin-right: 5px;         }      .pic img {          width: 100%         } </style>  <body>     <div class="box">         <div class="pic">             <img src="" alt="">         </div>     </div> </style>

 

二、CSS属性书写顺序

　　　　1、布局定位属性：display /position /float /clear /visibility /overflow

　　　　2、自身属性：width /height /margin /padding /border /background

　　　　3、文本属性：color /font /text-decoration /text-align /vertical-align /white-space /break-word

　　　　4、其他属性（CSS3）：content cursor /border-radius /box-shawdow /text-shadow /

background：linear-gradient...  .jdc {     display: block;     position: relative;     float: left;          width: 100px;     height: 100px;     margin: 0 10px;     padding: 20px 0;          font-family: Arial,"Helvetica Neue",Helvetica,san-serif;     color: #333;          background: rgba(0,0,0,.5);     border-radius: 10px; }

 

三、CSS高级技巧

　3.1、精灵图

　　　　1、由来：

　　　　　　一个网页中往往会应用很多小的背景图像作为修饰，当页面中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大的降低页面的加载速度；

　　　　2、目的：为了有效的减少服务器接收和发送请求的次数，提高页面的加载速度，提高了访问效率和用户体验，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧图）

　　　　3、核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器就只需要请求一次就可以了；

网页布局准则

　　　　4、使用精灵图核心：

　　　　　　（1）精灵技术主要针对于背景图片，就是把多个小背景图片整合到一张大图片中，这个大图片也称为 sprites 精灵图 或者 雪碧图 ；

　　　　　　（2）移动背景图片位置， 主要借助于背景位置来实现---background-position ；移动的距离就是这个目标图片的 x 和 y 坐标，注意网页中的坐标有所不同 ；

　　　　　　（3）一般情况下精灵图都是负值。（千万注意网页中的坐标： x轴右边走是正值，左边走是负值， y轴往下是正值，同理。）

 

　　　　5、优点：

      • 将多个图片整合为一个，浏览器只发送一次请求，就可以同时加载多个图片；提高了访问效率和用户体验；

      • 减小了图片的总大小，提高请求的速度，增加了用户体验；

 

　　　　6、缺点：

      • 图片文件还是比较大的。

      • 图片本身放大和缩小会失真。

      • 一旦图片制作完毕想要更换非常复杂。

　　　　　　　　此时，有一种技术的出现很好的解决了以上问题，就是字体图标 iconfont。

 

　3.2、字体图标

　　　　1、特点：字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

      • 轻量级：一个字体图标要比一系列的图像都小，一但字体加载了，图标就会马上渲染出来，减少服务器请求；

      • 灵活性：本质是文字，可以随意改变颜色，产生阴影，透明效果，旋转灯；

      • 兼容性：几乎支持所有的浏览器；

　　　　　　注意：字体图标不能代替精灵技术，只是对工作中图标部分技术的提升和优化；

　　　　

　　　　2、使用场景： 主要用于显示网页中通用、常用的一些小图标。

      • 结构和样式比较简单的小图标，就用字体图标；

      • 结构和样式复杂的小图片，就用精灵图；

　　　　

　　　　3、字体图标的下载：

　　　　　　（1） icomoon 字库 http://icomoon.io 国外服务器，打开网速较慢。

　　　　　　（2）阿里 iconfont 字库 http://www.iconfont.cn/ 包含了淘宝图标库和阿里妈妈图标库。可以使用 AI 制作图标上传生成。 重点是，免费

　　　　　　（3）awesome图标

 

　　　　4、字体图标的引入：

　　　　　　（1）icomoon文件解压后，将fonts文件夹复制到页面根目录下；

　　　　　　（2）在 CSS 样式中全局声明字体： 把这些字体文件通过css（style.css）引入到我们页面中。 （注意字体文件路径的问题 ）

@font-face {           font-family: 'icomoon';      src: url('fonts/icomoon.eot?7kkyc2');      src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),      url('fonts/icomoon.ttf?7kkyc2') format('truetype'),      url('fonts/icomoon.woff?7kkyc2') format('woff'),      url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');      font-weight: normal;      font-style: normal;   }

 

　　　　　（3）html标签内添加小图标

span {     content:'';     font-family:"icomoon";/* 这里面的字体需和 @font-face 里面的一致 */ }

　　原来的文件夹不要删，可以追加字体图标，在select.json里，直接生成最新的字体图标；

 

 

四、CSS 初始化

　　　　京东初始化，从 * ｛margin:0;padding:0｝开始；

　　　　不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容；

　　　　简单理解： CSS初始化是指重设浏览器的样式。 (也称为CSS reset）

　　　　比如：

　　　　　　黑体 9ED14F53

　　　　　　宋体 5B8B4F53

　　　　　　微软雅黑 5FAE8F6F96C59ED1

 

五、品优购项目规划

　　　　假如需要设计一款网页，工作流程如下：

　　　　用户提需求——美工PS设置原型图和效果图——前端 利用代码链接 做成静态网页（代码链接）——后台工程师改为动态网页（JSP动态服务器代码）；

网页布局准则

　　　　流程

      • 品优购项目整体介绍 （制作首页、列表页、注册页三个页面） 电商类网站

      • 品优购项目学习目的 （里面包含技术较多，能极大锻炼我们布局技术）

      • 开发工具以及技术栈 （切图用ps， 代码用Vscode，测试用chrome， 大量使用HTML5+CSS3）

 

　　1、品优购项目搭建工作

　　　　1、 需要创建如下文件夹：

名称 说明
项目文件夹 shoping
样式类图片文件夹，不经常更换 images
样式文件夹 css
产品类图片文件夹，经常更换 upload
字体类文件夹 fonts
脚本文件夹 js
名称 说明
首页 index.html
css初始化样式文件 base.css
css公共样式文件 common.css

　　　　有些网站初始化的不太提倡 * { margin: 0; padding: 0; }　　

　　　　比如新浪：

　　　　　　　　html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img{margin:0;padding:0}

 

　　2、模块化开发

　　　　所谓的模块化：将一个项目按照功能划分， 一个功能一个模块，互不影响 且重复使用；

　　　　代码也如此，有些样式和结构在很多页面都会出现，比如页面头部和底部，大部分页面都有。此时，可以把这些结构和样式单独作为一个模块，然后重复使用;

　　　　这里最典型的应用就是 common.css 公共样式。写好一个样式，其余的页面用到这些相同的样式;

　　　　common.css 公共样式里面包含版心宽度、清除浮动、页面文字颜色等公共样式。

 

　　3、网站 favicon 图标

　　　　favicon.ico 一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上。 目前主要的浏览器都支持 favicon.ico 图标。

      • 制作favicon图标

      • favicon图标放到网站根目录下

      • HTML页面引入favicon图标

 

　　　　　　1、制作favicon图标

　　　　　　　　（1）把品优购图标切成 png 图片。

　　　　　　　　（2）把 png 图片转换为 ico 图标，这需要借助于第三方转换网站，例如比特虫：http://www.bitbug.net/

　　　　　　2、favicon图标放到网站根目录下

 

　　　　　　3、 HTML页面引入favicon图标

　　　　　　　　（1）在html 页面里面的 <head> </head>元素之间引入代码。

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

 

 

 

　　4、网站 TDK 三大标签SEO优化

　　　　SEO（Search Engine Optimization）汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索 引擎内自然排名的方式。

　　　　SEO 的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提 高网站的知名度。 页面必须有三个标签用来符合 SEO 优化。

　　　　有SEO专门人员，标签由我们写；

 

　　　　网站TDK三大标签SEO优化

　　　　1、title 网站标题

　　　　　　title 具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判 断点。

　　　　　　建议：网站名（产品名）- 网站的介绍 （尽量不要超过30个汉字）

　　　　　　例如：

　　　　　　　　l 京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！

　　　　　　　　l 小米商城 - 小米5s、红米Note 4、小米MIX、小米笔记本官方网站

 

　　　　2、description 网站说明

　　　　　　简要说明我们网站主要是做什么的。

　　　　　　我们提倡，description 作为网站的总体业务和主题概括，多采用“我们是…”、“我们提供…”、“×××网 作为…”、“电话：010…”之类语句。

　　　　　　例如：

<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、 家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物 体验!" />

 

 

　　　　3、keywords 关键字

　　　　　　keywords 是页面关键词，是搜索引擎的关注点之一。

　　　　　　keywords 最好限制为 6～8 个关键词，关键词之间用英文逗号隔开，采用 关键词1,关键词2 的形式。

　　　　　　例如：

<meta name= " keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配 件,手表,存储卡,京东" />

 

 

　　　　　　对于我们前端人员来说，我们只需要准备好这三个标签，具体里面的内容，有专门的 SEO 人员准备

　　　　　　网站的首页一般都是使用 index 命名，比如 index.html 或者 index.php 。

　　　　　　我们开始制作首页的头部和底部的时候，根据模块化开发，样式要写到common.css里面。

 

　　　　4、LOGO SEO 优化

　　　　　　1、 logo 里面首先放一个 h1 标签，目的是为了提权，告诉搜索引擎，这个地方很重要。

　　　　　　2、 h1 里面再放一个链接，可以返回首页的，把 logo 的背景图片给链接即可。

　　　　　　3、为了搜索引擎收录我们，我们链接里面要放文字（网站名称），但是文字不要显示出来。

　　　　　　　　l 方法1：text-indent 移到盒子外面（text-indent: -9999px) ，然后 overflow:hidden ，淘宝的做法。

　　　　　　　　l 方法2：直接给 font-size: 0; 就看不到文字了，京东的做法。

　　　　　　4、最后给链接一个 title 属性，这样鼠标放到 logo 上就可以看到提示文字了

 

　　5、footer 底部制作

　　　　l footer 页面底部盒子通栏给一个高度和灰色的背景

　　　　l footer 里面有一个大的版心

　　　　l 版心里面包含 1 号盒子，mod_service 是服务模块，mod 是模块的意思

　　　　l 版心里面包含 2 号盒子，mod_help 是帮助模块

　　　　l 版心里面包含 3 号盒子，mod_copyright 是版权模块

 

　　6、main 主体模块制作

　　　　以前书写的就是模块化中的公共部分。

　　　　main 主体模块是 index 里面专有的，注意需要新的样式文件 index.css 。

　　　　l main 盒子宽度为 980 像素，位置距离左边 220px (margin-left ) ，给高度就不用清除浮动

　　　　l main 里面包含左侧盒子，左浮动，focus 焦点图模块

　　　　l main 里面包含右侧盒子，右浮动，newsflash 新闻快报模块

 

　　7、推荐模块制作

　　　　l 大盒子 recom 推荐模块 recommend

　　　　l 里面包含 2 个盒子， 浮动即可

　　　　l 1 号盒子 recom_hd

　　　　l 2 号盒子 recom_bd ，注意里面的小竖线

 

　　8、楼层区 floor 制作

　　　　注意这个 floor ，不要给高度，内容有多少，算多少

　　　　第一楼是家用电器模块： 里面包含两个盒子

　　　　l 1 号盒子 box_hd，给一个高度，有个下边框，里面分为左右 2 个盒子

　　　　l 2 号盒子 box_bd，不要给高度

 

　　　　　　① box_hd 模块

　　　　　　l 有高度可以不用清除浮动

　　　　　　l 左边 h3 ，盒子左浮动

　　　　　　l 右边 tab_list ，右浮动，因为用到 tab 切换效果，所以里面要用 ul 和 li 来做

 

　　　　　　② box_bd 模块

　　　　　　l 根据 tab 切换的原理， tab_content 里面包含 内容部分。 这个内容可以通过ul布局

　　　　　　l 分为 5 个大列，列的宽度不一致

 

　　9、品优购列表页制作

　　　　（1） 品优购列表页制作准备工作

　　　　　　1. 列表页面是新的页面，我们需要新建页面文件 list.html 。

　　　　　　2. 因为列表页的*头部*和*底部*基本一致，所以我们需要把首页中的头部和底部的结构复制过来。

　　　　　　3. 头部和底部的样式也需要，因此 list.html 中还需要引入 common.css 。

　　　　　　4. 需要新的 list.css 样式文件，这是列表页专门的样式文件。

 

　　　　（2） 列表页 header 和 nav 修改

　　　　　　l 秒杀盒子 sk（ second kill ） 定位即可

　　　　　　l 1 号盒子左侧浮动 sk_list 里面包含 ul 和 li

　　　　　　l 2 号盒子左侧浮动 sk_con 里面包含 ul 和 li

 

　　　　（3） 列表页主体 sk _container

　　　　　　l 1 号盒子 sk _container 给宽度 1200，不要给高度

　　　　　　l 2 号盒子 sk_hd ，插入图片即可

　　　　　　l 3 号盒子 sk_bd ，里面包含很多的 ul 和 li

 

　　10、品优购注册页制作

　　　　（1） 注册页类名命名

　　　　　　　注册页面： register.html

　　　　　　　注意：注册页面比较隐私，为了保护用户信息，我们不需要对当前页面做SEO优化。

 

　　　　（2）注册页布局

 

　　　　（3）registerarea 布局

 

 

 

 

便宜好用的国外VPS推荐