網頁設計inline_在網頁設計中display:inline-block

1、網頁設計中,屬於常用布局的塊狀結構是什麼

塊級元素按照其應用於結構還是內容分為三種：結構化塊狀元素，終端塊狀元素，多目標塊狀元素。
一.結構化塊狀元素
這類元素用於構造文檔的結構，一個好的文檔結構對於搜索引擎和應用其他技術（如JavaScript）都是十分有利的。它們沒有語義上的含義，僅僅劃分出了文檔的組織方式，並沒有體現文檔的內容。
主要的結構化塊狀元素
* <ol>
* <ul>
* <dl>
* <table>
支持結構化的元素
* <li>
* <dt>
* <dd>
* <caption>
* <thead>
* <tbody>
* <tfoot>
* <colgroup>
* <col>
二.終端塊狀元素
這類元素用於從結構轉向內容，它們擁有語義上的含義，能夠表明內容的性質。終端塊狀元素屬於結構的終點，它們不能再包含其他塊級元素，只能包含文本或行級元素。
終端塊狀元素
* <h1>...<h6>
* <p>
* <blockquote>
* <dt>
* <address>
* <caption>
三.多目標塊狀元素
所謂多目標指的是可以自由的擴展或嵌套文檔的結構，以可以終端的形式出現。當多目標塊狀元素以結構化的方式使用時就含有結構化的內涵，以終端的形式使用就含有語義的內涵。
多目標塊狀元素既可以包含塊狀元素，也可以包含內容（文本與行級元素的組合為內容），但不能同時包含兩者。應該把內容放在塊狀元素中。塊狀元素不應作為行級元素與文本的兄弟元素，受HTML校驗器的限制，目前還沒辦法檢驗出此種情況，但是應該避免。
多目標塊狀元素
* <div>
* <li>
* <dd>
* <td>
* <form>
* <noscript>
在談論CSS布局時，我們需要提前知道一些東西。對於html各種標簽/元素，可以從塊的層面做一個分類：要麼是block(塊元素)，要麼是inline(內聯元素)：
block元素的特點：
* 總是另起一行開始；
* 高度，行高以及頂、底邊距都可控制；
* 寬度預設是它所在容器的100%，除非設定一個寬度。
inline元素的特點：
* 和其它元素都在一行上；
* 高度，行高以及頂、底邊距不可改變；
* 寬度就是它所容納的文字或圖片的寬度，不可改變。
下面對它們的性質及應用做進一步說明：
◎塊元素(block element) 通常作為其它元素的容器，它可以容納內聯元素和其它塊元素。
我們知道默認情況下，塊元素會順序以每次另起一行的方式往下排，而通過CSS控制其樣式，我們可以改變這種默認布局模式，把塊元素擺放到你想要的位置上去。需要指出的是，table標簽也是塊元素的一種，基於table表格和基於CSS+DIV的布局，在使用者看來除了頁面載入速度的差別（table在所有內容元素載入完成後才顯示），沒有其它的差別。但是從頁面的源代碼來看，這種差異就非常大了。基於良好結構理念設計的CSS布局源碼，至少能讓沒有 web開發經驗的用戶很容易找到連續的頁面內容。從這個角度來說，CSS layout code應該有更好的美學體驗。
我們可以把模塊化的DIV想像成一個個box，然後把它們按自己的意願排列組成完整的內容，網頁布局設計就是遵循了同樣的模式。
塊元素(block element) HTML標簽分類明細
* address - 地址
* blockquote - 塊引用
* center - 舉中對齊塊
* dir - 目錄列表
* div - 常用塊級容易，也是css layout的主要標簽
* dl - 定義列表
* fieldset - form控制組
* form - 交互表單（只能用來容納其它塊元素）
* h1 - 大標題
* h2 - 副標題
* h3 - 3級標題
* h4 - 4級標題
* h5 - 5級標題
* h6 - 6級標題
* hr - 水平分隔線
* isindex - input prompt
* menu - 菜單列表
* noframes - frames可選內容，（對於不支持frame的瀏覽器顯示此區塊內容
* noscript - 可選腳本內容（對於不支持script的瀏覽器顯示此內容）
* ol - 排序表單
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表
◎內聯元素(inline element) 一般都是基於語義級(semantic)的基本元素，只能容納文本或者其它內聯元素。
為了比較明確的表現出 block 與 inline 的區別，我們可以利用它們各自的代表元素div和span的演示進行說明：
XXXXXXXXX
This's a DIV layout
XXXXXXXXX
div另起一行，它的形狀不受內部文字的影響
XXXXXXXThis's a span layoutXXXXXXX 所有元素在一行，span剛好包容文字
內聯元素(inline element) HTML標簽分類明細
* a - 錨點
* abbr - 縮寫
* acronym - 首字
* b - 粗體(不推薦)
* bdo - bidi override
* big - 大字體
* br - 換行
* cite - 引用
* code - 計算機代碼(在引用源碼的時候需要)
* dfn - 定義欄位
* em - 強調
* font - 字體設定(不推薦)
* i - 斜體
* img - 圖片
* input - 輸入框
* kbd - 定義鍵盤文本
* label - 表格標簽
* q - 短引用
* s - 中劃線(不推薦)
* samp - 定義範例計算機代碼
* select - 項目選擇
* small - 小字體文本
* span - 常用內聯容器，定義文本內區塊
* strike - 中劃線
* strong - 粗體強調
* sub - 下標
* sup - 上標
* textarea - 多行文本輸入框
* tt - 電傳文本
* u - 下劃線
* var - 定義變數
◎可變元素是基於以上兩者隨環境而變化的，它的基本概念就是根據上下文關系確定該元素是塊元素還是內聯元素。一旦確定了它的類別，它就遵循塊元素或者內聯元素的規則限制。
可變元素 HTML標簽分類明細
* applet - java applet
* button - 按鈕
* del - 刪除文本
* iframe - inline frame
* ins - 插入的文本
* map - 圖片區塊(map)
* object - object對象
* script - 客戶端腳本
但是通過CSS，我們可以擺脫上面表格里HTML標簽歸類的限制，自由地在不同標簽/元素上應用我們需要的屬性。例如，我們可以對塊元素[ ul ]標簽加上 display:inline 屬性，讓原本垂直的列表水平顯示，這在我們設置Blog導航條時得到了廣泛應用；我們也完全可以把內聯元素[ cite ]加上 display:block 這樣的屬性，讓它也有每次都從新行開始的屬性。

