本文详细介绍了如何使用PS切图，以及通过HTML和CSS制作学成在线网站首页的过程，包括头部、广告banner、精品推荐栏和底部模块的制作，强调了CSS属性书写顺序和布局策略的重要性。
目录
一、PS切图
1.1 常见的图片格式
1.2 切图方式
（1）图层切图
最简的的切图方式：右击图层-->导出为PNG
有的图片是由背景图和文字组成时：
按shift 选中两个图层，再按shift e ，合并图层 ，再导出为png
（2）切片切图
分两步：
注 ：
若想要导出透明背景的，则要关掉背景(在图层右侧最下方)，再导出为png格式）
保存时一定要点击“选中的切片”
不选中切片时，按delete键盘
（3）ps插件切图（cutterman）
通过选区也可以选中了再导出。
二、学成在线网站首页的制作
2.1 准备素材和工具
2.2 案例准备工作
2.3 CSS属性书写顺序（重点）
2.4 页面布局整体思路
1 确定页面的版心多宽（可视区），测量可知
2 分析页面中的行模块，以及每个行模块中的列模块（页面布局第一准则）
3 一行中的列模块经常使用浮动布局，先确定每个列的大小，之后确定列的位置（页面布局第二准则）
4制作HTML结构（先有结构，后有样式 的原则）
5 先理清布局结构，再写代码！
2.5 确定版心
2.6 制作头部header
以2的高度为整个盒子的高度，再加上下margin值，就是1号的高度
logo部分（2）：
新生成一个div（相当于一列），在div里面包含一个img；
用cutterman裁剪图片保存下来，并测量、设置整个logo部分的高度和宽度；
给.logo设置浮动使其能在一行中排列显示。
导航部分（3）：
新生成一个div（相当于一列），在div里面包含ul-li-a；
给.nav设置浮动使其能在一行中排列显示，给li加浮动使其横着排列（a本身就是行内元素，是不加浮动的；而li是块级元素，是竖着一行一行显示的，得加浮动）；
把每一个a变成块级元素，给每一个a设置高度（不方便给宽度，文字内容不一样多，同理导航栏.nav也不给宽度，方便后续加内容），再给a左右的padding值把每个a撑开；
用文字工具：量出文字大小18点，取文字颜色#，并设置文字大小、颜色；
光标经过时，下划线的效果：给文字加下边框，并设置边框以及文字的颜色（ps取色）；
调整字的距离（设置li的左右外边距margin）；
搜索部分（4）
生成 一个div大盒子，里面包含2个表单：左一个文本框，右一个按钮；
调节大盒子的宽度和高度，设置浮动，设置左外边距；
设置文本框的大小，文本框的大小不测边框（最后要算上下左右的边框）；
设置文本框的边框粗细大小、实线、颜色，右侧不要边框；
设置文本框里的文字颜色、大小，文字离框的左测距离（设置了内边距过后，搜索框的宽度被撑开了，此时设置搜索框宽度要减去内边距的大小）；
测按钮的整个外框宽度，并去掉按钮默认带的外框；
设置点击文本框时的效果；
行内块元素（表单与按钮都属于）之间默认有缝隙，要取消掉（否则按钮会掉到下一行），给两都加浮动，中间就不会有缝隙了；
用cutterman导出按钮图片（是两个图层），再给按钮设置背景图片。
用户部分（5）
生成一个大盒子，里面分为左右两部分（图片左和文字右），要设置浮动；
用cutterman保存图片（两个图层）；
给大盒子加浮动（大盒子是第一行的最后一列了，所以可以加右浮动），再给大盒子设置右外边距、行高；
给文字设置大小、颜色、垂直居中；
（图片和文字怎么实现垂直居中后续讲）
html代码：
<!-- 第一行:头部 -->
<div class="header w">
<!-- 第1列：学成在线logo部分 -->
<div class="logo">
<img src="images/logo.png" alt="">
</div>
<!-- 第2列：导航栏部分 -->
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">职业规划</a></li>
</ul>
</div>
<!-- 第3列：搜索部分 -->
<div class="search">
<input type="text" value="输入关键词：">
<button></button>
</div>
<!-- 第4列：用户部分 -->
<div class="user">
<img src="images/touxiang.png" alt="">qq-leishui
</div>
</div>
<!-- 第一行结束 -->
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
