1. 程式人生 > >關於網頁的一些內容

關於網頁的一些內容

關於 拉伸 默認 position img src 關系 asc posit

1.如何實現瀏覽器title中的小圖標

技術分享圖片

我們需要借鑒link標簽

  link標簽的標簽屬性有哪些? rel type href

  rel是當前頁面和url之間的關系  rel=“stylesheet”

  type 是資源文件的mime類型 .html文件mime類型是text/html圖片的mime類型

  image/jpg(png/gif)css的mine類型是text/css js的類型是text/javascript。

  mime類型。客戶端和服務器之間的暗號,根據拓展名而定。

  技術分享圖片

  title中的小圖標就出來了,href這裏不能寫成 ./

2.meta元信息標簽

  分析裏面的屬性

3.矢量圖標 http://www.iconfont.cn/

  阿裏雲矢量圖庫。

轉義字符

  空格的字符  

4.項目的完整目錄

技術分享圖片

5.

textarea{

resize: none;

}

這個屬性不讓文本域被人為拉伸

6.

table{

border-collapse: collapse;

}

7.

font的簡寫

技術分享圖片

8.

清除浮動兼容性

技術分享圖片清除浮動在低版本瀏覽器不行。需要處理兼容性

加一個 .clearfix{*zoom:1;}

9.光標的形狀

cursor光標屬性值有pointer抓手,指針wait help

10. rgb 和rgba和opacity

rdb()顏色的表示方法值是0-255如background:rgb(12,15,16);

opacity表示透明度 值是0-1;

技術分享圖片

rgba()r是red 0-255g是green值是0-255 b是blue值是0-255 a是opacity值是0-1;

但是ie低版本不支持。

技術分享圖片

rgb和opacity與rgba的區別?

前者的內容也跟著透明,後者的內容不跟著透明。內容包含圖片和文字

11.transparent 透明的

12.placeholder 提示語

寫頁面

1. 搞清結構層次;

2. 保證模塊化,讓他們之間不能受到影響

  (1) 元素性質

  (2) 標準流

浮動帶來的脫離文檔流撐不起父級的問題可以用清除浮動的方式消除影響,

absolute和fixed帶來的脫離文檔流撐不起父級的高度。使用元素設置高強制撐起父級

13. css可以繼承的屬性有哪些?

  font系列 text系列 color line-height

14.border-radius的值的問題

技術分享圖片

四個值的順序是 左上 右上 右下 左下。

15. white-space 規定段落中的文本換不換行 往往值是powrap不換行

16.  word-wrap屬性允許長的內容可以自動換行  屬性值是break-word允許 默認是不允許

17.  寫三角形

技術分享圖片

寬高必須是0

6.margin對布局的影響    雙飛翼布局  聖杯布局  ()

技術分享圖片

margin是 外邊距,屬性是數字 數字分為正負。

正數:margin:20px;

負數:在static元素中(標準流下)margin-left為負數當前元素向左走 margin-top為負數當前元素向上走

margin-bottom為負數後當前元素不動後面的元素向上走,margin-right為負數當前元素不動

後面的元素向左走

  註意的,margin為負數會增大當前的寬(前提是當前元素沒有width)

  場景

  技術分享圖片

  技術分享圖片給ul一個margin-right就無形之中給ul加了20px寬度

  技術分享圖片

  在float下

    margin為負 也是我們常用的雙飛翼,聖杯布局

    中間自適應 兩端固定

    給元素margin-left為負當前元素向左走。margin-right為負後一個元素一個元素向左走會覆蓋當前元素。

在absolute下

  margin為負

  讓元素居中,前提是知道元素的寬高。

  div{

    position:absolute;

    left:50%;

    right:50%;

    margin-left:-width/2;

    margin-top:-height/2;

}

margin為負無論在什麽條件下都是釋放自己的空間,如果自己的margin不夠,就把自己的寬高貢獻出去。

關於網頁的一些內容