2. 程式人生 > >企業網站編程實踐

企業網站編程實踐

阿新 • • 發佈：2017-05-10
pla html 沒有 tac doctype data type css代碼 isp

有一個問題，不知如何解決。

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: "微軟雅黑";
}

企業網站編程實踐

相關推薦

企業網站編程實踐

pla html 沒有 tac doctype data type css代碼 isp 有一個問題，不知如何解決。 div的寬度隨著縮放變了，本來設置的330px, 縮放的時候會變成330.67px, 怎麽回事啊 本來設置的div寬度是330px，加上邊框應該是332px

linux驅動開發之framebuffer應用編程實踐（一）

linux驅動開發之framebuffer驅動 1、framebuffer應用編程 (1)打開設備文件 (2)獲取設備信息 宏定義的命令在/linux/fb.h中 不可變信息FSCREENINFO，使用ioctl參數有FBIOGET_FSCREENINFO宏名，表示用ioctl從

Socket編程實踐(3) --Socket API

address img silent rcv adb desc () 默認 cal socket函數#include <sys/types.h> #include <sys/socket.h> int socket(int domain, int

Java並發編程實踐讀書筆記（5） 線程池的使用

設計 java並發編程 指定 數據交換 什麽 讀書 body 發展 ima Executor與Task的耦合性 1，除非線程池很非常大，否則一個Task不要依賴同一個線程服務中的另外一個Task，因為這樣容易造成死鎖； 2，線程的執行是並行的，所以在設計Task的時候要考慮

java線程與並發編程實踐（一）

tee start new read 它的 static ctrl+ als 函數 一、給出線程的定義 線程就是一條在程序代碼中獨立執行的路徑二、給出runnable的定義 一個runnable就是一段封裝在對象中的代碼序列，它的類實現了runnable接口三、

Java線程與並發編程實踐----同步

程序 同時 問題 應該 沒有 通過 餓死 繼續 順序 上一節我們知道了java如何創建線程並啟動，當線程之間沒有交互，程序開發就十分簡單了，但如果線程之間發生交互，通過共享變量的方式進行交互，就會引發很多線程不安全問題，如，競態條件，數據競爭以及緩存變量。 競

Java線程與並發編程實踐----等待通知(生產者消費者問題)線程

static string @override 現在 循環 urn sum inter 一個 Java提供了一套API來支持線程之間的交互。在Object類中提供了一套等待通知的API wait() notify() notifyAll()

Java線程與並發編程實踐----同步器(Phaser)

出了 dpa 主程序 public term 進行 als 同步 打印 Phaser是一個更加彈性的同步屏障。和同步屏障一樣，一個phaser使得一組線程在屏障上等待，在最後一個線程到達之後，這些線程才得以繼續執行。phaser也提供了和barrieraction等

Java線程與並發編程實踐----同步器(交換器、信號量)

開啟 style pub for 並發 adp ole code 一個 一、交換器 交換器提供了一個線程之間能夠交換對象的同步點。每個線程都會往這個交換器的exchange()方法傳入一些對象，匹配夥伴線程，同時接受夥伴對象作為返回值。java.util.conurr

Java線程與並發編程實踐----鎖框架

等待 for sleep exec 實現 return 詞法 rgs com Java.util.concurrent.locks包提供了一個包含多種接口和類的框架，它針對條件進行加鎖和等待。不同於對象的內置加鎖同步以及java.lang.Object的等待/通知機

Java線程與並發編程實踐----額外的並發工具類

pro 應該 多線程操作 它的 使用 som ron java 如果 一、並發集合 java.util包下提供了很多的集合類，如ArrayList、TreeSet、HashMap，但是這些集合都是非線程安全的，並且對於單列集合的叠代器，采用的是快速失敗機制，當正在叠代

Java 並發編程實踐基礎 讀書筆記： 第三章 使用 JDK 並發包構建程序

mod 獲取鎖 -o key 讀取 拋出異常 編程實踐 arraylist ask 一，JDK並發包實際上就是指java.util.concurrent包裏面的那些類和接口等 　　主要分為以下幾類： 1，原子量；2，並發集合；3，同步器；4，可重入鎖；5，線程池 二，原子量

《Java並發編程實踐》筆記4——線程池高級

iss 資源 有一個 RM mic getclass term 泄露 bsp 作者：chjttony 1.估算線程池最優大小： Ncpu = CPU的數量 = Runtime.getRuntime().availableProcessors(); Ucpu = 目標C

筆記：MDN的服務器端網站編程

dem 概念 數據返回 圖表 個數 ide done tel pan 互聯網是如何工作的 互聯網（Internet）和網絡（web） 互聯網是基礎設施，網絡是建立在這種基礎設施之上的服務。 網頁，網站，網絡服務器和搜索引擎的區別是什麽？ 網頁（webpage） 一份能夠

Java8函數OA現金盤平臺出租式編程實踐精華

資源共享 str 精華 tor menus new 細節 first ger 現在是OA現金盤平臺出租 haozbbs.com Q1446595067 資源共享的時代，同樣也是知識分享的時代，如果你覺得本文能學到知識，請把知識與別人分享。 緒論 從java8開始，我們就

敏捷軟件開發：原則、模式與實踐 一次編程實踐 保齡球記分代碼

spa ack ext frame owin its else int 記分 //類Score package com.java.bowlingscore; public class Scorer { public void addThrow(int pins){ itsT

Python入門經典. 以解決計算問題為導向的Python編程實踐（高清版）PDF

pan https 有助於 開始 lse 打開 重點 好的 字典 Python入門經典. 以解決計算問題為導向的Python編程實踐（高清版）PDF百度網盤鏈接：https://pan.baidu.com/s/1juLsew8UiOErRheQPOuTaw 提取碼：fssd

Spring切面編程實踐【原創】

color 維護 alt name 步驟 creat point ice npoi 定義 什麽叫Spring面向切面編程（AOP），請自行百度，這邊就不做詳細介紹了。 場景 有兩個對象，字典和工程信息Bean，每次新增或修改對象時，記錄新增和修改的時間。 基類定義

Python 編程快速上手 讓繁瑣工作自動化-第十一章實踐項目 11.11.2 圖像網站下載

https 照片 快速 mage mar 分享圖片 自動化 技術分享 ces Python 編程快速上手 讓繁瑣工作自動化-第十一章實踐項目 11.11.2 圖像網站下載編寫一個程序，訪問圖像共享網站，如Flickr 或Imgur，查找一個類型的照片，然後下載所有查詢結果的

python編程快速上手之第10章實踐項目參考答案(11.11.2)

答案 nic .com final timeout pre image 保存圖片 iframe #!/usr/bin/env python # -*- coding:utf-8 -*- import os import re import urllib import