整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
iv+css排版是最新的網頁排版理念，完全有別舊的排版方式（比如說table排版）。首先在頁面整體上進行div標簽劃分內容區域，然后再用css進行定位，最后再對相應的區域添加內容。div+css這種排版十分簡單，而且相對容易操作。下面為大家介紹css+div布局方法。
1、用div將頁面劃分
用div將頁面劃分這是對網站頁面排版第一步，網頁整體框架確定后才能進行下一步。主要是用div劃分出各個內容區域，以最簡單的頁面框架為例，頁面一般有banner、主體內容、菜單主導航、頁面底部（footer又叫腳注）幾個部分構成，每個部分分別由自己的id來標識。如圖所示：
2.設計各內容塊的位置
頁面內容確定后，則需要根據內容本身去考慮夜班的版型，例如菜單、雙欄、左右中，一般小型網站采用都是兩欄，大型網站和一些門戶網站大都使用左中右三欄，一般是建議使用兩欄。等內容塊確定后就可以使用css直接定位了。
3、用css定位
把頁面框架確定后就可以css對各個設計的內容塊進行定位，然后對各個塊進行整體規劃，最后再添加內容。網頁帶入如下
網頁效果
上面的排版是比較簡單的，用了兩次浮動（float）定位、5次居中對齊、1次清除浮動。banner區域一般放置圖片，導航放置都是鏈接可以直接放a標簽或者是ul標簽、h2標簽套用a標簽，網站主體內容一般放置，鏈接（ul或者ol標簽套用a標簽）、圖片、內容摘要（p標簽套用a標簽）。最后給大家留一個作業上面的代碼最少可以精簡3處，你能找出來幾處嗎？
關于css+div布局方法先聊到這，有興趣可以自己動手實踐一下，每天學習一個知識點，每日寄語-“寧可辛苦一陣子，不要苦一輩子。”
TML是超文本標記語言。
web標準是由W3C和其它標準化組織制成集合。
結構（對網頁元素進行整理和分類-HTML）
表現（設置網頁元素的版式，顏色，大小等外觀樣式-CSS）
行為（模型的定義及交互的表現-JS）
加粗:<strong>和<b>
傾斜：<em>和<i>
刪除線：<del>和<s>
下劃線：<ins>和<u>
<div>分割分區<span>跨度跨距
圖片標簽<img/>
屬性: src圖片路徑
alt替換文本，圖片無法正常顯示
title提示文本，鼠標放到圖像顯示
width寬度，height高度（只需要修改其中一個）
border邊框（無需單位直接寫數值）
注意：
①圖像標簽可以擁有多個屬性，必須寫在標簽名后面
②屬性之前不分先后順序，標簽名與屬性，屬性與屬性之間需要空格分開
③屬性采取鍵值對的格式
相對路徑：以引用文件所在位置為參考基礎
（同一級路徑，下一級路徑/，上一級路徑../）
絕對路徑：從盤符開始的路徑（\）
常用屬性
img ——vspace垂直邊距 ，hspace水平邊距 align對齊
details,summary，鼠標點擊時顯示或隱藏
mark 文本中高亮顯示，和strong相似
cite 用于引用標記，斜體顯示
draggable true選中后可以拖動操作
font定義 font-style font-weight font-size/line-height font-family 順序不能改變
word-wrap break-word長單詞或url地址自動換行
letter-spacing字間距
word-spacing單詞間距
line-height行間距
text-decorantion文本裝飾unline下劃線，overline上劃線，line-through刪除線
text-indent 2em 首行縮進兩個字符
white-space空白符處理 pre
box-sizing:content-box當widthh和height的時候不包括margin和panding
更換圖層位置，z軸偏移z-index:-10
align-items:center居中對齊
align-self:center
超鏈接標簽<a>
href鏈接目標地址
target鏈接頁面打開的方式（_self當前窗口打開,_blank新窗口中打開方式）
外部鏈接，內部鏈接，空鏈接，下載鏈接，網頁元素鏈接，錨點鏈接（快速定位到頁面的某個位置- 添加id屬性）
去除超鏈接樣式:text-decoration:none
特殊字符
空格符
小于號< 大于號>
表格標簽
align對齊方式
bolder表格邊框
cellpadding單元格與內容之間空白
cellspacing單元格與單元格之前空白
合并單元格：rowspan colspan
列表標簽
無序列表：ul li
有序列表：ol li
自定義列表：dl dt dd
表單標簽
完整表單：表單域<form>，表單控件，提示信息
<form>
——action（指定接受并處理表單數據的服務器程序的url地址）
——method（get/post設置表單數據的提交方式）
——name（指定表單名稱）
<input>輸入元素
type屬性：button（點擊按鈕）checkbox（復選框）file（輸入字段和“瀏覽”按鈕）hidden（隱藏輸入字段）image（圖片形式提交按鈕）password（密碼字段）radio（單選按鈕）reset（重置按鈕）sumbit（提交按鈕）text（單行輸入字段，默認20個字符）
name屬性：（相同的名字——單選框和復選框）區別不同表單元素
value屬性：定義input元素值
checked屬性：頁面首次加載是否選中
maxlength屬性：輸入字段的最大值
<lable>標簽
用于綁定一個表單元素，當點擊<lable>標簽內的文本時，瀏覽器會自動將焦點轉到或者選擇對應的表單元素上，用來增加用戶體驗。
<lable>標簽的for屬性與相關元素的id屬性相同
<select>下拉列表元素
-<option>
-selected="selected"默認選中
<textarea>文本域
-cols rows （每行每列字數）
了干貨，其它什么也沒有 | ||||
職場 | 數據 | 新媒體 | 設計 | 極客 |
新媒體托管/設計/咨詢服務：021 37218818
各位文科出身的微信運營人們，你們好。現在已經是 8102 年，微信公眾平臺的紅利早已遷移到交互式互動圖文、小程序、H5 營銷等牽涉一定代碼基礎的領域。
文科生可以學好嗎？無需懷疑，JZ 的創始人之一計老師出身于復旦大學思想政治教育專業，所以請你相信——
文科生也可以輕松駕馭微信 H5 排版。
你缺少的僅僅是一個學習路線的指導，和你的一點耐心。接下來，我們來了解一下具體的進階辦法。
復習一下大學四級詞匯
所謂交互式圖文排版，本質牽涉前端層疊樣式語言。這種語言直白具象，詞匯量不會超過大學四級考綱。只要你細心閱讀，就能完全理解這種語法描述的信息。
像讀古文一樣讀 HTML
學習古詩文的時候，通常會給文章劃分一些定性的層次。比如哪里起興，哪里借景抒情。HTML 標簽的作用就是告訴編輯器：再哪些地方劃分層次，這些層次定性為什么。
假如我們在第三方編輯器里輸入一些文字，點擊 HTML 模式，可以看到我們輸入的文字被一個 <p> 和一個 </p> 包裹住了▼
<p>元和<p>就是 HTML 標簽。也就是說， HTML 標簽告訴瀏覽器，「新書《硬核運營》已開始預售」這段文字在一個層次里，這個層次的名字是 p 。p 是英文 paragraph 的縮寫，這個層次的性質就是一個段落(paragraph)。
編輯器就是這么傻，如果你不告訴它這是一個段落它永遠也不知道這是什么。
HTML 標簽有非常多，每個標簽都有不同的含義。對于理科生來說記住所有的標簽簡直就是災難，文科生反而更有優勢。如果你不想記住太多，在工作中 90% 的情況會用到以下 5 個：
<p></p>: (paragraph) 定義一個段落
<section></section>: (section) 定義一個章節
<span></span>：(span) 定義一小段文字
<br/>: (break) 定義一次換行
<img/>: (image) 定義一張圖片
注意：某些標簽是可以嵌套的，比如你可以在一個<section>里加好幾個<p>。至于具體的潛逃規則，可以閱讀《微信高級排版——CSS盒模型》。
如果你想學習更多 HTML 標簽，可以去 w3school 的官方網站查閱（很全），學習重點就是記住標簽表達的含義：
中文版網址：w3school.com.cn
英文版網址：w3schools.bootcss.com
像讀詞組一樣讀 CSS
打開一個可以編輯 HTML 代碼的第三方編輯器（如：i排版/135/新榜編輯器），選擇一個樣式，選擇 HTML 模式，我們只需要關注 HTML 標簽和<style="...">引號內的內容。
這是我截取的部分代碼，試著讀一讀<style="...">內的內容，你會發現它比四級英語詞組還要簡單明了，比如 background-color: rgb(0, 0, 0); 設定了當前 HTML 標簽內的背景顏色為黑色。
這些所有的詞組都是 CSS 屬性，每個 CSS 屬性之間都要用分號隔開。試著更改冒號后面的數值或內容，看看原來的樣式有什么變化，不能理解的不需深究，你依然可以讀懂很多 CSS 代碼。
恭喜你，邁入了代碼排版的大門。
不會的查字典
你肯定仍有一些 CSS 代碼不能理解，此時最好的學習方法就是查字典。這里說的字典是剛才提過的 w3school 官方網站。這個網站對 CSS 的描述簡潔、正確，而且囊括了幾乎所有 CSS 屬性。
以中文版為例，可以直接學習 CSS樣式部分，建議以文本 -> 字體 -> 背景的順序學習，其他的部分很少用到可以暫時擱置。學完以上內容你已經是代碼排版新手。
之后可以學習 CSS 框（盒）模型和CSS 定位部分。學完這一部分之后，你已經理解了代碼排版最核心的內容，在知識結構上和公司里的的前端開發工程師沒什么區別，但要成為高手，你還需要不斷的練習。
學完一個階段之后把一些測試代碼復制到微信后臺，看看哪些能用哪些不能用，做一個表格，可以在工作中少走很多彎路。
模仿第三方樣式
選一些簡單的第三方樣式逐行分析代碼，看看他們是如何實現樣式的，然后試著把它們默寫一遍，一個簡單的樣式大概可以在 20min 左右學完，之后研究一些復雜樣式。
一般經過20個樣式模仿練習過后，你已經是代碼排版的高手了。在這個階段，你幾乎可以實現任何你想要的樣式。如果有遺忘或者學習中的遺漏，別忘了 w3school 這個神奇的 HTML+CSS 詞典。
研究頂級賬號的排版
在 Chrome 瀏覽器內打開 JZ 的一篇文章，按下 F12 或者右鍵點擊「審查」，就可以查看所有 HTML CSS 代碼▼
學習優秀賬號的優雅代碼書寫格式，同時研究這些賬號的視覺設計，培養良好的排版審美，研究高階玩法。
高級進階
在《》，相信大家已經了解了排版領域當中 SVG 交互代碼是目前行業的巔峰。
你可以先從《教程｜高級 SVG 交互式排版入門指南》開始學習，并且一定要對《微信下 SVG AttributeName 白名單》的代碼類型進行細致的逐步測試。之后你或許就有空間可以逐步實現這些作品：
讀專業圖書
我們曾在《自學H5，該看哪些書？》介紹了一部分與代碼排版有相關性的圖書。當然如果要選擇更垂直領域的教學材料，歡迎購買我們最新發布的圖書《硬核運營》，它可以完全圍繞新媒體排版，幫助一個文科生走向高階新媒體排版▼
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
