css07家用电器分类
生活随笔
收集整理的這篇文章主要介紹了
css07家用电器分类
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.創建一個html頁面
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title>家用電器分類</title> <link href="css/type.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="type"><div id="title">家用電器</div><div class="secondTitle"><a href="#">大家電</a></div><p><a href="#">平板電視</a> <a href="#">洗衣機</a> <a href="#">冰箱</a><br/><a href="#">空調</a> <a href="#">煙機/灶具</a> <a href="#">熱水器</a><br/><a href="#">冷柜/酒柜</a> <a href="#">消毒柜</a> <a href="#">家庭影院</a></p><div class="secondTitle"><a href="#">生活電器</a></div><p><a href="#">電風扇</a> <a href="#">凈化器</a> <a href="#">吸塵器</a><br/><a href="#">凈水設備</a> <a href="#">掛燙機</a> <a href="#">電話機</a></p><div class="secondTitle"><a href="#">廚房電器</a></div><p><a href="#">榨汁機</a> <a href="#">電壓力鍋</a> <a href="#">電飯煲</a><br/><a href="#">豆漿機</a> <a href="#">微波爐</a> <a href="#">電磁爐</a></p><div class="secondTitle"><a href="#">五金家裝</a></div><p><a href="#">淋浴/水槽</a> <a href="#">電動工具</a> <a href="#">手動工具</a><br/><a href="#">儀器儀表</a> <a href="#">浴霸/排氣</a> <a href="#">燈具</a></p> </div> </body> </html>2.創建對應的type.css
#type{width: 300px;/*總div的寬度*/ } a{text-decoration: none; /*設置超鏈接沒有下劃線*/ } a:hover{text-decoration: underline; /*設置超鏈接鼠標懸浮有下劃線*/ } #title{font-size: 18px; /*字體大小*/font-weight:bold;/*字體粗細*/line-height: 35px;/*行高*/background-color: #0f7cbf;/*背景色*/color: white;/*字體顏色*/ } .secondTitle{font-size: 14px;font-weight:bold;line-height: 30px;background-color: #e4f1fa;color: #0f7cbf; } p{font-size: 12px;line-height: 20px;color: #666666;text-align: left; /*對齊方式*/ }p a:hover{/*p標簽下面的a標簽懸浮時*/color:#f60; }?3.效果圖
?
轉載于:https://www.cnblogs.com/999-/p/6047663.html
總結
以上是生活随笔為你收集整理的css07家用电器分类的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 多线程同步的方法
- 下一篇： HDU 4893 - Wow! Such