网页建设中遇到的问题.
1.加大图轮播导致1.导航字体大小改变 2.轮播不可用,在图片路径无误的情况下,图片亦不显示
2.点击导航栏弹出二级导航会挤走下部文件.尝试下部文件设置 绝对定位 未解决
3.这部分整个往右走了180px 不能调回!
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{
margin:0px;
padding:0px;
list-style:none;
}
body{
background:url(background.jpg);
}
#top{
height:178px;
width:100%;
position:relative;
float:left;
}
.t1{
width:207px;
height:118px;
margin-left:6%;
position:relative;
float:left;
/*margin-top:0px;*/
line-height:118px;
}
.t2{
width:500px;
height:118px;
position:relative;
float:left;
margin-top:0px;
/*border:1px solid red;*/}
.t3{
width:500px;
height:118px;
position:relative;
float:left;
/*border:1px solid blue;*/}
.t31{
width:400px;
height:27px;
position:relative;
float:left;
/*border:1px solid grey;*/
text-align:center;
margin:0px auto;
margin-top:4px;}
.ts{
position:relative;
float:left;
border-right:solid 1px grey;
}
.ts:hover{
opacity:0.5;}
.t32{
width:190px;
height:54px;
position:relative;
float:left;
margin:0px auto;
margin-left:240px;
/*border:1px solid red;*/}
.ti{
width:56px;
height:54px;
position:relative;
float:left}
.t33{
width:100px;
height:20px;
position:relative;
float:left;
margin-left:255px;}
#nav{
width:80%;
height:60px;
position:relative;
float:left;
margin:0px auto;
line-height:60px;
/*border:1px solid red;*/
margin-left:10%;
}
.n{
width:14%;
max-height:60px;
position:relative;
float:left;
line-height:60px;
text-align:center;
overflow:hidden;
/*border:1px blue solid;*/}
.n:hover{
max-height:300px;
transition:1s;
cursor:pointer;
background:#0CC;}
.n li:hover{
background-color:#0F0}
.n ul{
opacity:0.5;}
#middle{
position:relative;
float:left;
/*margin-right:600px;*/
/*width:100%;
height:34px;*/
/*border:1px solid red;*/}
#du{
width:1150px;
height:450px;
position:relative;
float:left;
/*border:1px solid black;*/
margin-left:50px;
}
.d1{
width:24%;
height:450px;
position:relative;
float:left;
border:1px solid black;
margin-left:3px;}
.d11{
height:40px;
width:160px;
position:relative;
float:left;
/*border:1px solid red;*/}
.d12{
width:262px;
height:175px;
position:relative;
float:left;
/*border:1px solid green;*/
}
.d13{
width:220px;
height:170px;
position:relative;
float:left;
/*border:1px solid #609;*/
line-height:35px;}
.q{
line-height:35px;}
#bottom{
width:100%;
height:120px;
}
.b1{
width:100%;
height:40px;
position:relative;
float:left;
margin-left:400px;}
.b2{
width:100%;
height:40px;
position:relative;
float:left;
margin-left:200px;}
.b3{
width:100%;
height:40px;
position:relative;
float:left;
margin-left:550px;
margin-top:10px;}
</style>
</head>
<body>
<div id="top" style="width:100%; height:178px; background:url(01.jpg)">
<div class="t1"><img src="jurangaiban_03.jpg" /></div>
<div class="t2"><img src="jurangaiban_04.jpg" /></div>
<div class="t3">
<div class="t31" style="font-size:16px; color:#3CF">
<span class="ts">顾客留言</span>
<span class="ts">人才招聘</span>
<span class="ts">服务监督员</span>
<span class="ts">我要举报</span>
<span class="ts">English</span>
</div>
<div class="t32">
<div class="ti"><img src="1_11.jpg" /></div>
<div class="ti"><img src="1_12.jpg" /></div>
<div class="ti"><img src="1_13.jpg" /></div>
</div>
<div class="t33"><h3>400-650-3333</h3></div>
</div>
<div id="nav"> 点击导航栏弹出二级导航会挤走下部文件.尝试下部文件设置 绝对定位 未解决
<div class="n"><h3>首页</h3></div>
<div class="n"><h3>集团简介
<ul>
<li>企业文化</li>
<li>企业荣誉</li>
<li>发展战略</li>
<li>下属公司</li>
</ul>
</h3></div>
<div class="n"><h3>新闻中心</h3></div>
<div class="n"><h3>促销活动</h3></div>
<div class="n"><h3>招商连锁
<ul>
<li>下载分店联系列表</li>
<li>招商流程</li>
</ul>
</h3></div>
<div class="n"><h3>会员中心
<ul>
<li>积分兑换</li>
<li>服务申请</li>
</ul>
</h3></div>
<div class="n"><h3>设计家</h3></div>
<div id="middle" style="width:1151px; height:34px; background:url(41.png)">
</div>
<div id="du"> 这部分整个往右走了180px 不能调回!
<div class="d1">
<div class="d11"><img src="jtxw.jpg" />
</div>
<div class="d12">
<img src="bu1.jpg" />
</div>
<tr>荣成博隆店招商发布会圆满落幕</tr>
<div class="d13" style="text-align:center; font-size:12px;">
<ul type="square">
<li><img src="xiaobiao_76.jpg" /> 居然之家威海店招商发布会圆满落</li>
<li><img src="xiaobiao_76.jpg" /> 居然之家无锡锡沪路项目成功签约</li>
<li><img src="xiaobiao_76.jpg" /> 以实际行动反哺教育事业 汪林朋董</li>
<li><img src="xiaobiao_76.jpg" /> 居然之家首推“一次消费，终身服</li>
<li><img src="xiaobiao_76.jpg" /> 居然之家会员积分兑换更改啦~</li>
</ul>
</div>
</div>
<div class="d1">
<div class="d11"><img src="xw_53.jpg" />
</div>
<div class="d12">
<img src="bu2.jpg" />
</div>
<tr>居然快屋家装样板间征集令！</tr><br />
<div class="q"><p> 快屋家装样板间征集令，全城限量199户！豪华家电限时送，多重好礼享不停。参与现场活动，豪礼多多！详情咨询：400-0065-095<font color="#0000FF">[点击进入]</font></p></div>
</div>
<div class="d1">
<div class="d11"><img src="xw_56.jpg" />
</div>
<div class="d12">
<img src="bu3.jpg" />
</div>
<tr>2017迎春 大礼漫天飞舞</tr><div class="q"><p> 工程保修10年，专业第三方监理，交1000享工程97折，设计8折，主材预存最高享家装增值10%<font color="#0000FF">[点击进入]</font></p></div>
</div>
<div class="d1">
<div><img src="54.png" /></div>
<div><img src="15856.png" /></div>
</div>
</div>
<div id="bottom">
<div class="b1" style="text-align:center"><font color="#0033CC">
<table align="center" height="15px" width="400px">
<tr>
<td>联系我们</td>
<td>网站地图</td>
<td>友情链接</td>
<td>商户专区</td>
</tr>
</table></font>
</div>
<div class="b2">
<font color="#0033CC"><p></p>Copyright 居然之家 2003-2016, All Rights Reserved. 京ICP备05048971号 京公网安备11010102001707号</font>
</div>
<div class="b3"><img src="pic.gif" /></div>
</div>
</body>
</html>
加大图轮播导致1.导航字体大小改变 2.轮播不可用,在图片路径无误的情况下,图片亦不显示