2、網頁設計中,span標簽是什麼東西啊?

如果不對 span 應用樣式，那麼 span 元素中的文本與其他文本不會任何視覺上的差異。盡管如此，上例中的 span 元素仍然為 p 元素增加了額外的結構。
可以為 span 應用 id 或 class 屬性，這樣既可以增加適當的語義，又便於對 span 應用樣式。
可以對同一個 <span> 元素應用 class 或 id 屬性，但是更常見的情況是只應用其中一種。這兩者的主要差異是，class 用於元素組（類似的元素，或者可以理解為某一類元素），而 id 用於標識單獨的唯一的元素。
提示：事實上，您也許已經注意到了，W3School 站點上有一些文本的樣式與其他文本是不同的。比如「提示」使用了粗體的橘紅色。盡管實現這種效果的方法非常多，但是我們的做法是：使用「提示」使用 span 元素，然後對這個 span 元素的父元素，即 p 元素應用 class，這樣就可以對這個類的子元素 span 應用相應的樣式了。
HTML:
<p class="tip"><span>提示：</span>... ... ...</p>

CSS:
p.tip span {
font-weight:bold;
color:#ff9955;
}
說的簡單點就是給一些文字圖片加一個定義！然後改變文字和圖片的樣式

3、網頁設計中如何解決瀏覽器兼容問題？

1. 目標不居中；
一般新手都愛出現這個問題，主要原因是對盒子模型不夠理解，如果發現你的頁面沒有居中，基本上有兩種情況：
a. 如果是在瀏覽器中沒有居中，就是沒盒子，就是要用一個大DIV把所有需要居中元素裝起來，然後給盒子一個css樣式margin:0 auto;
b. 如果想要盒子內的元素居中，必須定義盒子的絕對寬度,然後給盒子一個CSS樣式text-align:center;

2. 目標在不同瀏覽器上的位置不同；
a. 首先不要去急著找hack,先看一下自己的代碼有沒有錯誤，DW里有一個「檢查瀏覽器兼容性」功能特別實用；
b. 然後，盡量讓目標的位置初始化，使之在所有瀏覽器都處在同一個位置，這個條件的前提是，不寫hack，最後再一個方位一個方位調整。

