亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

HTML/CSS布局實例（下拉菜單的實例操作）-2019年2月13日18:08:15

asal 2019-02-13 18:10:42 242
abstrak：下拉菜單在導(dǎo)航布局中特別常用，主要使用ul li來進行實現(xiàn)，在操作的時候需要注意位置定位和鼠標移動的狀態(tài)<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <

下拉菜單在導(dǎo)航布局中特別常用，主要使用ul li來進行實現(xiàn)，在操作的時候需要注意位置定位和鼠標移動的狀態(tài)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>淘寶網(wǎng)導(dǎo)航條實例</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link rel="stylesheet" type="text/css" href="css/fontawesome.min.css">
</head>
<body>
    <div>
     <div>
     <div>
     <a href="">中國大陸&nbsp;&nbsp;<i class=" fa fa-angel-down"></i></a>
     <a href="" style="color: #FF5000;">親,請登錄</a>
     <a href="">免費注冊</a>
     <a href="">手機逛淘寶</a>
     </div>
     <div>
     <a href="">我的淘寶 <i class=" fa fa-angel-down"></i>
     <ul>
     <li>已買到的寶貝</li>
     <li>我的足跡</li>
     </ul>
     </a>
     <a href=""><span ></span>購物車<i class=" fa fa-angel-down"></i></a>
     <a href="">收藏夾<i class=" fa fa-angel-down"></i></a>
     <a href="">商品分類</a>
     <a href="">賣家中心<i class=" fa fa-angel-down"></i></a>
     <a href="">聯(lián)系客服<i class=" fa fa-angel-down"></i></a>
     <a href="">網(wǎng)站導(dǎo)航<i class=" fa fa-angel-down"></i></a>
     
     

     </div>
     </div>
    </div>
</body>
</html>


* {
    margin: 0px;
    padding: 0px
}
a{
	text-decoration: none; /*取消下劃線*/
	color: #6c6c6c;
}
.clear {
    clear: both;
}
.header {
    width: 100%;
    height: 40px;
    background-color: #F5F5F5;
}
.content {
    width: 1200px;
    height: 40px;
    margin: 0px auto;
    line-height: 40px;
}
.content a:hover{
	color: #FF5000;
}
.content_left {
    width: 400px;
    height: 40px;
    float: left;
}
.content_left a{
	margin-right: 5px;
}

.content_right {
    width: 600px;
    height: 40px;
/*    background-color: pink;*/
    float: right;
}
.left_a{
	display: inline-block;
	height: 40px;
	width: 90px;
	text-align: center;
	position: relative;
}
.left_a:hover{
	background-color: #fff;
}
.left_a ul{
	border: 1px solid #F5F5F5;
	display: none;
	border-top: none;
}
.left_a:hover ul{
	display: block;
	position: absolute;
	width: 110px;
};
	color: #6c6c6c;
.left_a ul li{
	list-style: none
	height: 30px;
	line-height: 30px;
	text-align: left;
	padding: 0px 3px;
	margin: 5px 0px;
}
.left_a ul li:hover{
	background-color: #F5F5F5;
}

Guru membetulkan：滅絕師太Masa pembetulan：2019-02-14 09:07:02
Rumusan guru：完成的不錯;建議:帶有二級下拉菜單的導(dǎo)航不建議用a鏈接嵌套哦

Nota Keluaran

Penyertaan Popular