网页切图的CSS和布局经验与要点


Posted in HTML / CSS onApril 09, 2015

很多初学者在刚学完CSS基础要去实际操作进行网页切图的时候,总感觉无从下手。在这里我为大家简单总结一下,一些网页切图的经验与要点。

第一点:一般我们网站LOGO部分通常使用H1+a链接的方式,在CSS上采用以图换字技术,指定对象的宽与高,把A元素设为块状元素。这样有利于后期的网站优化。

复制代码
代码如下:

background:url(../images/logo.jpg) left top no-repeat;width:300px;height:75px;text-indent:300px; white-space:nowrap; overflow:hidden;

第二点:在这个网站中LOGO右侧一个电话。其实我们可以把这一个部分理解为是两列布局。同样这个地方。你可以采用以图换字。在结合使用两列布局。是不是很轻松就能实现了。

第三点:两列布局。中间空出了一定间距。但是我想要强调的是实现布局不一定非得是DIV与DIV,记住这句话,只要是块状元素都可以实现布局,如下所示:
div 与  div    h1  与  p
li 与 li(导航不就是吗?)

PS:很重要:只要是块状元素(H1,li,div),宽高,都可以实现浮动

第四点:在实现布局的时候,我们通常要碰到两种情况:

1、把宽度计算合适。一个像素不差。那
2、就像第三点所示那样,如果宽度没有计算到位,可能在中间会产生一些间距,那么在下边的布局就要考虑使用清除浮动了。
清除浮动:

复制代码
代码如下:

.clear{clear:both;}

第五点、导航,一般在我们制作导航的时候,都是基于UL,LI,大多的时候是一个基于背景图片的控制,这个没有太多好说的。

第六点、很多网站上都会有网站产品展示,一定要学会使用 dl dt dd 如下所示

复制代码
代码如下:

<dl>
<dt>这里可以放图片</dt>
<dd>这是可以放标题</dd>
<dd>这是可以放具体的描述</dd>
</dl>

第七点:网站的主要内容区域,无非就是两列布局,三列布局,或者是四列布局这样的形式。那我要给大家强调的是:一切皆盒子,以盒模型的方式去计算,咱们的这些块元素,三个值宽类加起来。不能超过外侧DIV的宽度,width+border+padding+margin=外层宽度

给大家推荐一个初学时的写法,怎么写:

先写出三列内容,如下所示:

复制代码
代码如下:

<div class="left">
1
</div>
<!--左侧结束-->
<div class="center">
2
</div></p> <p><div class="right">
3
</div>

然后进行CSS控制:先把浮动,与宽度,全部计算好。
最后:在给每一列里面进行填内容

希望我说的这些给你们带来帮助吧

HTML / CSS 相关文章推荐
使用HTML5和CSS3表单验证功能
May 05 HTML / CSS
使用CSS3来制作消息提醒框
Jul 12 HTML / CSS
CSS3制作炫酷的自定义发光文字
Mar 28 HTML / CSS
CSS3实现10种Loading效果
Jul 11 HTML / CSS
纯css3使用vw和vh实现自适应的方法
Feb 09 HTML / CSS
CSS3制作轮播图的一种方法
Nov 11 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
Apr 14 HTML / CSS
HTML5地理定位_动力节点Java学院整理
Jul 12 HTML / CSS
HTML5新特性之type=file文件上传功能
Feb 02 HTML / CSS
canvas绘制树形结构可视图形的实现
Apr 03 HTML / CSS
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
Aug 23 HTML / CSS
用CSS3写的模仿iPhone中的返回按钮
Apr 04 #HTML / CSS
CSS3+js实现简单的时钟特效
Mar 18 #HTML / CSS
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
Mar 17 #HTML / CSS
使用CSS禁止textarea调整大小功能的方法
Mar 13 #HTML / CSS
CSS3实现的炫酷菜单代码分享
Mar 12 #HTML / CSS
css3实现3d旋转动画特效
Mar 10 #HTML / CSS
纯css3实现图片翻牌特效
Mar 10 #HTML / CSS
You might like
PHPCMS手机站伪静态设置详细教程
2017/02/06 PHP
PHP基于XMLWriter操作xml的方法分析
2017/07/17 PHP
PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例
2019/06/17 PHP
深入学习微信网址链接解封的防封原理visit_type
2019/08/15 PHP
javascript AutoScroller 函数类
2009/05/29 Javascript
js 日期转换成中文格式的函数
2009/07/07 Javascript
工作需要写的一个js拖拽组件
2011/07/28 Javascript
jQuery实现contains方法不区分大小写的方法
2015/02/13 Javascript
JS实现在网页中弹出一个输入框的方法
2015/03/03 Javascript
JS替换字符串中空格方法
2015/04/17 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
2016/05/18 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
详谈JavaScript的闭包及应用
2017/01/17 Javascript
详解JS函数stack size计算方法
2018/06/18 Javascript
Vue头像处理方案小结
2018/07/26 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
2018/09/21 Javascript
js实现九宫格抽奖
2020/03/19 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
JavaScript实现瀑布流布局的3种方式
2020/12/27 Javascript
python使用marshal模块序列化实例
2014/09/25 Python
把MySQL表结构映射为Python中的对象的教程
2015/04/07 Python
python脚本生成caffe train_list.txt的方法
2018/04/27 Python
Python实现的连接mssql数据库操作示例
2018/08/17 Python
python+opencv实现高斯平滑滤波
2020/07/21 Python
Python函数式编程指南:对生成器全面讲解
2019/11/19 Python
TensorFlow2.0矩阵与向量的加减乘实例
2020/02/07 Python
python 一维二维插值实例
2020/04/22 Python
团员学习总结的自我评价范文
2013/10/14 职场文书
《十六年前的回忆》教学反思
2014/02/14 职场文书
同学聚会主持词
2014/03/18 职场文书
监察建议书
2015/02/04 职场文书
教师见习总结范文
2015/06/23 职场文书
学生会部长竞选稿
2015/11/19 职场文书
成人成长感言如何写?
2019/08/16 职场文书
PySwarms(Python粒子群优化工具包)的使用:GlobalBestPSO例子解析
2021/04/05 Python
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS