大神来看下-慕课网

大神来看下

来源：-

精慕门8820854

2017-03-09 09:21

CSS ：

@charset "utf-8";
/* CSS Document */
*
{
   margin:0px;
   padding:0px;
   font-size:12px;
   }

body
{
   background:#f5f5f5;
   }

.header
{
   width:100%;
   height:27px;
   background:url(images/top_bg.jpg) repeat-x;
   }

.header_content
{
   width:1000px;
   margin:0 auto; 
   }

.header_content li
{
   list-style-image:url(images/li_bg.gif);
   float:right;
   width:70px;
   line-height:27px;
   }

.header_content a:link,header_content a:visited
{
   color:#8E8E8E;
   text-decoration:none;
   }

.header_content a:hover,header_content a:active
{
   color:#F00;
   text-decoration:none;
   }

.wrap
{
   width:1000px;
   margin:0 auto;
}

.logo
{
   height:80px;
   background:#FFF;
}

.logo_left
{
   float:left;
   width:200px;


}

.logo_right
{
   float:right;
   width:300px;
   height:28px;
   padding-top:26px;
   color:#8E8E8E;


   }

.logo_right img
{
   vertical-align:middle;
   margin-right:10px;
}

.tel{
   font-family:"仿宋";
   font-size:14px;
   color:#F00;
}

.nav{
   height:40px;
}

.nav_left
{
   background:url(images/nav_left.jpg) no-repeat;
   width:10px;


}

.nav_mid
{
   background:url(images/nav_bg.jpg) repeat-x;
   width:980px;
}

.nav_right
{
   background:url(images/nav_right.jpg) no-repeat;
   width:10px;
}

.nav_left,.nav_mid,.nav_right
{
   float:left;
   height:40px;
   display:inline;
}

.nav_mid_left
{
   width:680px;
   float:left;
   display:inline;
}
.nav_mid_right
{
   width:300px;
   float:left;
   display:inline;
}
/*.nav_mid_left li
{
   float:left;
   list-style:none;
   word-spacing:20px;
   margin:10px 0 10px 20px;
}*/

.nav_mid_left li
{
   float:left;
   list-style-type:none;
   width:100px;
   text-align:center;
   line-height:40px;
}


.nav_mid_left a:link,.nav_mid_left a:visited
{
   color:#FFF;
   text-decoration:none;
   font-size:16px;
   font-family:"微软雅黑";
   }
.nav_mid_left a:hover,.nav_mid_left a:active
{
   color:#F00
   text-decoration:none;
   font-size:16px;
   font-family:"微软雅黑";
}

/*.nav_mid_right
{
   float:right;
   padding:10px 30px 10px 20px;
   background-image:url(images/search.jpg) none;
}*/

.search_text
{
   width:190px;
   height:25px;
   margin:5px;
   background:url(images/search.jpg) no-repeat right center;
   /*background-image;
   background-repeat;
   background-position;*/
   background-color:#FFF;
   padding-right:25px;
   border:1px solid #FFFFFF;
}
.ad
{
   height:320px;
   overflow:hidden;
   margin-top:5px;
}

html:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>慕课网demo</title>
<link rel="stylesheet" type="text/css" href="css.css">
<script src="js/setHomeSetFav.js" type="text/javascript" charset="gb2312"></script>

<script src="js/myfocus-2.0.1.min.js" type="text/javascript"></script>
<script src="js/mf-pattern/mF_YSlider.js" type="text/javascript"></script>
<link href="js/mf-pattern/mF_YSlider.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
myfocus.set({
   id:"Boxid"})
</script>

</head>
<body>
<div class="header">
<div class="header_content">
   <ul>
       <li><a href="#">联系我们</a></li>
       <li><a href="#" onClick="AddFavorite(window.location document.title)">加入收藏</a></li>
       <li><a href="#" onClick="SetHome(window.location)">设为首页</a></li>
   </ul>
</div>
</div>

   <div class="wrap">
    <div class="logo">
    <div class="logo_left"><img src="images/logo.jpg" alt="图片"/></div>
    <div class="logo_right"><img src="images/tel.jpg" alt="热线电话"/>热线电话<span class="tel">11111111</span></div>
    </div>

    <div class="nav">
    <div class="nav_left">
    </div>

    <div class="nav_mid">
    <div class="nav_mid_left">
    <ul>
    <li><a href="#"/>首页</li>
    <li><a href="list.html"/>关于课程</li>
    <li><a href="list.html"/>新闻动态</li>
    <li><a href="list.html"/>课程中心</li>
    <li><a href="list.html"/>在线课程</li>
    <li><a href="list.html"/>人才招聘</li>
    </ul>
    </div>

    <div class="nav_mid_right">
    <form action="" method="post">
      <input type="text" class="search_text"/>
    </form>
    </div>
    </div> 

    <div class="nav_right">
    </div>
    </div>
    <div class="ad" id="picBox">
    <div class="loading"><img src="images/loading.gif" alt="加载中"/>
    </div>
       <div class="pic">
       <ul>
            <li><img src="images/ad2.jpg"/></li>
            <li><img src="images/ad3.jpg"/></li>
            <li><img src="images/ad4.jpg"/></li>
        </ul>
        </div>
    </div>
    </div>


</body>
</html>

写回答关注

0回答

还没有人回答问题，可以看看其他问题

企业网站综合布局实战

本课程重点介绍HTML/CSS实现常见企业网站布局的方法

157038 学习 · 2143 问题

查看课程

相似问题

求大神看看啊

回答 2

请大神帮我看一下，谢谢

回答 1

请大神看看是否正确!

回答 1

大神们帮忙下

回答 3

麻烦大神帮忙看下为什么会显示两行

回答 2

打开慕课网App查看更多内容