6月9日笔记

续上节课：未写完内容
7.overflow溢出处理
（1）hidden隐藏超出大小的图层
（2）scroll无论内容是否超出图层大小都添加滚动条
（3）auto超出部分自动添加滚动条

div{
     width:500px;
     height:500px;
     background-color:red;
     overflow:(1)hidden/(2)scroll/(3)auto;
}

6月9日
从效果图到网页布局中以及按需要切图

1.进行区域的划分
（1）分为几个div，div中还有其他的
如图分为三部分：
第一部分：

<div class="header">
    <div class="top"></div>
    <div class="logos"></div>
    <div class="nov"><div>
 </div>

第二部分：

<div class="center">
    <div class="ad"></div>
    <div class="jianjie"></div>
    <div class="xinwen"></div>
    <div class="changpin"></div>
</div>

第三部分：

<div class="footer">
    <div class="footer_top"></div>
    <div class="footer_bottom"></div>
</div>

2.进行切图操作
工具： Photoshop；
（1）拷贝导入效果图
（2）进行一系类操作：发大，拉动标尺选定范围，选择切图工具进行切图
（3）保存图片，记得格式的更改
3.对图片进行重命名
4.在项目中新建文件夹，将图片导入项目中
5.在ps中获取网页效果颜色添加入代码，设置网页格式背景颜色
6.在代码中对切片进行链接
注意：为主使代码简洁在项目中新建css文件夹，再链接入主文件中。如图：

7.查看页面效果，在代码中修改页边距等等
如：设置body{
margin:0;
}去掉body中的页边距
–——>：通用样式*{
margin:0;
}去掉所有页面的边距
8. 对连接进行颜色修改，并去除下划线
如下：
.top{
width: 100%;
height: 24px,
line-height: 24px;
background: #303030;
color. #d8d8d8;
}在这里只能改变文本的颜色，通过下面代码才能改变链接的颜色
.top a{
color. #d8d8d8;
text-decoration: none:}
以下是设置单鼠标移动到链接上是链接颜色设置
.top a:hover{
color. #160:
}
9.设置全局字体样式：
body{ font: 14px/24px "Microsoft YaHef, "宋体.“Helvetica Neue”, Helvetica, Arial, sans-serif’}
10.对前面的分出区域进行详细化，设置各种连接按钮等等