企业网站编程实践
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了企业网站编程实践相关的知识,希望对你有一定的参考价值。
有一个问题,不知如何解决。
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:[email protected]<br><br><br> 网站合作<br> JoV<br> 电话:10086<br> QQ:360870202<br> E-mail:[email protected] </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: "微软雅黑"; }
以上是关于企业网站编程实践的主要内容,如果未能解决你的问题,请参考以下文章