<!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 关注
- 1676 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消