web前端全栈0基础到精通（祺）10

多栏布局解决方案

圣杯布局

Document

center

left

right

```

双飞翼布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;}.center {width: 100%;height: 400px;background-color: gold;float: left;}.left {width: 200px;height: 400px;background-color: red;float: left;margin-left: -100%;}.right {width: 300px;height: 400px;background-color: blue;float: left;margin-left: -300px;}.clearfix:after {content: '';display: block;clear: both;}.inner {margin: 0 300px 0 200px;}</style>
</head>
<body><!-- 双飞翼布局实现：1.一个大盒子，里面有三个小盒子，左右固定，中间自适应100%，中间部分一定要先解析2.三个盒子加浮动，左侧部分设置margin-left:-100%;右侧部分设置margin-left:-自己本身宽度3.中间部分内部嵌套一个标签，加左右的外边距缺点：相对于圣杯布局，增加一层结构代码--><div class="wrap clearfix"><div class="center"><div class="inner">center</div></div><div class="left">left</div><div class="right">right</div></div>
</body>
</html>

假等高

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.wrap {border: 5px solid #000;width: 900px;margin: 0 auto;}.box1 {width: 300px;background-color: red;float: left;padding-bottom: 9999px;margin-bottom: -9999px;}.box2 {width: 300px;background-color: green;float: left;padding-bottom: 9999px;margin-bottom: -9999px;}.box3 {width: 300px;background-color: blue;float: left;padding-bottom: 9999px;margin-bottom: -9999px;}.clearfix:after {content: '';display: block;clear: both;}.wrap {overflow: hidden;}</style>
</head>
<body><!-- 内外边距相消法：内边距设置特别大，外边距设置特别小,父标签加溢出隐藏，overflow:hidden; --><div class="wrap clearfix"><div class="box1">先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。</div><div class="box2">先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。</div><div class="box3">先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。</div></div>
</body>
</html>

真等高

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.a {width: 900px;background-color: blue;border: 3px solid #000;margin: 0 auto;overflow: hidden;}.b {width: 900px;background-color: green;margin-left: -300px;}.c {width: 900px;background-color: red;margin-left: -300px;}.box1 {width: 300px;float: left;position: relative;left: 600px;}.box2 {width: 300px;float: left;position: relative;left: 600px;}.box3 {width: 300px;float: left;position: relative;left: 600px;}.clearfix:after {content: '';display: block;clear: both;}</style>
</head><body><div class="a"><div class="b"><div class="c clearfix"><div class="box1">1先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。</div><div class="box2">2先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。</div><div class="box3">3先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。</div></div></div></div></body></html>

图片优化

使用背景图
- 对于页面中与页面内容无关，起修饰作用的图片，使用背景图 background-image（如页面中小图标尤其多次重复出现的，纹理性的背景），与页面内容相关展示性的图片如（广告图、产品图）使用 img 标签。
图片品质
- 注意图片优化：在保证视觉效果的情况下，选择最小的图片格式与图片质量，以减少加载时间。
- 注：通常颜色丰富线条复杂的图片选择 .jpg，颜色单一的小图片使用 .gif，需要更好的显示细节或需要支持半透明的图片使用 .png 等。
使用精灵图
- 运用 CSS sprites 技术集中小的背景图或图标，减少页面 http 请求。

测试检查

1、做完的页面要与设计稿进行比对，保证对设计稿 95% 以上的还原度。

（1）页面模块的完整性，保证页面不出现模块丢失 ( 尤其是悬浮的侧边栏、弹窗、下拉菜单等）；

（2）字体、字号、文字颜色的一致性；

（3）背景图片与图片是否有丢失；

（4）模块间距的还原度（通常根据页面设计排版的复杂程度，最多允许 5-10px 以内的偏差）。

2、跨浏览器的兼容测试。

做完的页面，要根据需求进行跨浏览器的兼容测试，保证不同浏览器显示结果基本一致。Pc 端通常需要测试

的浏览器有 chrome、firefox、opera、IE（IE 低版本是否兼容与需求沟通确定）。

web前端全栈0基础到精通（祺）10相关推荐

web前端全栈0基础到精通（祺）01
前端的概述 web的发展史 web1.0 简单的静态页面早期三大门户搜狐新浪网易 web2.0 更注重用户之间的交互用户即是信息的消费者也是制造者微博 web3.0 人工智能复杂的页面功 ...
web前端全栈0基础到精通（祺）vue 02
一.localStorage 和 sessionStorage的区别相同点: 都可以实现存储. 它们的大小都是5MB左右. 它们的存储方式都必须以字符串进行存储!!!! 它们的语法都是相同.存值: ...
web前端全栈0基础到精通（祺）08
表单表单标签注册和登录目的:收集用户信息,能够输入内容 input标签 text 文本输入类型 <input type="text" name="userna ...
web前端全栈0基础到精通（祺）js 02
数据类型分类. 基本数据类型: number string boolean null undefined 复杂/复合/引用数据类型: object array function 检验数据类型语法: ...
web前端全栈0基础到精通（祺）11
HTML5基础 HTML5中新增的布局标签 html 1990 html4.0.1 1997 html5 2008 稳定版 2012年新增的结构标签 (更加语义化) header标签 <hea ...
web前端全栈0基础到精通（祺）vue 01
一.vue的基本知识 1.1vue 的官网 https://cn.vuejs.org/ 1.2概念渐进式的JavaScript框架????渐进式... 自底向上,逐渐增强.vue.js它本身就是一个 ...
web前端全栈0基础到精通（祺）vue 04
一.组件(component) 在前端,两大概念一.模块模块指的就是逻辑封装,一些共通的功能,你把它提取出来,封装到js中.你需要这个功能,你就引入js es6的导入导出(导出的方式决定你引入的方 ...
web前端全栈0基础到精通（祺）07
项目切图规范 PS常用工具移动工具移动工具主要负责图层.选区.等的移动.复制操作. 快捷键:v 抓手工具快捷键:h 空格 + 鼠标左键拖动,空格键可临时转换为抓手工具. 放大镜工具放大镜工具可 ...
web前端全栈0基础到精通（祺）03
盒模型基础选择器通配符选择器 * {width: 200px;height: 200px;background-color: yellow; } 标签选择器 div {width: 200px;h ...
web前端全栈0基础到精通（祺）js 10
表单快速获取表单元素 \1. 需要先获取表单 form \2. 快速获取表单元素 form.name值 var form = document.getElementsByTagName('form' ...

web前端全栈0基础到精通（祺）10

多栏布局解决方案

图片优化

测试检查

web前端全栈0基础到精通（祺）10相关推荐

最新文章

热门文章