サマリー：<!DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <ti
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>浮動--導(dǎo)航</title>
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity = "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin = "anonymous">
<style>
* {
margin: 0;
padding: 0;
}
#top-nav {
background: #333;
overflow: hidden;
}
#top-nav li {
list-style: none;
width: 96px;
height: 60px;
line-height: 60px;
text-align: center;
float: left;
cursor: pointer;
}
#top-nav li a {
font-size: 14px;
color: #CCC;
text-decoration: none;
}
#logo {
margin-right: 100px;
}
#logo img {
width: 140px;
height: 60px;
}
.active {
background: #555;
}
#top-nav #msg {
width: 120px;
float: right;
margin-right: 20px;
}
#top-nav #msg a {
display: inline-block;
width: 60px;
height: 60px;
float: left;
}
#top-nav #msg img {
width: 30px;
height: 30px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
/*當(dāng)圖片img有l(wèi)ine-height時，需要設(shè)置垂直對齊vertical-align*/
vertical-align: top;
position: relative;
top: 15px;
}
.glyphicon {
font-size: 20px;
vertical-align: top;
position: relative;
top: 20px;
}
#msg-icon:hover {
background: #555;
}
.line {
width: 96px;
height: 5px;
background: forestgreen;
position: relative;
top: 55px;
left: 196px;
display: none;
}
</style>
</head>
<body>
<ul id = "top-nav">
<li id = "logo"><a href = ""><img src = "http://ipnx.cn/static/images/logo.png" alt = ""></a></li>
<li class = "active item" name = "0"><a href = "">首頁</a></li>
<li class = "item" name = "1"><a href = "">視頻教程</a></li>
<li class = "item" name = "2"><a href = "">社區(qū)問答</a></li>
<li class = "item" name = "3"><a href = "">編程詞典</a></li>
<li class = "item" name = "4"><a href = "">手冊下載</a></li>
<li class = "item" name = "5"><a href = "">工具下載</a></li>
<li class = "item" name = "6"><a href = "">類庫下載</a></li>
<li class = "item" name = "7"><a href = "">特色教程</a></li>
<li class = "item" name = "8"><a href = "">菜鳥學(xué)堂</a></li>
<li id = "msg">
<a href = "" id = "msg-icon"><span class = "glyphicon glyphicon-volume-up" aria-hidden = "true"></span></a>
<a href = ""><img src = "http://img.php.cn/upload/avatar/000/369/589/5c403927cc95b343.jpg"></a>
</li>
<p class = "line"></p>
</ul>
</body>
<script src = "https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function () {
$('.item').hover(function () {
var len = 196 + $(this).attr('name') * 96 + 'px';
$('.line').show().stop().animate({
'left': len
});
$(this).find('a').css('color', '#EEE');
}, function () {
$('.line').stop().hide();
$(this).find('a').css('color', '#CCC');
});
});
</script>
</html>
添削の先生：天蓬老師添削時間：2019-01-28 09:07:21
先生のまとめ：-webkit-border-radius: 50%;
-moz-border-radius: 50%;像這樣的代碼 , 現(xiàn)在都有可選的了, 除非是一些非常古老的瀏覽器, 目前這些屬性, 所有瀏覽器都提供了支持, 火狐和谷歌的每隔六周自動迭代更新,已經(jīng)不存在過期的瀏覽器, 國內(nèi)的也大多是雙核, 連固執(zhí)的IE, 下一代瀏覽器, 也是基于谷歌內(nèi)核