网页布局准则

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

    通过盒子模型,知道大部分html标签是一个盒子;    通过css浮动,定位,可以让每个盒子排列成网页;


 一、网页布局思路

    通过盒子模型,知道大部分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 布局