2019-07-23來黑馬程序員的第十二天(上課)

難過,今天的這篇文章是7.24號寫的,昨天一天沒有時間寫總結,大部分時間都用在了寫項目上面這個項目算我們開班一來第一個比較大的,寫的是一頭的霧水,一直到昨晚上下晚自習都沒有寫完,寫到最后腦子都糊掉了,所以我打算今天再寫一遍,把昨天的推翻,重新來一遍,但是在寫之前項目之前,還是要把昨天學的知識點給總結一下,其實不算多,總結如下:


一、浮動帶來的問題以及解決方法

浮動帶來的問題:浮動元素不能撐開父級元素,為了解決這個問題我們稱為清除浮動(也叫閉合浮動)

解決方法:

(1)定高法:強行給父元素設置個高度?缺點:高度寫死了,導致后期不好維護

(2)增加額外的塊級元素:在浮動元素的最后添加一個塊級元素,并給他設置屬性clear:both;

優(yōu)點:可以讓浮動元素撐開標準流的父級元素

缺點:每一次清除浮動都需要添加額外的標簽

(3)使用偽元素(本質上還是增加額外的塊級元素)

使用步驟:1、將固定代碼復制到CSS中 2、給需要清除浮動的元素應用這個選擇器

.clearfix::after {

content:'';

display:block;

clear:both;

height:0;

visibility:hidden;

}

/*這是兼容性寫,是兼容IE瀏覽器的*/

.clearfix {

*zoom:1;

}

優(yōu)點:使用簡單,不存在兼容性問題

缺點:底層代碼較難以理解

(4)使用overflow 給需要清除浮動的元素設置overflow:hidden;

優(yōu)點:使用簡單 缺點:在特定的情況下會失效


二、偽元素

解釋:偽元素就是偽標簽,實際上我們在瀏覽器中是看不到的

語法:(1)選擇器::after {} 在選擇器選擇的標簽內容最后面添加一個標簽

(2)選擇器::before{} 在選擇器選擇的標簽內容最前面添加一個標簽

注意細節(jié):(1)添加的標簽默認是行內元素

(2)偽元素的content必須要寫,即使是空內容也要寫

(3)官方推薦寫法:: 但是為了考慮到兼容問題 建議寫成單引號:

例子解釋:.dv::after {

content:'今天天氣不錯';

}

這句話的意思:1、在dv這個選擇器選擇的標簽內容最后面添加"今天天氣不錯"

2、選擇這個包裹"今天天氣不錯"的標簽


三、版心

解釋:是一個固定寬度并且居中的盒子,簡單來說就是一個固定寬度的值

語法:常用寫法 .w {

width:1280px;

margin: 0 auto;

}

特殊情況:1、通欄情況 通欄的盒子 解決方法:在通欄的盒子里再套一個盒子并且應用版心樣式

2、有一張?zhí)貏e大的圖片,超過了版心甚至超過了電腦屏幕 解決方法:(1)使用圖片作為背景圖片

(2)這個盒子不做約束,寬度width:100% 高度等于圖片的高度 (3)background-position:center 0


四、PS的簡單使用

z工具:使圖片放大縮小 按下z鍵

(1)放大:使用鍵盤:ctrl + + 使用鼠標:(1)單擊 (2)按住鼠標左鍵不放 (3)鼠標選擇一塊區(qū)域 使用鼠標和鍵盤:alt+鼠標滾輪向上滾?

(2)縮?。菏褂面I盤:(1)ctrl + - 使用鼠標加鍵盤:alt+鼠標滾輪向下

c工具:切片工具 按下c鍵

移動畫布:(1)按住空格鍵+鼠標移動畫布(上下左右都能移動) (2)按住ctrl鍵+滾動鼠標滾輪(只能移動左右方向的)(3)按住空格鍵+滾動鼠標滾輪(只能移動上下方向)

查看選中的切片的尺寸 :雙擊

導出選中的切片:ctrl+shift+alt+s


嗯,今天休息總結就到這里,晚上再寫今天的總結。

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 課程目標: 學會使用CSS選擇器熟記CSS樣式和外觀屬性熟練掌握CSS各種選擇器熟練掌握CSS各種選擇器熟練掌握C...
    繁華退卻閱讀 1,806評論 0 0
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 14,194評論 1 92
  • 一、CSS入門 1、css選擇器 選擇器的作用是“用于確定(選定)要進行樣式設定的標簽(元素)”。 有若干種形式的...
    寵辱不驚丶歲月靜好閱讀 1,741評論 0 6
  • CSS 是什么 css(Cascading Style Sheets),層疊樣式表,選擇器{屬性:值;屬性:值}h...
    崔敏嫣閱讀 1,580評論 0 5
  • 概述 在網(wǎng)易云課堂學習李南江老師的《從零玩轉HTML5前端+跨平臺開發(fā)》時,所整理的筆記。筆記內容為根據(jù)個人需求所...
    墨荀閱讀 2,477評論 0 7

友情鏈接更多精彩內容