<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta?content="IE=edge"?http-equiv="X-UA-Compatible">
<meta?content="width=device-width,?initial-scale=1"?name="viewport">
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<title>無標題文檔</title>
<link?rel="stylesheet"?href="style/main.css"?/>
</head>
<body>
<div?class="navbar">
<div?class="navbar-logo">
????<a?href="#"><img?src="images/logo.gif"?alt="本筑"?/></a>
</div>
</div>
<div?id="menulogo"?onclick="change()">
????<img?src="images/menu.gif"?width="100%"?height="100%"?alt=""?/>
</div>
<ul?id="menubar">
????<li><a?href="#">品牌</a></li>
????<li><a?href="#">產品</a></li>
????<li><a?href="#">服務</a></li>
</ul>
<div?class="mainbar">
????<div?class="lunzi">
????????<img?src="images/lunzi.gif"?width="100%"?height="100%"?alt=""?/>
????????<div?class="q-x?textbox">
????????????<h2>曲線</h2>
????????????<b>還原樹木天然之美</b>
????????</div>
????????<div?class="z-b?textbox">
????????????<h2>直板</h2>
????????????<b>無瑕疵芯材，卓絕工藝</b>
????????</div>
????????<div?class="p-h?textbox">
????????????<h2>拼花</h2>
????????????<b>專屬定制，只為懂生活的您</b>
????????</div>
????</div>
</div>
<script>
????function?change()?{
????var?menulogo=document.getElementById('menulogo');
????var?menubar=document.getElementById('menubar');
????menulogo.style.display='none';
????menubar.style.display='block';
}
</script>
</body>
</html>
/*?reset?*/
@charset?"utf-8";
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,?
form,fieldset,input,textarea,p,blockquote,th,td?{?
????padding:?0;?
????margin:?0;?
}?
table?{?
????border-collapse:?collapse;?
????border-spacing:?0;?
}?
fieldset,img?{?
????border:?0;?
}?
address,caption,cite,code,dfn,em,strong,th,var?{?
????font-weight:?normal;?
????font-style:?normal;?
}?
ol,ul?{?
????list-style:?none;?
}?
caption,th?{?
????text-align:?left;?
}?
h1,h2,h3,h4,h5,h6?{?
????font-weight:?normal;?
????font-size:?100%;?
}?
q:before,q:after?{?
????content:”;?
}?
abbr,acronym?{
????border:?0;?
}
input{border:?none;}
a{text-decoration:?none;}
/*?背景?*/
html,body{width:100%;height:?100%;font-size:?16px;}
body{background-image:?url(../images/beijing.jpg);background-size:cover;position:?relative;font-family:"Microsoft?YaHei",微軟雅黑;}
/*?頭部logo?*/
.navbar-logo{
????height:?50px;
????padding-top:?25px;
????padding-left:?30px;
}
.navbar-logo?a?img{
????display:?block;
????width:?200px;
????position:?fixed;
}
/*?按鈕部分?*/
#menulogo{
????/*?display:?none;??*/
????position:?absolute;
????height:?50px;
????width:?12px;
????margin:auto;
????top:0;bottom:0;left:?5px;
????cursor:pointer;
}
#menulogo?img:hover{
????background-color:?##e3c18f;
????/*?filter:alpha(opacity=0);?
????????-moz-opacity:0;?
????????opacity:0;?*/
}?
/*?菜單欄部分?*/
#menubar{
????display:?none;
????border-top:2px?solid?white;
????border-bottom:2px?solid?white;
????width:?100px;
????height:?100px;
????position:?absolute;
????margin:auto;
????top:0;bottom:0;
}
#menubar?li{
????display:?block;
????height:?33.33px;
????line-height:33.33px;
????text-align:?center;
}
#menubar?li?a{
????text-decoration:?none;
????color:?white;
}
#menubar?li?a:hover{
????color:?#e3c18f;
}
/*?中間樹環部分?*/
.mainbar{
????width:?100%;
????height:?80%;
}
.lunzi{
????width:35%;
????height:80%;
????margin-left:?32.5%;
????margin-top:?3%;
????position:relative;
}
.textbox{
????position:?absolute;
????width:?40%;
????height:?10%;
????z-index:?5;
????/*?background:?red;?*/
????text-align:?left;
????letter-spacing:2px;
????color:?white;
????cursor:pointer;
}
.textbox:hover{
????color:?#e3c18f;
}
.lunzi?.q-x?h2?,.lunzi?.p-h?h2,.lunzi?.z-b?h2?{
????font-size:?16px;
}
.lunzi?.q-x?b?,.lunzi?.p-h?b,.lunzi?.z-b?b{
????font-size:?12px;
}
.lunzi?.q-x{
????text-align:?right;
}
.lunzi?.q-x{
????left:?-40%;
????bottom:15%;
}
.lunzi?.z-b{
????right:?-41.5%;
????top:10%;
}
.lunzi?.p-h{
????right:?-35%;
????bottom:?6%;
}請問下是哪里有問題呢？ 謝謝大神啦
- 1 回答
- 0 關注
- 1720 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消