3. 目標與目標之間距離在各個瀏覽器上的區別；
a. 給其中一個目標加背景顏色；
b. 觀察背景色與另外一個目標的距離，查看是不是這個目標造成的距離問題
c. 如果不是上一個目標，那就給另外一個目標也加上背景顏色。
d. 這樣很容易判斷出那個目標造成的原因，就針對那個目標進行修改。

4. IE6兼容問題最多的一個，浮動問題。
a. flaot浮動造成IE6下面雙倍邊距問題，這個最常見，也最好處理，解決方法：
只需要給這個DIV加一個樣式：display:inline;
b. 布局的時候經常會遇到這種情況：發現有一個DIV浮動了，接下來的一個DIV本來是要在下面顯示的，結果跑上面去了，這種情況一般在FF下面會出現。
解決的辦法：清除浮動，在設置過浮動的那個DIV下面加一個DIV，給個樣式clear:both;如下
<div style="float:left;height:100px; width:500px;"> <div style="clear:both;"> <div style="height:100px; width=300px">

5. IE8兼容問題
ie8下兼容問題，這個最好處理，轉化成ie7兼容就可以。在頭部加如下一段代碼，然後只要在IE7下兼容了，IE8下面也就兼容了 <meta http-equiv="x-ua-compatible" content="ie=7" />

6. 背景兼容問題
有的時候明明給一個DIV加了背景顏色或背景圖片，但是卻顯示不出來或者顯示不全。
解決辦法：首先，有可能是DIV沒有設置絕對高度。如果設置了寬度和高度還沒有效果，那麼給DIV一個樣式display:block；（通常a:hover加背景的時候經常遇到）。
另外，如果高度必須要設置成自動的話，那麼就給DIV一個樣式overflow:hidden;

7. IE7和Firefox兼容問題
很多朋友DIV+CSS的時候，會出現，在IE的幾個瀏覽器下都好使，就是FF下有問題。
解決方法：height:100px;/*FF下顯示100的高*/ +height:120px;/*IE678下顯示120高*/
原理：FF不識別加過符號的屬性，而IE識別。

4、網頁設計中，怎麼用CSS讓不同行的字顯示在一行，例如圖所示，上面怎麼變成下面這種？

可以通過浮動來設置，讓不同行的兩行一個左浮動，一個右浮動，這樣，它們就顯示專在一行了。屬
還有一種方法是所有元素都左浮動，然後指定寬度，讓寬度正好是兩列的值，那麼到兩行的時候，它會自動折行。
通過決定定位，分別對沒一行文字進行絕對定位，因為是絕對定位，所以可以指定它們到任意位置。position:absolute可以解決這個問題。

5、設計自己的網頁

初級前端

主要學習三個部分：HTML，CSS，JavaScript

一、html + css部分：這部分特別簡單，到網上搜資料，書籍視頻非常多。css中盒子模型，流動，block，inline，層疊，樣式優先順序等這些自學起來也是非常容易。最後再深入了解下瀏覽器差異性，ie9以下兼容簡單了解就行了，ie9以下瀏覽器被淘汰掉是趨勢，低版本沒必要浪費大量時間去學習兼容主流瀏覽器，google chrome瀏覽器、firefox瀏覽器、safari瀏覽器、opera瀏覽器即可。瀏覽器差異內容很多，建議在實踐中多多積累。

二、JavaScript部分。1.基礎學習：難點，也是重點，要學的內容實在很多，如果沒有其他編程語言的基礎的話，學起來可能要費些力，有很多比較抽象的概念，必須要深入理解，比如閉包、原型、面向對象、封裝等，要理解透徹。看書是必不可少的，找一本優秀的js書從頭到尾，反復研究學習，第一遍可以快速翻閱，大體知道了解概念即可，第二三遍就需要深入學習了。另外，js面向對象編程必須要學習，非常重要，個人推薦一本書， Stoyan Stefanov著，凌傑譯的《javascript面向對象指南》。邊學邊練，實踐出真知。

針對那些有條件的人來說，很多小夥伴更喜歡的是自學。但是一個人自學畢竟力量是有限的，為了讓想學習的人可以更好的學習，給大家推薦一個裙，前面是6 1 1，中間是肆二 8，最後面就是壹四二，這里有很多想學習的人和你一起交流，也有大牛每天晚上免費教學，想要學習的人都可以加入我們，但是我們只歡迎想學習的人，不是來學習，隨便看看的就不要進了。

