-
簡單的
插入一張圖片：
<img src="LKS01.jpg" width="200px" alt="LKS" />
src代表圖片路徑
width、height代表圖片尺寸
alt在瀏覽器無法載入圖像時，該屬性告訴讀者她們失去的信息。 -
創(chuàng)建圖片庫
平常瀏覽網(wǎng)站時，看到好看的圖片，會點擊一下，我們會發(fā)現(xiàn)網(wǎng)頁會跳轉(zhuǎn)到另一個地址，該地址顯示較大的該圖片信息。
在 W3C上看到的例子，很好，練一下手。
【第一步：明確任務(wù)】前端工程師需要做的是根據(jù)設(shè)計師的設(shè)計原型，進(jìn)行編寫網(wǎng)頁代碼，設(shè)計師的設(shè)計原型里不僅包括外觀，還應(yīng)該包括交互。
參考下圖，制作當(dāng)用戶鼠標(biāo)經(jīng)過圖片，圖片邊框突出，點擊圖片，進(jìn)入另一地址，可以觀看大圖。
參考
【第二步：構(gòu)建html結(jié)構(gòu)】
<div>
<a target="_blank" href="LKS01.jpg">
<img src="LKS01.jpg" width="300px"/>
</a>
<div>在此處添加對圖像的描述</div>
</div>
沒有css修飾的效果
【第三步：添加CSS修飾】 - 為最外層div添加
class="img"標(biāo)記，方便指定樣式。
.img{
border: 1px solid #bebebe;
float: left;
margin: 10px;
text-align: center;
}
兩個，可以觀察浮動 -
為鏈接內(nèi)的圖片添加樣式
.img>a>img{
margin: 5px;
border: 1px solid #bebebe;
}
效果 - 為圖片添加鼠標(biāo)經(jīng)過樣式
.img>a:hover>img{
border: 1px solid #333333;
}
第一章為圖片經(jīng)過效果
【優(yōu)化】我將原來的dom結(jié)構(gòu)做了一點修改，將內(nèi)層
div替換為input標(biāo)簽，這樣可以方便用戶輸入，同時進(jìn)行增加。
[type=text]{
display: block;
font-size: 1rem;
font-family: "微軟雅黑";
border-width: 0px;
margin: 5px auto 15px;
text-align：center;
}
采用屬性選擇符，選擇input標(biāo)簽，更改display屬性值，原來默認(rèn)為行內(nèi)元素，更改為塊級元素。
[type=text]:focus{
outline: none;
border: 1px solid #bebebe;
}
采用偽類加屬性選擇符，修改input默認(rèn)的樣式。
好了!看我偶吧，美么
