有沒有大佬幫忙敲下這個代碼
uj5u.com熱心網友回復：
html代碼如下：<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet" href="https://bbs.csdn.net/topics/style.css">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body style="">
<!--導航-->
<section class="menu">
<div class="wrap">
<a href="https://bbs.csdn.net/topics/#" class="logo left"><span>QQ彩貝積分</span></a>
<div class="nav-menu left">
<div class="menu-main left">
<span class="menu-tag menu-tagz">賺積分</span>
<ul class="menu-con">
<li>
<a href="https://bbs.csdn.net/topics/#" class="item-mall">回傳商城</a>
</li>
<li>
<a href="https://bbs.csdn.net/topics/#" class="item_travel">商旅頻道</a>
</li>
</ul>
</div>
<div class="menu-main left">
<span class="menu-tag menu-tagh">花積分</span>
<ul class="menu-con">
<li>
<a href="https://bbs.csdn.net/topics/#" class="item_gmall">積分商城</a>
</li>
</ul>
</div>
<div class="menu-main left">
<ul class="menu-con">
<li>
<a href="https://bbs.csdn.net/topics/#" class="item_about">了解彩貝</a>
</li>
<li>
<a href="https://bbs.csdn.net/topics/#" class="item_act">彩貝活動</a>
</li>
<li>
<a href="https://bbs.csdn.net/topics/#" class="item_i ">個人中心</a>
</li>
</ul>
</div>
</div>
<div class="menu-r right">
<a href="https://bbs.csdn.net/topics/#" class="icon-bbs"></a>
<a href="https://bbs.csdn.net/topics/#" class="icon-wb"></a>
<a href="https://bbs.csdn.net/topics/#" class="icon-mail"></a>
</div>
</div>
</section>
</body>
</html>
style.css代碼如下：
* {
padding:0;
margin:0;
}
body, html {
height:100%;
font:12px/1.5 Tahoma, Helvetica, Arial, sans-serif;
}
.wrap {
width:1100px;
margin:0 auto;
}
ul {
list-style:none;
}
img {
border:0 none;
vertical-align:bottom;
}
a {
text-decoration:none;
}
.left {
float:left;
}
.right {
float:right;
}
.fix {
overflow:hidden;
clear:both;
}
.clearfix:after {
content:'';
clear:both;
height:0;
visibility:hidden;
display:block;
}
/**logo**/
.logo {
width:170px;
height:46px;
background:url(logo_170x46.png) no-repeat;
margin-top:18px;
}
.logo span {
line-height:999;
display:inline-block;
overflow:hidden;
height:0;
}
/**導航**/
.menu, .menu-main, .menu-tag, .menu-con a {
background:url(header.png) no-repeat;
}
.menu {
background-repeat:repeat-x;
height:84px;
}
.nav-menu {
padding-left:50px;
}
.menu-main {
position:relative;
padding-left:38px;
height:84px;
margin-left:-8px;
background-position:0 -85px;
}
.menu-tag {
position:absolute;
display:block;
width:41px;
height:25px;
left:26px;
top:0;
line-height:999;
overflow:hidden;
}
.menu-tagz {
background-position:0 -676px;
}
.menu-main:hover .menu-tagz{
background-position:-40px -676px;
}
.menu-main:hover .menu-tagh{
background-position:-149px -676px;
}
.menu-main:hover .menu-tag{
animation: move1 .3s linear both;
}
@keyframes move1 {
0%{
width: 0px;
}
33%{
width: 23px;
}
66%{
width: 46px;
}
100%{
width: 69px;
}
}
.menu-tagh {
background-position:-109px -676px;
}
.menu-con {
height:84px;
}
.menu-con li {
float:left;
}
.menu-con li a {
display:block;
width:108px;
height:84px;
line-height:999;
overflow:hidden;
}
.menu-con .item-mall {
background-position:0 -170px;
}
.menu-con .item-mall:hover {
background-position:-108px -170px;
}
.menu-con .item_travel {
background-position:0 -254px;
}
.menu-con .item_travel:hover {
background-position:-108px -254px;
}
.menu-con .item_gmall {
background-position:0 -338px;
}
.menu-con .item_gmall:hover {
background-position:-108px -338px;
}
.menu-con .item_about {
background-position:0 -506px;
}
.menu-con .item_about:hover {
background-position:-108px -506px;
}
.menu-con .item_act {
background-position:0 -422px;
}
.menu-con .item_act:hover {
background-position:-108px -422px;
}
.menu-con .item_i {
background-position:0 -590px;
}
.menu-con .item_i:hover {
background-position:-108px -590px;
}
/**導航右側**/
.menu-r a {
background:url(iconsB.png) no-repeat;
width:24px;
height:24px;
line-height:999;
overflow:hidden;
margin-left:14px;
float:left;
margin-top:32px;
transition: all 0.5s ease;
}
.menu-r .icon-bbs {
background-position:0 -21px;
}
.menu-r .icon-bbs:hover {
background-position:0 -46px;
}
.menu-r .icon-wb {
background-position:-24px -21px;
}
.menu-r .icon-wb:hover {
background-position:-24px -46px;
}
.menu-r .icon-mail {
background-position:-49px -21px;
}
.menu-r .icon-mail:hover {
background-position:-49px -46px;
}
其中有幾個圖片：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/135446.html
標籤：HTML(CSS)
下一篇：用pdf.js寫了一個html匯出pdf的功能，在ios手機上不提示下載，而是直接打開，在ios手機上用替他瀏覽器也不行，求大神賜教。