CSS网页切图实例教程上
CSS网页切图实例教程上
1、分析网页整体结构,如下图所示,我们把网页分为五个部分。
2、根据上图先写出HTML代码:
<div id=" header ">1</div>
<div id="banner">2</div>
<div id="nav">3</div>
<div id="main">4</div>
<div id="fotter">5</div>
如果是初学者建议,在每个DIV先用12345代表这是第几个。
3、编写统一样式代码。因为默认HTML元素是有间距,先让这些间距归0。然后在设置UL列表元素去掉小圆点。包括统一我们文字的大小。以及链接文字的样式
CSS代码如下:
<style type="text/css">
*{
margin:0px;
padding:0px;
}
Ul{list-style:none;}
A{color:#000;font-size:13px;text-decoration:none;}
A:hover{text-decoration:underline;}
</style>
CSS样式代码解释:
*{
margin:0px;
padding:0px;
}
*代表所有HTML元素,我们让其内外边距归0。这是开始时做法。等全部HTML写完,需要把这个地方根据用到HTML换成群组选择符如 body,div,ul,li等。也就是说。我们只需要把使用的HTML进行归0即可。
Ul{list-style:none;}
让UL没有小圆点
A{color:#000;font-size:13px;text-decoration:none;}
A:hover{text-decoration:underline;}
针对A链接进行设置,首先让A链接的四种状态改变为文字颜色是黑色的,然后文字大小是13PX。去掉A链接的下划线
A:hover:当鼠标悬停时,我们使其出现下划线
4、我们使用PS测量网页实际宽度为1000像素,然后我们为五个DIV设置统一居中。
CSS代码如下:
#header,#banner,#nav,#main,#footer{
margin:0px auto;
width:1000px;
}
5、现在开始制作头部HEAD部分,在这个部分我们通过两步去实现。在顶部下方有一个背景。然后是公司LOGO标志
首先我们先把背景写出来:
代码如下:
#header{
height:102px;
background:url(p_w_picpaths/topdi.gif) no-repeat;
}
LOGO直接放图也可以。从网站优化角度考虑。我们可以使用以图换字方式。然后我们添加HTML代码:
<h1>放网站的标题</h1>
H1网页认为最重要的标题。所以我们把LOGO放到H1里面
CSS代码:
#header h1{
height:82px;
width:231px;
background:url(p_w_picpaths/logo.gif) no-repeat;
text-indent:-999px;
}
代码解释:
我们为H1先设置宽度与高度。然后添加背景。最后使用text-indent:-999px;让文字从画面缩进走。
6、制作网页的BANNER部分。我们这个显示广告的地方一般有两种情况,要么就是使用轮播图,要么放一个动画。但是我们这个地方只需要完成一个背景然后在背景显示我们的广告语。制作过程。先让DIV中显示背景,然后在DIV里放一个段落去显示文字
HTML代码如下:
<div id="banner">
<p>
力争行业<span>典</span>范<br/>
STRIVE FOR A MODDEL
</p>
</div>
CSS样式如下:
#banner{
height:268px;
background:url(p_w_picpaths/banner.jpg) no-repeat;
}
#banner p{
color:#FFF;
padding-top:80px;
padding-left:80px;
font-size:14px;
font-weight:bold;
}
解释:1、让这个段落文字颜色为白色
2、距顶与距左空一个间隔。
3、设置文字大小与文字加粗
#banner p span{
color:#FF0;
font-size:18px;
}
解释:段落中某个字需要重点强调。可以在这个字的四周添加一个SPAN(PS:SPAN是无意义的标签,就是为了添加样式方便)。
转载于:https://blog.51cto.com/jiefei/1657942
CSS网页切图实例教程上相关推荐
- CSS网页制作布局实例教程
本教程最终效果如下(浏览示例页面): 本教程素材及页面源代码下载 教程的每个部分都有其侧重点,其中前三节都是关于素材制作与设计的,要求有一定的Photoshop操作基础,我想这也是网页设计必备的基础技 ...
- 43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程
在中国,很多前端javascript:;" onClick="javascript:tagshow(event, '%BF%AA%B7%A2');" target=&qu ...
- html css ps切图教程,Photoshop(PS)CSS切图必用工具
Adobe PHOTOSHOP日常咱们又被称为PS. div CSS必备切图工具PS截图 多数人对于PHOTOSHOP的了解仅限于"一个很好的图象编辑软件",并不晓得它的诸多使用方 ...
- DIV+CSS 之 网页切图过程中div+css命名规则
网页切图过程中div+css命名规则 内容:content/container 导航:nav 侧栏:sidebar 栏目:column 标志:logo 页面主体:main 广告:banner 热点:h ...
- Dreamweaver Flash Photoshop网页设计基础与实例教程(职业白金版)
Dreamweaver & Flash & Photoshop网页设计基础与实例教程(职业白金版) 基本信息 作者: 龙飞 丛书名: 培训专家 出版社:电子工业出版社 ISBN:978 ...
- 原生js实现轮播图实例教程
原生js实现轮播图实例教程 本实例效果如下图所示: 根据实例效果,需要的元素有图片.中间圆点按钮.左右箭头按钮等.实际html代码如下所示: <div class="banner_co ...
- android ui 切图工具,APP切图标注教程:UI设计切图标注的小工具实用技巧
分享关于一篇UI设计师必须要懂的切图标注的小工具实用技巧,让你在跟开发工程师协作的时候更加得心应手. 设计师必备的UI切图小工具如下3大常用工具: 1.切图工具 Assistor PS 也是一款PS的 ...
- sketch android 切图,sketch mac怎么切图 sketch mac切图基础教程
类型:Mac图形图像大小:51.8M语言:英文 评分:10.0 标签: 立即下载 sketch mac怎么切图?sketch mac切图基础教程.最近有使用Mac的用户询问不知道sketch mac怎 ...
- css图片精灵定位_DIV CSS Sprites精灵 CSS图像拼合 CSS背景贴图定位教程案例
div css sprites精灵-CSS图像拼合 CSS贴图定位网页背景素材图片拼合定位布局技术教程篇与css sprites实例篇 css sprites拼合背景图片素材实现布局效果截图 一.什么 ...
- 完成css的切图 图片任意,css切图是什么意思
css切图是指DIV CSS开发的意思,表示从一张网页美工图切片到HTML代码开发与CSS样式开发,完成HTML静态网页:css切图包含两部分,分别是:1.网页美工图素材切出:2.DIV+CSS代码开 ...
最新文章
- 快讯 | 第二届数据标准化及治理大会成功举办,清华力量助推中国数据标准化建设
- 【bzoj5016】[Snoi2017]一个简单的询问 莫队算法
- 计算机术语中CPU是指______,试题题库_计算机基础知识考试试卷全套.doc
- 【Python基础】Python 流程控制专题总结
- java 分布式编程,Java的并行、并发和分布式编程
- android 自定义水波纹点击效果Button
- 远程桌面连接_Win10 系统远程桌面连接怎么打开
- USB2.0学习笔记连载(一):CY7C68013特性简介
- 阿里巴巴Java开发手册v1.2.0版
- Linux 操作系统下的指纹开发
- 利用 Python分析北京雾霾天,发现这么秘密
- 【Python计量】statsmodels对虚拟变量进行回归
- 把显存用在刀刃上!17 种 pytorch 节约显存技巧
- 量化专业术语——转自BigQuant
- 【k8s】debug iptable 并追踪
- informatica 学习日记整理
- 搜索的剪枝——让爆搜变成“搜索”
- 小白轻松10分钟搞定Ubuntu常用命令(史上最全)
- java小游戏-扫雷游戏
- 微信小程序(note1:官方文档)