首页 > 代码库 > 企业网站编程实践

企业网站编程实践

2024-09-21 01:35:59   217人阅读

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

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=http://www.mamicode.com/‘js/myfocus-2.0.1.min.js‘ ></script>"text/javascript" src=http://www.mamicode.com/‘js/mf-pattern/mF_fancy.js‘></script>"stylesheet" type="text/css" href="http://www.mamicode.com/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: "微软雅黑";
}

 

企业网站编程实践


联系
我们