码迷，mamicode.com
首页 > Web开发 > 详细

企业网站编程实践

时间：2017-05-10 19:55:42      阅读：192      评论：0      收藏：0      [点我收藏+]

标签：class   load   nav   实践   分享   dad   round   black   div   

有一个问题，不知如何解决。

div的宽度随着缩放变了，本来设置的330px, 缩放的时候会变成330.67px, 怎么回事啊

本来设置的div宽度是330px，加上边框应该是332px, 在没有缩放的时候也好好的，可是缩小的时候，突然发现，第三列被挤下去了，原来是div的宽度变成了332.67px, 发现IE没有这个问题，可能是兼容性问题。

技术分享

 

贴上代码，留作以后参考

index.html代码

<!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>
    <link href="style.css" rel="stylesheet" type="text/css"  />
    <!-- <script type="text/javascript" src=‘js/myfocus-2.0.1.min.js‘ ></script>
    <script type="text/javascript" src=‘js/mf-pattern/mF_fancy.js‘></script>
    <link rel="stylesheet" type="text/css" href="js/mf-pattern/mF_fancy.css"/>-->
     <script src="http://demo.jb51.net/js/myfocus/content/templates/myfocus/js/myfocus-2.0.1.min.js"></script>
    <script type="text/javascript">
        myFocus.set({
            id:‘picBox‘
        })
    </script>
  </head>
  
  <body>
      <div class=‘mainPage‘>
          <div class=‘nav‘>
              <div class=‘nav_left‘>
                  <img src="http://img.mukewang.com/53edadad0001efe202000070.jpg">
              </div>
              <div class=‘nav_right‘>
                  <ul>
                      <li class=‘nav_right_first‘><a href="#">首页</a></li>
                      <li><a href="#">产品特色</a></li>
                      <li><a href="#">产品特色</a></li>
                      <li><a href="#">产品特色</a></li>
                      <li><a href="#">产品特色</a></li>
                      <li><a href="#">产品特色</a></li>
                  </ul>
              </div>
          </div>    <!-- nav结束 -->

          <div class=‘focus‘ id=‘picBox‘>              
            <div class=‘loading‘><img src="http://img.mukewang.com/53edad8c000175cb00300029.jpg" alt=‘请稍稍候‘></div>
                  <div class=‘pic‘>
                      <ul>
                          <li><a href="#"><img src="http://img.mukewang.com/53edad1600019ae910000310.jpg"></a></li>
                          <li><a href="#"><img src="http://img.mukewang.com/53edad3e0001afad10000318.jpg"></a></li>
                          <li><a href="#"><img src="http://img.mukewang.com/53edad2c0001b61310000314.jpg"></a></li>
                      </ul>              
              </div>              
          </div><!-- focus图片结束 -->

          <div class=‘scrollNews‘>
              <div class=‘scroll_left‘><a href="#">滚动新闻</a></div>
              <div class=‘scroll_right‘><a href="#">这是滚动新闻</a></div>
          </div>

          <div class=‘course‘>
              <ul>
                  <li>
                      <img src="http://img.mukewang.com/53edad54000119fb03300130.jpg">
                      <p>玩转bootstrap</p>
                      
                  </li>
                  <li>
                      <img src="http://img.mukewang.com/53edad690001260a03300130.jpg">
                      <p>企业网站案例</p>
                  </li>
                  <li class="course_right_pic">
                      <img src="http://img.mukewang.com/53edad7a0001cde803300130.jpg">
                      <p>JavaScript基础</p>
                      </ul>
                  </li>
              </ul>
          </div><!-- course结束 -->

          <div class=‘content‘>
              <div class=‘news‘>
                  <div class=‘title‘><a>新闻中心</a></div>
                  <div class=‘news_list‘>
                      <ul>
                          <li>
                              <span>8月</br>23日</span>
                              <h3>学习计划之“Android攻城狮初养成”</h3>
                              <p><a href="#">想成为Android攻城狮?想开发一款专属App?没有任何基础的你，应该从何学起?</a></p>
                          </li>
                          <li>
                              <span>8月</br>23日</span>
                              <h3>学习计划之“Android攻城狮初养成”</h3>
                              <p><a href="#">想成为Android攻城狮?想开发一款专属App?没有任何基础的你，应该从何学起?</a></p>
                          </li>
                          <li>
                              <span>8月</br>23日</span>
                              <h3>学习计划之“Android攻城狮初养成”</h3>
                              <p><a href="#">想成为Android攻城狮?想开发一款专属App?没有任何基础的你，应该从何学起?</a></p>
                          </li>
                      </ul>
                  </div>
              </div>
              <div class=‘activity‘>
                  <div class=‘title‘><a>热门活动</a></div>
                  <div class=‘activity_detail‘>
                      <img src="http://img.mukewang.com/53edacdd0001b8e804820302.jpg">
                      <ul>
                          <li><a href="#">慕课网2048源码征集</a></li>
                          <li><a href="#">慕课网2048源码征集</a></li>
                          <li><a href="#">慕课网2048源码征集</a></li>
                          <li><a href="#">慕课网2048源码征集</a></li>
                          <li><a href="#">慕课网2048源码征集</a></li>
                      </ul>
                  </div>
              </div>
              <div class=‘contactUs‘>
                  <div class=‘title‘><a>联系我们</a></div>
                  <div class="contact_list">
                    <p>讲师招募<br>
                        JoV<br>
                        电话：10086<br>
                        QQ:360870202<br>
                        E-mail:gobananas@163.com<br><br><br>
                        网站合作<br>
                        JoV<br>
                        电话：10086<br>
                        QQ:360870202<br>
                        E-mail:gobananas@163.com
                    </p>
            </div>
              </div>
          </div><!-- content结束 -->

          <div class=‘footer‘>
              <p>Copyright ? 2013 imooc.com All Rights Reserved 京ICP备 13046642号-2</p>
          </div><!-- footer结束 -->
      </div><!-- mainpage 结束 -->
  </body>
