Html學習 三、

css處理單行文本溢出:

//文本單行展示
white-space: nowrap;
//溢出部分隱藏
overflow: hidden;
//文字一出部分用...顯示
text-overflow: ellipsis;

填充背景圖片:

//設置圖片的路徑,可以說網絡圖片,可以說相對路徑
backround-image:url(xxx);
//設置圖片大小
backround-size: 100px 100px;
//設置圖片填充方式
backround-repeat: no-repeat;
//設置圖片位置(可以是距離左上角的像素值;可以是百分比;可以是 top、bottom、left、right、center)
backround-position:

知識點:

國際化策略,當網速不好的時候會先加載html,或者只加載html,這是backround-image將不會顯示。如果此圖是個鏈接a標籤,此時爲了保證功能的正常使用,可以爲a標籤添加內容,但使內容不能顯示。具體做法

1、css設置:

text-indent:100px;設置首航文本縮進,大於容器的寬度。

white-space: nowrap; 強制不換行

overflow: hidden; 超出容器部分隱藏;

2、利用padding可以設置背景(顏色或圖片)但不可以設置內容的特點,css設置:

height: 0;容器高度爲0;

padding-top: 100px; 利用padding將容器撐開

overflow: hidden;超出部分隱藏

注意點:元素嵌套,行系元素只能嵌套行系元素;塊級元素可以嵌套所有;例外,p標籤不可以嵌套div

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章