从0开始学web-day7

1.复习

2.盒子模型
1.盒子的组成：内容（content）外边距margin 内边距padding 边框border
2.外边距 margin 盒子与盒子之间的空隙（盒子的外部）
外边距不能出现背景颜色
设置一个值代表是上下左右都是这个值
设置两个值1 值2 ，值1是上下值2是左右
设置3个值值1 值2 值3 ，值1是上值2是左右值3是下
设置4个值值1 值2 值3 值4 ，值1是上值2是右值3是下值4是左
margin：0 auto；实现盒子的水平居中上下为0 左右自动
可以单独设置某一个值 margin-left right top bottom
margin可以设置负值，使盒子叠加在一起
3.内边距 padding 内容和边界之间的距离（盒子的里边）
内边距能出现背景颜色
设置一个值代表是上下左右都是这个值
设置两个值1 值2 ，值1是上下值2是左右
设置3个值值1 值2 值3 ，值1是上值2是左右值3是下
设置4个值值1 值2 值3 值4 ，值1是上值2是右值3是下值4是左
可以单独设置某一个值 padding-left right top bottom
padding不可以设置负值
4.边框 border （属于盒子的）

3.盒子的计算方式
padding会撑大盒子，border边框也会撑大盒子 margin（如果单纯的拿一个盒子来说margin不会撑大盒子）
如果将一堆小盒子放在一个大盒子里面 margin会影响一排的摆放个数此时我们认为margin会影响盒子的大小
盒子模型的计算方式：
实际width=（margin-left）+（border-left）+（padding-left）+width+（padding-right）+（border-right）+（border-right）+（margin-right）
实际height=（margin-top）+（border-top）+（padding-top）+height+（padding-bottom）+（border-bottom）+（margin-bottom）
盒子模型的分类：标准盒模型（外扩模型）怪异盒模型（内减模型）
标准盒子：padding border会撑大盒子
怪异盒：padding border不会撑大盒子
盒子模型之间的转换 box-sizing：content-box 标准盒默认 border-box怪异盒子

4.ps的操作
ps测量取色截图
1.如何打开图片
文件-打开
直接将图片拖拽到ps软件中（注意如果有打开的图片要将图片拖拽到打开图片的名称后边）
2.取色
左侧工具栏中小色块点击-打开拾色器面板-将鼠标放在你想要获取颜色的位置点击即可
3.测量
鼠标点击左侧的矩形选框工具-将你想要知道尺寸的位置框选-w代表宽度 h代表高度
如果鼠标松开就没有w和h 去窗口的菜单中找到信息快捷键是f8
如果你的值不是整数，说明你的单位不对，可以在信息面板中点击加号的位置，将单位更改为像素
或者在标尺中右击将单位更改成像素
如何调出标尺ctrl+r
图片放大选择的精准度会更高放大 alt+滚轮或者 ctrl+ 缩小 alt+滚轮或者 ctrl-
取消选区ctrl+d
4.截图
只能一张张截图
1.用选框工具选择-ctrl+c-ctrl+n-enter-ctrl+v-ctrl+alt+shift+s
2.左侧工具栏裁切工具选择-双击确定（在原图上做裁切）需要还原
批量截图
左侧裁切工具右击选择切片工具-用鼠标一次将你要裁切的图片选择出来-ctrl+alt+shift+s-存储-所以用户切片
5.辅助线
在标尺中向下或向右拖拽
6.抓手工具 h或者按住空格键
快速以移动
7.改变图片的大小
选框工具选中-ctrl+t 按住shift就可以等比例缩放
8.调节图片的明暗度
ctrl+m
9.网页的安全区（版心区）
内容都会在中心区域去显示，正常打开页面时不会出现左右滚动条

5.网页的外围结构搭建

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="wai.css">
</head>
<body><!-- top --><div class="top"><div class="top1 safe"></div></div><!-- logo --><div class="logo"><div class="logo1 safe"></div></div><!-- nav --><div class="nav"><div class="nav1 safe"><a href="#">首页</a><a href="#">学籍查询</a><a href="#">学历查询</a><a href="#">在线验证</a><a href="#">出国教育背景服务</a><a href="#">图像校对</a><a href="#">学信档案</a><a href="#">研招</a><a href="#">港澳台招生</a><a href="#">征兵就业</a><a href="#">学职平台</a><a href="#">日本频道</a></div></div><!-- main --><div class="main safe"><div class="news"><div class="left"></div><div class="right"><div class="title">标题信息</div></div></div><div class="server"><div class="left"><div class="title">标题信息</div></div><div class="right"><div class="title">标题信息</div></div></div><div class="fuwu"><div class="left"><div class="title">标题信息</div></div><div class="right"><div class="title">标题信息</div></div></div><div class="other"><div class="left"><div class="title">标题信息</div></div><div class="right"><div class="title">标题信息</div></div></div></div><!-- footer --><div class="footer safe"><div class="footer1"></div></div>
</body>
</html>

