从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的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 介绍几种印刷纸张与用途
- 下一篇： java编写流星_[Java教程]【原创