网页设计排版线框 第1篇
格式：GIF、JPEG（JPG是JPEG压缩所得）、PNG
1.尽量使用小图（小于8kb），加载速度快
2.不能做为主线、重点，要为文本服务（不能）
3.用相对路径
常用属性：
src：指定文件的路径
alt：图像无法显示时，代替图像的说明文字
title：设置图像悬停文字
width：设置宽度，单位：像素（px）
height：设置高度，单位：像素（px）
border：设置图像边框
align：设置对齐方式
当图像无法显示时，显示代替文字，使用alt属性进行设置
示例代码：
使用border属性，边框颜色不能修改，默认黑色
网页设计排版线框 第2篇
品牌：Dyson 戴森
品名：无线手持吸尘器美版
型号：V8 Absolute
吸力：高达115空气瓦特
使用时间：普通模式约40分钟、MAX模式约7分钟
(电动驱动吸头在非MAX模式下运行约25分钟)
充电时间：约5小时
产品尺寸：长厘米，宽18厘米，高厘米
重量：公斤
容量：升
吸头配件：软绒滚筒吸头、升级版直驱吸头、缝隙吸头、
电动床褥吸头、二合一吸头、软除尘毛吊
产品特点：电力升级、新形式集尘桶、双层放射式气旋、HEPA
过滤系统、噪声分贝更小
网页设计排版线框 第3篇
（1）结构分析
根据上述效果图，可知：
（2）结构代码
（1）样式分析
根据上述效果图，可知：
（2）样式代码
网页设计排版线框 第4篇
对于上述图中的线框效果，实现步骤如下：
（1）准备线框盒子
需要准备一个盒子【.line-box】，这个盒子要比图片大，包裹住图片，如下图所示：
（2）添加四角小盒子
但是效果图中的边框只在四角出现，这个盒子显然不能实现这样的效果；
这里采用的办法是，给这个线框盒子的四角分别添加一个小盒子【.line-item】，如下图所示：
（3）边框调整
到这里，基本上已经很明显了，只需要去除线框盒子【.line-box】的边框效果，再给四角小盒子【.line-item】分别添加上对应位置的边框，就可以实现了；
注意：线框效果的实现方式有很多，这里仅介绍这种简单粗暴的实现方式；
（ 如果有其他更好的实现方式，还希望请各位大佬不吝赐教~！）
根据上述分析可知：
注意：这里将线框添加到Grid容器【.grid-container】中，是为了给后续线框的定位做准备；
如何确定线框的大小？
分析效果图可知：它的位置如下图红色框所示：
如何确定线框位置？
分析效果图可知：
如下图所示，这并不是想要的结果：
这里采用的方式是给线框【.line-box】一个负的margin值（当然也可以采用其他方式）；
这样一来，线框中心就会与图片中心重合，在视觉上达到需要的效果，如下图所示：
根据上述分析可知：
相关元素的样式代码如下：
效果如下图所示：
分析需求可知：
可以给线框添加过渡效果，让它的移动看起来平滑一点；
上述代码中，很多地方都使用了同样的属性值；例如，
这些内容均可以通过CSS中的变量来实现；具体可以这样修改：
这样一来，如果需要更改图片大小、间距，线框大小、位置、样式等，直接在变量声明的地方统一更改即可，不需要再多做修改；
=========================================================================
每天进步一点点~！
记录一下这个有意思的CSS效果~~！
网页设计排版线框 第5篇
戴森V8美版无绳吸尘器高配版，新的动力设计。
有助吸除家中四处的过敏原，吸附小至微米的微尘，
运行时间高达40分钟，2款地板吸头及4款配件吸头，清洁空间高达291平米。
图片展示：