美团侧边栏
目錄
一HTML
二CSS
實現效果
? 1 引入圖片
? 2 鼠標瀏覽時整個所屬框變色 文字加粗
? 3 只有文字部分是超鏈接 其他不是
? 4 酒店后面 HOT在瀏覽是不變色單獨提出來 只有它的小范圍變色
? ?
效果圖
? ??
?
直接上代碼?
一HTML
? ? ?
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.min.css"><link rel="stylesheet" href="./css/mt.css"> </head><body><div class="box"><div class="title">全部分類</div><div class="box1"><i class="fa fa-cutlery" aria-hidden="true"></i><a href="#">美食</a><i class="fa fa-caret-right" aria-hidden="true"></i></div><div class="box1"><i style="color: black;" class="fa fa-cutlery fa-h-square" aria-hidden="true"></i><a href="#">外賣</a><i class="fa fa-caret-right" aria-hidden="true"></i></div><div class="box1"><i style="color: pink;" class="fa fa-cutlery fa-meetup" aria-hidden="true"></i><a href="#">酒店</a><span class="hot">HOT</span><i class="fa fa-caret-right" aria-hidden="true"></i></div><div class="box1"><i style="color: blue;" class="fa fa-cutlery fa-car" aria-hidden="true"></i><a href="#">民宿</a><i class="fa fa-caret-right" aria-hidden="true"></i></div><div class="box1"><i style="color: brown;" class="fa fa-cutlery fa-university" aria-hidden="true"></i><a href="#">貓眼電影</a><i class="fa fa-caret-right" aria-hidden="true"></i></div><div class="box1"><i style="color: red;" class="fa fa-cutlery" aria-hidden="true"></i><a href="#">機票</a><span>/</span><a href="#">火車票</a><i class="fa fa-caret-right" aria-hidden="true"></i></div><div class="box1"><i class="fa fa-cutlery" aria-hidden="true"></i><a href="#">休閑娛樂</a><span>/</span><a href="#">KTV</a><i class="fa fa-caret-right" aria-hidden="true"></i></div><div class="box1"><i style="color: black;" class="fa fa-cutlery fa-at" aria-hidden="true"></i><a href="#">生活服務</a><i class="fa fa-caret-right" aria-hidden="true"></i></div><div class="box1"><i style="color: blanchedalmond;" class="fa fa-cutlery fa-american-sign-language-interpreting"aria-hidden="true"></i><a href="#">麗人</a><span>/</span><a href="#">美發</a><span>/</span><a href="#">醫學美容</a><i class="fa fa-caret-right" aria-hidden="true"></i></div><div class="box1"><i style="color: chocolate;" class="fa fa-cutlery fa-wpexplorer" aria-hidden="true"></i><a href="#">結婚</a><span>/</span><a href="#">婚紗攝影</a><span>/</span><a href="#">婚宴</a><i class="fa fa-caret-right" aria-hidden="true"></i></div><div class="box1"><i style="color: aqua;" class="fa fa-cutlery fa-window-close" aria-hidden="true"></i><a href="#">親子</a><span>/</span><a href="#">兒童樂園</a><span>/</span><a href="#">幼教</a><i class="fa fa-caret-right" aria-hidden="true"></i></div><div class="box1"><i style="color: cadetblue;" class="fa fa-cutlery fa-snowflake-o" aria-hidden="true"></i><a href="#">運動健身</a><span>/</span><a href="#">健身中心</a><i class="fa fa-caret-right" aria-hidden="true"></i></div><div class="box1"><i style="color: chartreuse;" class="fa fa-cutlery fa-free-code-camp" aria-hidden="true"></i><a href="#">家裝</a><span>/</span><a href="#">建材</a><span>/</span><a href="#">家居</a><i class="fa fa-caret-right" aria-hidden="true"></i></div><div class="box1"><i style="color: blueviolet;" class="fa fa-cutlery fa-bath" aria-hidden="true"></i><a href="#">學習培訓</a><span>/</span><a href="#">音樂培訓</a><i class="fa fa-caret-right" aria-hidden="true"></i></div><div class="box1"><i style="color: rgb(104, 104, 25);" class="fa fa-cutlery fa-bandcamp" aria-hidden="true"></i><a href="#">醫療健康</a><span>/</span><a href="#">寵物</a><span>/</span><a href="#">愛車</a><i class="fa fa-caret-right" aria-hidden="true"></i></div><div class="box1"><i style="color:greenyellow;" class="fa fa-cutlery fa-address-book" aria-hidden="true"></i><a href="#">酒吧</a><span>/</span><a href="#">密室逃脫</a><i class="fa fa-caret-right" aria-hidden="true"></i></div></div> </body></html>二CSS
? ??
*{margin:0;padding: 0; } /* 超鏈接 左浮動 行號 */ a{text-decoration: none;color: black;display: block;float: left;line-height: 40px; } /* 整體設置 */ .box{width: 300px;height: 700px;background-color: rgba(187, 187, 187, 0.137);margin: 50px ;border: 1px solid rgb(214, 214, 214); } /* 一行 初始設置 */ .box1{width: 300px;height: 40px;text-indent: 10px;text-align: center; } /* 懸停 超鏈接文字加粗 hot 除外 */ .box1:hover>:not(.hot){font-weight: bold; } /* 懸停加背景色 */ .box1:hover{background-color: rgb(252, 227, 189); } /* 調整 / 位置 */ span{float: left;text-align: center;margin-top: 10px; } /* HOT的設置 */ .box1>.hot{width: 50px;border-radius: 40%;margin-left: 10px;background-color: rgb(255,243,204); } /* hot 移動顏色 */ .box1:hover>.hot{background-color: rgb(255,196,0);} /* 標題 */.title{font-weight: bold;font-size: 20px;text-indent: 10px;padding: 6px;margin-bottom: 20px;}/* 倒三角 */.fa-caret-right{float: right;color: gray;line-height: 40px;margin-right:15px ;}/* 小圖標 */ .fa-cutlery{margin-right: 5px;color: yellow;float: left;line-height: 40px; }總結
- 上一篇： 主机多人同时共享
- 下一篇： 爬虫之 json 数据处理