2.jQuery學習：這些基礎知識掌握好之後，還需要學jQuery，這是一個非常優秀的Javascript庫，大型開發必備。它簡化了Javascript的復雜操作，消除了Javascript跨平台兼容問題，提供了大量實用方法，有良好的文檔和幫助手冊，是一個非常成熟的Javascript庫。慕課網學習視頻幕課網。學習方法也很簡單，照著產品文檔做幾個頁面就行了，不用面面俱到，以後遇到問題查文檔就行了。

大概流程就是這樣，如下圖所示：3.進階學習：有了以上知識，對於大多數小型網站，你應該已經可以寫出能夠工作的代碼了。但要想成為更專業的前端，你還需繼續努力。更高的要求大概還有四方面：易維護，可測試，高性能，低流量（移動端）。

中高級前端

1.工具學習習：大型項目中，前端代碼構建已經不是簡單的壓縮一下了，依賴管理、模塊合並、各種編譯步步不可缺少，需要學會使用grunt、gulp等前端構建工具，要學習的還有：包管理器bower、npm，代碼優化CSS Lint、JSHint、JSLint，CSS預處理器less、sass,代碼管理及版本控制svn、Git，web框架/伺服器Node、Express，代碼規范、HTML模塊化、css模塊化。

2.布局框架學習如Bootstrap。

3.新技術html5學習。

4.js框架學習，requireJS、 AngularJS等，往前端架構師靠近。

5.nodejs學習。

到招聘網站，參考任聘要求，准沒錯，舉例如下：

1.精通html和css，能製作符合W3C標準的靜態頁面；2.精通JavaScript編程，對面向對象編程思想有深刻理解；3.精通主流Javascript庫/框架jQuery；4.理解並掌握JavaScript語言核心技術DOM、BOM有Javascript性能優化經驗；5.對瀏覽器兼容性有深入的研究，精通各種瀏覽器問題；6.了解Backbone.js、AngularJs等MVC框架並有實際項目開發經驗；7.了解http://asp.net等伺服器後台技術和擁有一定的C#編程能力者優先；8.對交互體驗、可用性、用戶體驗有一定程度的理解；9.有良好的責任心和團隊合作能力、能承受較大的壓力；

自己動手搜索下吧，確定目標和方向，以上是個人路線，僅供參考。

6、網頁設計類似百度搜索頁面是怎麼做出來的

網頁設計這個一般都是要求會前端代碼，html css js flash 還有些其他的腳本插件什麼的。

如果代碼寫的熟練可以不用DW。寫網頁的工具很多，用txt文本文檔也可以。

好了，貼上搜索框代碼，使用需要後台程序支持，直接點了可是什麼都沒有哦。

