网页切图的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 相关文章推荐
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
Mar 09 HTML / CSS
CSS3中的元素过渡属性transition示例详解
Nov 30 HTML / CSS
CSS3教程(7):CSS3嵌入字体
Apr 02 HTML / CSS
利用CSS3的3D效果制作正方体
Mar 10 HTML / CSS
html5本地存储_动力节点Java学院整理
Jul 12 HTML / CSS
HTML5 File接口在web页面上使用文件下载
Feb 27 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
Nov 27 HTML / CSS
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
Jan 09 HTML / CSS
html5 canvas实现圆形时钟代码分享
Dec 25 HTML / CSS
使用HTML5中的contentEditable来将多行文本自动增高
Mar 01 HTML / CSS
手机端用rem+scss做适配的详解
Nov 15 HTML / CSS
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
May 25 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
一个php作的文本留言本的例子(一)
2006/10/09 PHP
在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)
2010/05/04 PHP
php文件管理基本功能简单操作
2017/01/16 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
2020/03/02 PHP
jQuery实现等比例缩放大图片让大图片自适应页面布局
2013/10/16 Javascript
JavaScript知识点整理
2015/12/09 Javascript
论JavaScript模块化编程
2016/03/07 Javascript
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
React Native中的RefreshContorl下拉刷新使用
2017/10/09 Javascript
Node.js log4js日志管理详解
2018/07/31 Javascript
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
简述Vue中容易被忽视的知识点
2019/12/09 Javascript
vue-router为激活的路由设置样式操作
2020/07/18 Javascript
JavaScript实现简易计算器小功能
2020/10/22 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
[02:32]DOTA2英雄基础教程 美杜莎
2014/01/07 DOTA
为Python程序添加图形化界面的教程
2015/04/29 Python
Python函数可变参数定义及其参数传递方式实例详解
2015/05/25 Python
python之文件读取一行一行的方法
2018/07/12 Python
selenium+python 对输入框的输入处理方法
2018/10/11 Python
对python opencv 添加文字 cv2.putText 的各参数介绍
2018/12/05 Python
python对绑定事件的鼠标、按键的判断实例
2019/07/17 Python
Python使用itchat 功能分析微信好友性别和位置
2019/08/05 Python
python numpy数组中的复制知识解析
2020/02/03 Python
英国家庭和商业健身器材购物网站:Fitness Options
2018/07/05 全球购物
Linux常见面试题
2013/03/18 面试题
物流管理毕业生自荐信
2013/10/24 职场文书
幼儿园教育教学反思
2014/01/31 职场文书
个人党性剖析材料
2014/02/03 职场文书
节能减排倡议书
2014/04/15 职场文书
党员教师四风自我剖析材料
2014/09/30 职场文书
2015年反腐倡廉工作总结
2015/05/14 职场文书
关于五一放假的通知
2015/08/18 职场文书
公司新员工欢迎词
2015/09/30 职场文书
SpringBoot整合Redis入门之缓存数据的方法
2021/11/17 Redis