每天一点记录（本次求教）

最新推荐文章于 2024-11-03 20:03:09 发布

jx1634459363

最新推荐文章于 2024-11-03 20:03:09 发布

阅读量536

点赞数

文章标签： csdn博客 html css 编程导航

本文链接：https://blog.csdn.net/jx1634459363/article/details/26007925

版权

这是我写的用css嵌入样式的导航网页，我试了很多下，还是不能把第一个<div></div>的大框架格式调好，运行出来的网页虽然看起来没什么别扭的，但下面的<div></div>框架是我用margin-left 属性网上凑的，所以总体效果不大好。。。希望有css专业技能的大师能帮我解决一下。。

<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>div的框架结构</title>
<style type="text/css">
#one{
width:980px;

background-color:#FF9933;
margin: auto;
border: outset #CC0033;
padding:0;

}
#two{
    width:980px;
height:90px;
background-color: #0066FF;
margin: auto;
border: outset #FF00FF;
` padding:0;
z-index:}
#three{
    width:980px;
height:50px;
background-color: #003333;
margin: auto;
border: outset #660099;
padding:0;

}
#three1 li{
size:2px;
float:left;
list-style:none;
text-align:center;
padding-right:10px;
margin-right:5px;

}
    #three1 a{
padding:1px 5px 1px 5px;
background-image:url(5.gif);
background-repeat:repeat-x;

}

#three1 a:hover{
background-image:url(4.jpg);
}

#four{

width:180px;
height:752px;
background-color: #FF6699;
border: outset #CCFF66;
margin-left:170px;
float:left;

}
#five{
float:left;
height:752px;
width:795px;
background-color: #003366;
border: outset #330033;

}
#six{
margin-left:170px;
width:980px;
height:30px;
background-color: #FF66FF;
border: outset #0000CC;
clear:both;

}

</style>
</head>

<body>
  <div id="one"></div>
  <div id="two">!!!</div>
  <div id="three">
   <div id="three1">
      <ul>
       <li><a href="#">one</a></li>
       <li><a href="#">two</a></li>
       <li><a href="#">three</a></li>
       <li><a href="#">four</a></li>
       <li><a href="#">five</a></li>
       <li><a href="#">six</a></li>
       <li><a href="#">seven</a></li>
       <li><a href="#">eight</a></li>
      </ul>
   </div>

  </div>
  <div id="four">!!</div>
  <div id="five"></div>
  <div id="six"></div>
</div>