-
簡單的
插入一張圖片：
<img src="LKS01.jpg" width="200px" alt="LKS" />
src代表圖片路徑
width、height代表圖片尺寸
alt在瀏覽器無法載入圖像時(shí)纸颜，該屬性告訴讀者她們失去的信息兽泣。 -
創(chuàng)建圖片庫
平常瀏覽網(wǎng)站時(shí)，看到好看的圖片懂衩，會(huì)點(diǎn)擊一下撞叨，我們會(huì)發(fā)現(xiàn)網(wǎng)頁會(huì)跳轉(zhuǎn)到另一個(gè)地址金踪，該地址顯示較大的該圖片信息浊洞。
在 W3C上看到的例子，很好胡岔，練一下手法希。
【第一步：明確任務(wù)】前端工程師需要做的是根據(jù)設(shè)計(jì)師的設(shè)計(jì)原型，進(jìn)行編寫網(wǎng)頁代碼靶瘸，設(shè)計(jì)師的設(shè)計(jì)原型里不僅包括外觀苫亦，還應(yīng)該包括交互。
參考下圖怨咪，制作當(dāng)用戶鼠標(biāo)經(jīng)過圖片屋剑，圖片邊框突出，點(diǎn)擊圖片诗眨，進(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;
}
兩個(gè)，可以觀察浮動(dòng) -
為鏈接內(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)做了一點(diǎn)修改芋簿，將內(nèi)層
div替換為input標(biāo)簽峡懈，這樣可以方便用戶輸入，同時(shí)進(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)的樣式齐唆。
好了!看我偶吧嗤栓，美么
