HTML,CSS工具(二)
HTML,CSS工具
6.圖片代替文字
前言:當你的網速降低到10kb/s時,網頁只會顯示最基礎的html,且遮蔽css,js,大公司(或者現在的公司)會讓你在網速不好的時候,那個網站還能正常點選,瀏覽(國際性公司相容策略)
第一種:(使用單行文字溢位處理)
語法:使用a標籤先將網速不好時的html文字展示出來,然後在css中給a標籤新增背景圖片等屬性,刺客顯示文字會壓到圖片上,我們不需要文字,所以先將文字頂出這個圖片容器,然後使用單行文字溢位處理,不打點
html程式碼:
<a href="https://www.taobao.com">淘寶網</a>
css程式碼:
*{
margin:0;
padding:0;
list-style:none;
text-decoration:none;
}
a{
width:190px;
height:90px;
color:#424242;
display:inline-block;
border:1px solid black;
background-image:url('img/taobaowang.png');
background-size:190px 90px;
}
執行結果:
淘寶網這三個字他在圖片上,我們首先要將這三個字頂出容器,使用首行縮排text-indent屬性,讓text-indent的值大於容器的寬,此時我們在a標籤里加text-indent:200px;執行結果:
會發現只有"淘"出去了,為了讓"寶網"也跟著出去,我們使用white-space:nowrap;執行結果
這時候我們讓"淘寶網"隱藏就行了,使用overflow:hidden,此時執行結果
我們測試一下,當網速不好時,遮蔽css,這時候只有<a href="https://www.taobao.com">淘寶網</a>,執行結果
第二種:
語法:根據背景圖片能加到padding上,content(標籤的內容不能加到padding上),我們得到了這種辦法,讓容器的高度設定為0,如果不設定height為0,標籤的文字還是不會從容器中出去的,用padding-top代替容器的高度,使用overflow:hidden將標籤的內容消失
html程式碼:
<a href="https://www.taobao.com">淘寶網</a>
css程式碼:
a{
width:190px;
color:#424242;
display:inline-block;
border:1px solid black;
background-image:url('img/taobaowang.png');
background-size:190px 90px;
height:0px;
padding-top:90px;
overflow:hidden;
}
執行結果:
7.自適應
前提:必須是父子級,父子元素而且都是塊級元素
html程式碼:
<div class="wrapper">
<div class="content"></div>
</div>
css程式碼:
*{
margin:0;
padding:0;
list-style:none;
text-decoration:none;
}
.wrapper{
height:30px;
background-color:#123;
}
.content{
margin:0 auto;
width:1200px;
height:30px;
background-color:#f40;
}
執行結果:
這個自適應的作用是瀏覽器縮小時,兩邊先消失
8.底對齊
一.一行文字是底對齊
html程式碼:
<div>
今天真好<span>好心情!</span>
</div>
css程式碼:
*{
margin:0;
padding:0;
list-style:none;
text-decoration:none;
}
span{
font-size:60px;
}
執行結果:
二.圖片和文字也是底對齊
html程式碼:
<img src="img/tbewm.png" alt="哈哈哈">4554556
css程式碼:
*{
margin:0;
padding:0;
list-style:none;
text-decoration:none;
}
img{
width:100px;
height:100px;
}
執行結果:
是不是現在很想知道如果後面加個寬高為100px,背景顏色為淘寶紅,
加一個
<div style ="width:100px;height:100px;background-color:#f40;"></div>
執行結果:
對於以上兩種,有個特殊的
html程式碼:
<span>123</span>456
css程式碼:
*{
margin:0;
padding:0;
list-style:none;
text-decoration:none;
}
span{
display:inline-block;
width:100px;
height:100px;
background-color:#f00;
font-size:50px;
}
執行結果:
456會跟著span裡面的文字對齊,不過通過vertical-align改變456的位置,如果加一個vertical-align:text--top,執行結果:
說明:該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是升高。在表單元格中，這個屬性會設定單元格框中的單元格內容的對齊方式。
如果設定了vertical-align的值為middle(記住沒有text-middle,只有middle),執行結果
如果設定了vertical-align為text-bottom,執行結果:
9.導航欄
使用ul(無序列表)製作
html程式碼:
<ul class="nav">
<li class="list-item"><a href="#">親,請登入</a></li>
<li class="list-item"><a href="#">免費註冊</a></li>
<li class="list-item"><a href="#">購物車</a></li>
<li class="list-item"><a href="#">商品分類</a></li>
<li class="list-item"><a href="#">聯絡客服</a></li>
</ul>
css程式碼:
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.nav .list-item{
float:left;
margin:0 10px;
height:30px;
line-height:30px;
/* border:1px solid black; */
}
.nav::after{
content:"";
display:block;
clear:both;
}
.nav .list-item a{
color:#f40;
font-weight:bold;
height:30px;
display:inline-block;
border-radius:15px;
}
.nav .list-item a:hover{
background-color:#f40;
color:#fff;
}
執行結果:
如果給每個li標籤和a標籤加個border:1px solid black;執行結果
