- Recognize the CSS box model.
- The flexible use of CSS selectors.
- Instance:
- The image text is formed by an HTML file with div and other element layouts.
- Create a new CSS file and link to the HTML file.
- Style defined in CSS file
- Div.img:border,margin,width,float
- Div.img Img:width,height
- Div.desc:text-align,padding
- Div.img:hover:border
- Div.clearfloat:clear
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Omg</title> <Linkrel= "stylesheet"type= "Text/css"href=".. /static/css/202.css "></Head><Body><Div> <Divclass= "img" > <ahref=""> <imgsrc= "Http://file26.mafengwo.net/M00/7E/E5/wKgB4lIuf3SAYD0bABI2F295q_Q73.jpeg"></a> <Divclass= "desc"><ahref="">Dandong Landscape</a></Div></Div> <Divclass= "img"> <ahref=""> <imgsrc= "Http://file25.mafengwo.net/M00/FB/10/wKgB4lNwQ1eAXFr1AALE2JpaC-E02.jpeg"> <Divclass= "desc"><ahref="">Mauritius landscape</a></Div></Div> <Divclass= "img"> <ahref=""> <imgsrc= "Http://img1.qunarzz.com/travel/d2/201212/01/49eae9eeea2afb89ddb12cfb.jpg_r_480x360x95_ed9e0971.jpg"></a> <Divclass= "desc"><ahref="">Kowloon Tam Scenery</a></Div> </Div> <Divclass= "img" > <ahref=""> <imgsrc= "Http://file20.mafengwo.net/M00/87/12/wKgB3FGMgSCAZo0qAAgGckFTqJA54.jpeg"></a> <Divclass= "desc"><ahref="">Hong Kong scenery</a></Div> </Div> </Div><Divclass= "Clearfloat"> <imgsrc= "Http://file26.mafengwo.net/M00/7E/E5/wKgB4lIuf3SAYD0bABI2F295q_Q73.jpeg"> <imgsrc= "Http://file25.mafengwo.net/M00/FB/10/wKgB4lNwQ1eAXFr1AALE2JpaC-E02.jpeg"> <imgsrc= "Http://img1.qunarzz.com/travel/d2/201212/01/49eae9eeea2afb89ddb12cfb.jpg_r_480x360x95_ed9e0971.jpg"> <imgsrc= "Http://file20.mafengwo.net/M00/87/12/wKgB3FGMgSCAZo0qAAgGckFTqJA54.jpeg"></Div></Body></HTML>
img{ width:300px;} div.img{ border:1px solid #cccccc; width:180px; height:150px; Float:left; margia:5px;} Div.img img{ width:100%; height:80%;} div.desc{ Text-align:center; padding:5px;} div.img:hover{border:1px solid #777777;}. Cleater float{ Clear:both;}
CSS instances: Picture navigation blocks