运用html常用标签和css定位等学做模仿百度导航页面

导航部分文字链接，鼠标触碰变颜色，除百度logo引用图片外，其它均代码编写。注释部分是一开始用的百度一下截图做的按钮，后来用div填充颜色写了一个按钮。效果图如下。

HTML代码如下：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>百度一下，你就知道</title>

 <link href="css/homework.css" rel="stylesheet" type="text/css">

 </head>

 <body>

     <div id="nav">

         <ul>

             <li><div id="more"><a href="#"><font color="white">更多产品</font></a></div></li>

             <li class="b"><a href="#">设置</a></li>

             <li class="b"><a href="#">登录</a></li>

             <li class="hei"><a href="#">学术</a></li>

             <li class="hei"><a href="#">贴吧</a></li>

             <li class="hei"><a href="#">视频</a></li>

             <li class="hei"><a href="#">地图</a></li>

             <li class="hei"><a href="#">hao123</a></li>

             <li class="hei"><a href="#">新闻</a></li>

         </ul>

     <div id="logo"></div>

     <div id="search">

         <div id="l">

             <div id="kuang">

                 <input id="camera" type="text"

                     style="width: 600px; height: 32px; border: #5f9dfa 1px solid;">

             </div>

         </div>

         <div id="r">

             <!-- <input id="an" type="image" src="data:images/baiduan.png"> -->

             <font color="white">百度一下</font>

         </div>

     </div>

 </body>

 </html>

CSS代码如下：

 #nav .hei a:hover{

     color:blue;

 }

 #nav .b a:hover{

     color:blue;

 }

 li #more{

     width:60px;

     height:25px;

     background-color:#3385ff;

     font-size:13px;

     line-height:25px;

     text-align: center;

 }

 li #more a{

     text-decoration: none;

     font-color:write;

 }

 .hei{

     font-color:black;

 }

 .b{

     font-color:black;

 }

 #nav{

     width:100%;

     height:30px;

     //font-color:black;

 }

 a:link{

     color:black;

 }

 li{

     list-style:none;

     width:60px;

     float:right;

     font-size:13px;

     font-color:black;

     line-height:30px;

 }

 .hei{

     font-weight:bolder;

 }

 #logo{

     width:100%;

     height:200px;

     background:url("../images/baidulogo.png") no-repeat 50%,50%;

 }

 #search{

     width:100%;

     height:300px;

     float:left;

 }

 #l{

     width:66%;

     height:300px;

     float:left;

 }

 #kuang{

     float:right;

     width:600px;

     height:32px;

     float:right;

 }

 #camera{

     background:url("../images/camera.png")  no-repeat 100%,100%;

 }

 #r{

     width:34%;

     height:300px;

     float:left;

 }

 /* #an{

     float:left;

 } */

 #r{

     width:101px;

     height:36px;

     background-color:#3385ff;

     font-size:14px;

     line-height:37px;

     text-align: center;

 }

巴特西

运用html常用标签和css定位等学做模仿百度导航页面

最新文章

热门文章