<!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=gb2312" />
<title>搜索框</title>
<style type="text/css" media="screen">
      body {
        background-color: #f1f1f1;
        margin: 0;
      }
      body,
      input,
      button {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      }
      .container { margin: 30px auto 40px auto; width: 800px; text-align: center; }

      a { color: #4183c4; text-decoration: none; font-weight: bold; }
      a:hover { text-decoration: underline; }

      h3 { color: #666; }
      ul { list-style: none; padding: 25px 0; }
      li {
        display: inline;
        margin: 10px 50px 10px 0px;
      }
      input[type=text],
      input[type=password] {
        font-size: 13px;
        min-height: 32px;
        margin: 0;
        padding: 7px 8px;
        outline: none;
        color: #333;
        background-color: #fff;
        background-repeat: no-repeat;
        background-position: right center;
        border: 1px solid #ccc;
        border-radius: 3px;
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        transition: all 0.15s ease-in;
        -webkit-transition: all 0.15s ease-in 0;
        vertical-align: middle;
      }
      .button {
        position: relative;
        display: inline-block;
        margin: 0;
        padding: 8px 15px;
        font-size: 13px;
        font-weight: bold;
        color: #333;
        text-shadow: 0 1px 0 rgba(255,255,255,0.9);
        white-space: nowrap;
        background-color: #eaeaea;
        background-image: -moz-linear-gradient(#fafafa, #eaeaea);
        background-image: -webkit-linear-gradient(#fafafa, #eaeaea);
        background-image: linear-gradient(#fafafa, #eaeaea);
        background-repeat: repeat-x;
        border-radius: 3px;
        border: 1px solid #ddd;
        border-bottom-color: #c5c5c5;
        box-shadow: 0 1px 3px rgba(0,0,0,.05);
        vertical-align: middle;
        cursor: pointer;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-appearance: none;
      }
      .button:hover,
      .button:active {
        background-position: 0 -15px;
        border-color: #ccc #ccc #b5b5b5;
      }
      .button:active {
        background-color: #dadada;
        border-color: #b5b5b5;
        background-image: none;
        box-shadow: inset 0 3px 5px rgba(0,0,0,.15);
      }
      .button:focus,
      input[type=text]:focus,
      input[type=password]:focus {
        outline: none;
        border-color: #51a7e8;
        box-shadow: inset 0 1px 2px rgba(0,0,0,.075), 0 0 5px rgba(81,167,232,.5);
      }

      label[for=search] {
        display: block;
        text-align: left;
      }
      #search label {
        font-weight: 200;
        padding: 5px 0;
      }
      #search input[type=text] {
        font-size: 18px;
        width: 705px;
      }
      #search .button {
        padding: 10px;
        width: 90px;
      }

    </style>
</head>
<body>
<div class="container">
  <div id="search">
    <label for="search"></label>
    <input type="text" name="q">
    <input class="button" type="submit" value="Search">
  </div>
</div>
<div style="text-align:center;margin:100px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

7、網頁設計模仿百度首頁如下圖

8、網頁設計中如何解決瀏覽器兼容問題

為了能讓網站設計正常的運行於各種瀏覽器平台，網站設計師們不得不想盡辦法處理好網站建設中的瀏覽器兼容問題。正是因為網站設計當中的這一需要產生了一項新技術— CSS Hack。 CSS Hack 就是針對不同瀏覽器寫出不同的 CSS code 的過程，主要用來解決目前各類瀏覽器無法標准解析CSS樣式，導致同一網站設計頁面在不同瀏覽器下出現顯示效果不一致的兼容問題。針對不同瀏覽器，可以將CSS Hack 網站設計代碼整理如下：
1、針對I E 系列瀏覽器的網站設計代碼針對 IE 6 的專屬 CSS Hack 網站設計代碼 #id{ _display: block; } 也就是在網站設計CSS屬性前加一個小劃線就好。針對 IE 7 的專屬 CSS Hack 網站設計代碼 #id{ *display: block; } 即在網站設計CSS屬性前加上一個星號即可針對 IE 8 的專屬 CSS Hack 網站設計代碼 #id{ margin-top: 10px 9; /*IE8*/ } 如上所示，解決辦法為在網站設計CSS屬性後分號前加上空格與斜線並加入一個數字9即可。
2、針對火狐的CSS Hack 網站設計代碼火狐可謂是最標準的瀏覽器之一了，網站設計技術只要稍稍不到位就能體現得淋漓盡致，所以不少網站設計師也很頭痛，其實想要解決火狐的兼容性除了要把網站設計的基礎知識扎牢之外只要將CSS代碼寫入到下圖 @-moz-document url-prefix（）{ } 裡面就行了 @-moz-document url-prefix() { #id{ display: block; } } 。
3、針對 Safari 的CSS Hack 網站設計代碼 Safari是蘋果計算機的最新作業系統Mac OS X中新的瀏覽器，用來取代之前的Internet Explorer for Mac，使用了KDE的KHTML作為瀏覽器的運算核心。 @media screen and (-webkit-min-device-pixel-ratio:0) { #id { display: block; } } 兼容性做法和火狐相近。
4、針對 Opera 的CSS Hack 網站設計代碼 Opera即Opera Software ASA，是台式機、各種設備和移動網路瀏覽器市場的商業領袖，因快速、小巧和比其他瀏覽器更佳的標准兼容性獲得了國際上的最終用戶和業界媒體的承認，並在網上受到很多人的推崇。 @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body #id { display: block; } } 這個世界上必然不會存在絕對完美的事物，因此運用以上方法讓我們的網站設計更好的與各種瀏覽器兼容的時候其實已經違反了網站製作的W3C標准。

9、建立網站的時候，為什麼不建議用inline styles? 求正解

inline styles即CSS內聯樣式，不利於CSS代碼的集中管理和頁面的打開速度，一般建議使用External Style即CSS外聯樣式設計網頁。

10、在網頁設計中display:inline-block,是什麼意思？

inline元素都使用默認高度，你設置了也沒有效果。
block元素默認情況下獨佔一行（就像元素前後都給加了一個換行），可以設置寬度、高度。
設置了inline-block的元素，你給它設置寬高有效果，而且還前後都不換行。
img就是一個典型的inline-block元素。

導航:首頁 > 萬維百科 > 網頁設計inline

網頁設計inline

與網頁設計inline相關的知識