</html>

 

 

CSS代码

*{
    padding: 0;
    margin: 0;
}
body {
    background-color: white;
}
.mainPage{
    width: 1000px;
    margin: 0 auto;
    
    min-height: 300px;
}
.nav{
    width:1000px;
    height: 70px;
    background-color: white;
    padding-bottom: 5px;
}

.nav_left{
    width:200px;
    float:left;
    height:70px;
}

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

.nav_right li a{    
    text-decoration: none;
    color:black;
    display: block;
}

.nav_right li a:hover, .nav_right_first{
    background: #BD3847;
}

.focus {
    height: 310px;
    //margin-top: 5px;
    overflow: hidden;
}
.scrollNews{
    min-height: 30px;
    margin-top: 10px;
}
.scroll_left{
    width:150px;
    height: 30px;
    background: #be3948;
    text-align: center;
    line-height: 30px;
    float: left;
}
.scroll_left a, .scroll_right a{
    text-decoration: none;
    color:white;
}
.scroll_right{
    width:830px;
    height: 30px;
    background: #3E3E3E;
    line-height: 30px;
    float:left;
    padding-left: 20px;
}
.course{
    height:150px;
    margin: 20px 0;
    background: white;
}
.course li{
    list-style-type: none;    
    width:330px;
    float:left;
    margin-right: 5px;
    text-align: center;
}

.course .course_right_pic{
    margin-right: 0px;
}

.course p{
    border: 1px solid rgb(231,231,231);
}

.content{
    height: 330px;
}
.news,.activity{
    width:330px;
    float: left;
    border: 1px solid rgb(231,231,231);
      margin-right: 2px;
}
.contactUs{
    width:330px;
    float: left;
    border: 1px solid rgb(231,231,231);
    margin-right: 0px;
}
.title a{
    height:35px;
    background-color: rgb(189,56,71);
    color:white;
    display: block;
    text-align: left;
    line-height: 35px;
    padding-left: 20px;
}

.news_list li{
    margin: 10px 5px;
    height: 80px;
    list-style-type: none;
    border-bottom: 1px solid rgb(231,231,231);
    
}

.news_list span{
    display: block;
    color:white;
    background: rgb(189,56,71);
    width:50px;
    height: 50px;
    border-radius:5px;
    text-align: center;
    //line-height: 30px;
    font-size: 16px;
    float: left;
    padding-top: 10px;
    margin: 5px;
}
.news_list h3{
    font-size: 15px;
    
}

.news_list p{
    margin-top:15px;
}
.news_list a{
    text-decoration: none;
    color: black;
    font-size: 14px;
    margin-top:15px;
}

.activity_detail{
    padding: 20px;
}
.activity_detail img{
    width:280px;
    height: 123px;
    margin-bottom: 20px;

}
.activity_detail li{
    list-style-type: none;
}
.activity_detail a{
    text-decoration: none;
    color: black;
    font-size: 16px;
    font-weight: bold;
    line-height: 20px;

}

.contact_list{
    height: 263px;
    padding: 10px;
}
.contact_list p{
    font-size: 15px;
    font-family: "微软雅黑";
}

.footer{
    margin-top:10px;
    clear:left;
    background: rgb(231,231,231);
    width:100%;
    height: 50px;
}

.footer p{
    text-align: center;
    height: 50px;
    line-height: 50px;
    font-weight: bold;
     font-size: 16px;
    font-family: "微软雅黑";
}

 

企业网站编程实践

标签：class   load   nav   实践   分享   dad   round   black   div   

原文地址：http://www.cnblogs.com/fancychen/p/6837508.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！