本周主要完成了浮动知识的实例部分练习，并且学习了PS的一些基本操作，还学习了定位的相关知识。
浮动
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
网页布局第二准则：先设置盒子大小，之后设置盒子的位置。
浮动和标准流的父盒子搭配：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学成在线首页</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header w">
<div class="logo">
<img src="images/学成在线.png" alt="">
</div>
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">职业规划</a></li>
</ul>
</div>
<div class="search">
<input type="text" value="输入关键词">
<button></button>
</div>
<div class="users">
<img src="images/users.png" alt="">
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
.w {
width: 1200px;
margin: auto;
}
body {
background-color: #f3f5f7;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.header {
height: 42px;
margin: 30px auto;
}
.logo {
float: left;
width: 198px;
height: 42px;
}
.nav {
float: left;
margin-left: 60px;
}
.nav ul li{
float: left;
margin: 0 15px;
}
.nav ul li a {
display: block;
height: 42px;
padding: 0 10px;
line-height: 42px;
font-size: 18px;
color: #050505;
text-decoration: none;
}
.nav ul li a:hover {
border-bottom: 2px solid #00a4ff;
color: #00a4ff;
}
.search {
float: left;
width: 412px;
height: 42px;
margin-left: 70px;
}
.search input {
float: left;
width: 345px;
height: 40px;
border: 1px solid #00a4ff;
border-right: 0;
color: #bfbfbf;
font-size: 14px;
padding-left: 15px;
}
.search button {
float: left;
width: 50px;
height: 42px;
/* 按钮button默认有个边框,需要我们手动去掉 */
border: 0;
/* 两个行内块元素之间有缝隙 */
background: url(images/fa-search.png);
}
.users {
float: right;
line-height: 42px;
margin-right: 30px;
}
PS
Ctrl+R调用标尺出来（或者视图菜单有标尺）
Ctrl+加号（+）可以放大视图，Ctrl+减号（-）可以缩小视图
按住空格键，鼠标变成小手，可以拖动PS视图
左侧选区选择矩形选框工具，进行测量大小（Ctrl+D可以取消选区，或者在旁边空白处点击一下也可以取消选区）
左侧选区选择吸管工具进行取色，再点击左侧选区，即可复制取色。
PS切图
图层切图
最简单的切图方式：先用移动工具选中要切的图片，再右击图层-快速导出为PNG
但很多情况下，我们需要合并图层再导出：（通常文字和图片是分离的，需要把文字和图片先合并）
1.选中需要的图层：图层菜单--合并图层（ctrl+e）
2.右击--快速导出为PNG
切片切图
1.利用切片选中图片
利用切片工具手动划出
2.导出选中的图片
文件菜单--导出--存储为web设备所用格式--选择我们要的图片格式--存储
定位（position）
定位可以让盒子自由的在某个盒子内移动位置or固定屏幕中某个位置，且可以压住其他盒子。
定位组成：定位=定位模式+边偏移
定位模式
（一）静态定位（static）
（二）相对定位（relative）
移动位置的时候的参照点是自己原来的位置
不脱标，继续保留原来的位置
（三）绝对定位（absolute）
若没有祖先元素or祖先元素没有定位，则一浏览器为准定位
如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
绝对定位不再占有原先的位置（脱标）
子绝父相：子级是绝对定位的话，父级要用相对定位（因为，父级需要占有位置，因此是相对定位。子盒子不需要占有位置，则是绝对定位。）
（四）固定定位（fixed）
（1）以浏览器的可视窗口为参照点移动元素
-
跟父元素没有任何关系
-
不随滚动条滚动
（2）固定定位不再占有原先的位置
-
固定定位也是脱标的，其实固定定位也可以看作是一种特殊的绝对定位。
边偏移
-
top：顶部偏移量，定义元素相对于其父元素上边线的距离
-
bottom：底部偏移量，定义元素相对于其父元素下边线的距离
-
left：左侧偏移量，定义元素相对于其父元素左边线的距离
-
right：右侧偏移量，定义元素相对于其父元素右边线的距离
总结
反思与不足：
在学习过程中，只注重了理论知识的学习，虽然做了很多笔记，但是，并没有及时的进行实例的练习，之后的学习，要更加注重理论跟实例操作紧密结合的学习。
自己也进行了一些赶集网的有关制作，在这其中，对于自己的测量工作做的并不好，还有代码十分复杂并且重复，不能充分调用自己所学过的知识，对前面的知识有一定程度的遗忘，在学习新知识的过程中，要多多进行对前面知识的复习。
下周计划：
完善定位相关知识的学习，并完成定位有关的实例练习，对前面的知识进行复习。
67
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