wai.css文件

* {margin: 0;padding: 0;
}
body {background:#f1f1f1;
}/* 并集选择器定义安全区 */
/*.top1, .logo1, .nav1, .main, .footer1 {width: 1000px;margin: 0 auto;
}*//* 定义一个安全区，哪里需要哪里使用 */
.safe {width: 1000px;margin: 0 auto;
}/* top */
.top {height: 35px;border-top: 3px solid #2eafbb;
}
.top1 {height: 35px;background: red;}
/* logo */
.logo {height: 100px;background: #FFF;
}
.logo1 {height: 100px;background: yellow;}
/* nav */
.nav {height: 40px;background: #2eafbb;
}
.nav1 {height: 40px;/* background: palevioletred; */font-size: 0px;word-spacing: 26px;font-family: "Microsoft YaHei", 微软雅黑， SimSun, 宋体;
}
.nav a {font-size: 14px;color: #fff;text-decoration: none;line-height: 40px;
}
/* main */
.main {margin: 20px auto;background: #f1f1f1;
}
.left {width: 779px;height: 100%;border-right: 1px solid #000;background: pink;float: left;box-sizing: border-box;
}
.right {width: 219px;height: 100%;background: orange;float: right;
}.title {height: 48px;border-bottom: 1px solid #000;font-size: 18px;line-height: 48px;padding-left: 19px;
}
.news {height: 294px;background: #fff;border: 1px solid #000;margin-bottom: 20px;
}
.server {height: 346px;background: #fff;border: 1px solid #000;margin-bottom: 20px;
}
.fuwu {height: 324px;background: #fff;border: 1px solid #000;margin-bottom: 20px;
}
.other {height: 372px;background: #fff;border: 1px solid #000;
}/* footer */
.footer {height: 220px;background: #2eafbb;
}
.footer1 {height: 220px;background: palevioletred;}

从0开始学web-day7相关推荐

【从0开始学web】89-150 php特性
[从0开始学web]89-150 php特性 [从0开始学web]89-150 php特性前言 web89 web90 web91 web92 web93 web94 web95 web96 web ...
2021-10-14【从0开始学web】279-300 java
[从0开始学web]279-300 java [从0开始学web]279-300 java web279 web278-297 279-297题都是struts2框架漏洞 Struts2是用Java语 ...
提升之路--从0开始学web自动化(7)--ui自动化框架搭建PO模式
ui自动化测试在整个测试过程中占据的地位在一个项目的测试中手工测试(60%)/自动化测试(40%),不同公司的定义不同.总体是手工占大部分而自动化测试中,接口自动化占据70% ui自动化测试优先实 ...
【从0到1学Web前端】javascript中的ajax对象（一）
[从0到1学Web前端]javascript中的ajax对象(一) 如今最流行的获取后端的(浏览器从server)数据的方式就是通过Ajax了吧.今天就来具体的来学习下这个知识吧.假设使用ajax来訪 ...
0基础转行IT行业学web前端好吗?
0基础转行IT行业学web前端好吗?目前互联网行业迅速发展,IT已经成为现在的一个非常热门的一个行业,许许多多的人都想要往IT方面发展,找IT方面相关的一个工作. 很多想要接触IT行业的初学者伤透了脑 ...
菜鸟学WEB开发 ASP.NET 5.0 1.0
菜鸟学WEB开发 ASP.NET 5.0 1.0 在学习之初我要强调一点"微软要向跨平台开发"大举进军了,不管他能走多远,这是微软的必经之路. 一.学习流程: 创建ASP.NET ...
0基础学怎么学习python
Python相对于其他编程语言来说是比较简单的,非常适合零基础的小白学习,想要进入到互联网行业,可以优先选择学习Python,那么下面小编就来为大家详细的介绍一下0基础学怎么学习python? ...
html语言难不难学,Web前端开发难学吗?
Web前端开发难学吗? 更新时间:2019年02月22日16时54分来源:传智播客web前端培训浏览次数: 关于Web前端开发难学吗?学Web前端都需要学习哪些内容?很多想要转行学习Web的同学还 ...
0基础学python难吗-0基础学武汉Python开发课程有多难？该怎么入门？
Python语言可谓十分强大,正如它的两个外号所称,一个是"内置电池",另一个是"胶水语言".开源社区和独立开发者长期为Python贡献了丰富大量的第三方库,其 ...
0基础学python-0基础学python 全套教程送你参考
我0基础学Python可以吗? 我赞成把Python作为入门语言: 为什么选择python Python可以说是编程语言中罕见的既简单又强大的一门语言,python语言简洁,语言优雅,功能强大,使用p ...

从0开始学web-day7

从0开始学web-day7相关推荐

最新文章

热门文章