整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
shape的意思是圖形，CSS shapes也就是css 圖形的意思了，也就是使用CSS生成各種圖形（圓形、矩形、橢圓型、多邊形等集合圖形）。在CSS3之前，我們能做的只有生成矩形，四四方方，條條框框。
我們先來看看使用shapes后，我們的顯示效果吧。
是不是很酷炫？那么我們怎么才能做到這樣的效果呢。
首先我們需要了解shape下面的一個屬性 shape-outside。
它也具有制造各種集合圖形的能力，但是它只能和浮動 float 一起使用。
雖然使用上有所限制，但是它賦予了我們一種更為自由的圖文混排能力。
讓我們看下代碼
css部分
html部分
好了，這就是shape-outside寫好的一個小demo。希望大家會喜歡。
如果還想更深入的了解前端知識，請大家關(guān)注我，我會不定期的發(fā)一些關(guān)于前端的知識。
謝謝大家的觀看。
.昨日回顧
| 編號 | 姓名 | 性別 | 學(xué)歷 | 畢業(yè)院校 |
| 1 | 張三 | 男 | 大專 | 中國人民大學(xué) |
| 2 | 李四 | |||
| 3 |
<table>
<tr>
<th>編號</th>
<th>標(biāo)題</th>
<th>發(fā)布日期</th>
</tr>
<tr>
<td>1</td>
<td>重蔚自留地</td>
<td>2014-10-20</td>
</tr>
</table>
如果使用表格來排版網(wǎng)頁，搜索引擎搜互的幾乎很低。
DIV+CSS布局或排版網(wǎng)頁，層級一般為3層左右。
HTML網(wǎng)頁是一個結(jié)構(gòu)化的文檔，是一按層次順序展示的一個文檔。
<table>的子元素（標(biāo)記）是<tbody>，而不是<tr>；
<tr>是<tbody>的子元素
2.表單
1、表單的主要功能：就是用來搜索用戶信息。
2、表單的工作原理
用戶填寫有表單的網(wǎng)頁，單擊某個按鈕進行提交；
用戶填寫的表單數(shù)據(jù)，將發(fā)到服務(wù)器；
服務(wù)器上有專門的程序來對用戶提交的數(shù)據(jù)進行驗證；
如果有錯誤，服務(wù)器會返回給瀏覽器一個錯誤信息；
如果沒有錯誤，PHP程序會將用戶提交的數(shù)據(jù)寫入數(shù)據(jù)庫，并返回一個成功的信息。
補充：
用戶輸入的信息是否正確，比如：郵箱地址、電話號碼、用戶名是否重名等
這些信息都是由PHP后臺程序來做驗證。
3、<form>標(biāo)記：是一組標(biāo)記(多個標(biāo)記)
<form name=“form1” action=“l(fā)ogin.php”>
用戶名：<input type=“text” name=“username” size=“50” />
密碼：<input type=“password” name=“password” size=“50” />
<input type=“submit” name=“submit” value=“提交” />
</form>
注意：所有表單元素都必須放在<form>中，然后一起提交給服務(wù)器。
<form>的常用屬性
Name：指表單的名稱，這個名稱一般給JS或PHP來用。
比如：要獲取“用戶名”框中輸入的信息，用JS獲取是：document.form1.username.value
Action：設(shè)置表單數(shù)據(jù)的處理程序文件名；比如：login.php
Method：表單數(shù)據(jù)的提交方式。有兩種方式：GET和POST
默認(rèn)的提交方式：就是GET方式。
GET方式：將表單中的數(shù)據(jù)(以“名稱/值”)形式，追加到表單處理程序(action指定)的末尾。
缺點：提交少量信息、不太安全、只能提交簡單的數(shù)據(jù)，一般可以提交100個字節(jié)內(nèi)的數(shù)據(jù)
http://www.sina.com.cn/news.php?id=234
POST方式：將表單數(shù)據(jù)直接發(fā)放ACTION指定的處理程序，并沒有在地址欄顯示。
優(yōu)點：提交海量數(shù)據(jù)、相對比較安全、提交的數(shù)據(jù)類型多樣化
Enctype：是指表單數(shù)據(jù)的編碼方式(加密方式)
Application/x-www-form-urlencoded 普通的加密方式(默認(rèn))
Multipart/form-data 只有上傳文件時使用。
單行文本框：用戶名、地址、聯(lián)系方式、郵編等
<input type=“text” name=“名稱” value=“默認(rèn)值” size=“多少個字符寬” maxlength=“最多可放多少個字符” />
注意：如果要把表單元素排齊，請使用表格來排，排的順序是<form>標(biāo)記中嵌<table>，<td>中放每一個表單元素。
2、單行密碼框：密碼框中的內(nèi)容是以“*”號顯示，是為了保證數(shù)據(jù)的安全
<input type=“password” name=“名稱” size=“字符寬” maxlength=“最大字符數(shù)” />
3、按鈕
提交銨鈕：<input type=“submit” name=“submit” value=“提交按鈕” />
重置按鈕(清空)：<input type=“reset” name=“reset” value=“重新填寫” />
圖片按鈕：<input type=“image” src=“圖片URL” value=“值” />
注意：圖片按鈕默認(rèn)是提交表單
普通按鈕：<input type=“button” name=“名稱” value=“按鈕文本” />
<input type="button" value="普通按鈕" onclick="javascript：this.form.reset()" />
注意：普通按鈕沒有任何功能，一般要結(jié)合JS來實現(xiàn)提交或重置。
提示：如果哪一個表單項，不想讓它提交到服務(wù)器，請不要給它添加name屬性即可。
4、單選按鈕：一組相互排斥的按鈕，也就是每一次只能選擇一個。
<input type=“radio”name=“名稱” value=“值”checked=“checked” />男
注意：一組單選按鈕的name值是一樣的，最后只能提交選中的哪一個。
5、復(fù)選框：一組復(fù)選框的名稱也是一樣的，在后臺獲取值時，將使用“數(shù)組”的形式來獲取。
<input type=“checkbox”name=“名稱”value=“值”checked=“checked” />游戲
注意：復(fù)選框可以同時選擇多個，也可以一個都不選。
提示：數(shù)組是一個名字里，可以存放多個不同的值（了解）
JS數(shù)組：Var hobby = [“游戲”,“美術(shù)”,“電腦”]
6、下拉列表
<select name=“edu”>
<option value=“” selected=“selected”>請選擇……</option>
<option value=“高中”>高中</option>
<option value=“大專”>大專 </option>
</select>
7、文本區(qū)域
<textarea name=“名稱”rows=“幾行高”cols=“多少個字符寬”></textarea>
提示：如果要在<textarea>中插入圖片，實現(xiàn)圖文混排，這個標(biāo)記做不到。一般網(wǎng)站的效果都是通過“在線HTML代碼編回器”實現(xiàn)的。比如：FCKEdit(就業(yè)班講)
8、上傳文件
<input type=“file”name=“uploadFile” />
注意：value屬性是只讀屬性，是為了保證網(wǎng)站的安全。
GET方式上傳不了文件，
只有POST能上傳文件，并且編碼類型設(shè)置為：mulitpar/form-data
3.框架
1、框架的概念：將一個瀏覽器窗口劃分若干個區(qū)域，每個區(qū)域都是一個獨立的小窗口，小窗口中存放一個網(wǎng)頁文件。
框架相當(dāng)于一個窗戶。一個窗戶由窗格和玻璃構(gòu)成。一個框架是由框架集(Frameset)和框架頁(Frame)構(gòu)成。
<frameset>中定義框架的結(jié)構(gòu)(上下型、左右型)、大小、位置等。
<frame>中定義小窗口是否顯示滾動條、小窗口是否可以改大小、默認(rèn)顯示的網(wǎng)頁
在框架定義頁面中，不能出現(xiàn)<body>及<body>的子標(biāo)記，換句話說，<frameset>和<body>只能選擇其中一個。
2、框架的代碼結(jié)構(gòu)
<frameset>
<frame />
<frame />
</frameset>
3、<frameset>的常用屬性
Rows：指定框架為上下型，例如：rows=“180,*”，上窗口的高為180px，剩下都給下窗口。
Rows=“180,20,*”，頂窗口高為180px，中窗口高為20px，剩下高都給下窗口。
Rows=“20%,50%,*”
Cols：劃分框架為左右型，例如：cols=“200,*”，左窗口寬為200px，剩下都給右窗口。
Cols=“200,10,*”
Frameborder：是否顯示框架邊線，取值：1或0，yes或no
Border：指定邊框的粗細
Bordercolor：邊框的顏色
Framespacing：指框架邊框間的距離
4、<frame>的常用屬性：主要定義：是否可以調(diào)整大小、是否顯示滾動條、默認(rèn)頁設(shè)置
Src：設(shè)置小窗口中顯示的默認(rèn)網(wǎng)頁；
Noresize：是否可以調(diào)整窗口的大小，取值：noresize
Scrolling：是否顯示滾動條，取值：yes、no、auto(自動)
Name：設(shè)置每個小窗口的
Index.html
4.行內(nèi)框架<iframe></iframe>
<iframe>是<body>的子元素
<ifame>是嵌套到<body>元素中的。
常用屬性
Src：引入哪個HTML文件
Width：指行內(nèi)框架的寬度
Height：指行內(nèi)框架的高度
Scrolling：是否顯示滾動條
Align：水平對齊方式
果您覺得文章對您有點用，麻煩在您閱讀、收藏、轉(zhuǎn)發(fā)的時候，順手幫忙點個贊、留個言、加關(guān)注，這是我繼續(xù)寫下去的絕佳動力。
利用SiteServer CMS 系統(tǒng)建網(wǎng)站的主要工作量就是在于做模板，即所謂的模板嵌套。對于一個剛接觸SiteServer CMS 系統(tǒng)的新手來說，最關(guān)心的問題莫過于模板是如何嵌套出來的、模板制作過程中需要用到哪些技術(shù)、這些技術(shù)好不好掌握等問題。今天這篇文章就是來展示SiteServer CMS模板嵌套全過程。
在開始展示SiteServer CMS模板嵌套全過程之前，以下工作必須自行做完，否則無法開展模板嵌套工作。
安裝好了SiteServer CMS系統(tǒng)，如果還沒有安裝的請根據(jù)這篇文章：手把手教你如何安裝SiteServer 把系統(tǒng)安裝好。
需要嵌套成模板的靜態(tài)頁面html文件（此部分工作由頁面切圖人員負責(zé)）已經(jīng)準(zhǔn)備好了。
本文演示的模板特別簡單，就是一個新聞列表的模板。之所以這樣來選擇，主要還是為了更清晰地給大家展示模板嵌套的整個過程，而不要被模板里面的細節(jié)所干擾。
本文展示的是SiteSever CMS系統(tǒng)安裝在本機，通過localhost訪問。
之前有發(fā)過一篇文章：深入講解SiteServer CMS：模板嵌套，這里面也講了一些模板基礎(chǔ)知識可以參考。
不要被標(biāo)題嚇倒，這里的需求分析指的是對還沒有嵌套的靜態(tài)頁面上所有元素的含義需要了解清楚。切圖人員給你的是還沒有進行模板嵌套的網(wǎng)站靜態(tài)頁面，結(jié)構(gòu)可能是這樣子的：
直接用瀏覽器打開新聞列表靜態(tài)頁面list.html，看到效果如下圖：
從上圖可以看到，這是一個典型的圖文混排的新聞列表頁面。在開始對這個頁面進行模板嵌套之前需要了解頁面上所有元素具體含義（圖片中的紅色文字就是對每個字段的含義進行了解釋），要不然無從下手，或者嵌套出來也可能不符合要求。特別要注意的是一些非具體元素的細節(jié)容易忽略掉，比如：第2、4兩條記錄是有背景顏色的。從這可以推斷出偶數(shù)行記錄需要帶背景顏色，這一點在模板嵌套中必須體現(xiàn)出來。
需求分析清楚之后，就可以開始著手模板嵌套工作了。
第一步就是把切圖人員給過來的css、images和js文件夾拷備到安裝好了的SiteServer CMS系統(tǒng)根目錄下，如下圖所示：
第二步就是在SiteServer CMS后臺創(chuàng)建一個空白的名叫“新聞列表模板”的欄目模板，如下圖所示：
第三步就是找到剛才創(chuàng)建的模板文件（模板文件的具體位置規(guī)則可以參考這篇文章：深入講解SiteServer CMS：模板嵌套），如下圖所示：
第四步就是用你熟悉的文本編輯器（本人習(xí)慣用Atom）打開此空白模板文件，把切圖人員提供的list.html代碼粘貼到此空白模板文件中，如下圖所示：
什么都不用做，直接保存。此時如果用這個欄目模板去匹配任何一個欄目，生成的欄目頁面都是一樣的，因為這純粹就是一個不包含任何STL標(biāo)簽，也即不能從數(shù)據(jù)庫中調(diào)取任何數(shù)據(jù)。
從這開始才算是真正的用STL標(biāo)簽進行模板嵌套。模板嵌套的過程其實就是把之前靜態(tài)頁面中的靜態(tài)文本替換STL標(biāo)簽的過程。替換成了STL標(biāo)簽，就意味著這個位置的內(nèi)容是從數(shù)據(jù)庫里讀取數(shù)據(jù)的，從而實現(xiàn)了SiteServer CMS系統(tǒng)后臺發(fā)布數(shù)據(jù)存儲在數(shù)據(jù)庫中，再通過標(biāo)簽調(diào)取顯示到網(wǎng)站前臺頁面上的效果。
首先我們進行欄目名稱的STL標(biāo)簽替換，如下圖所示：
此時如果用這個欄目模板去匹配不同欄目，生成的欄目頁面Title就會不一樣了，會顯示各自欄目的欄目名稱了。接下來進行新聞列表模板嵌套，先分析一下html：
SiteServer CMS系統(tǒng)STL標(biāo)簽中是用<stl:contents>標(biāo)簽來調(diào)取內(nèi)容列表的，所以可以這樣進行STL標(biāo)簽替換：
上圖所示代碼會有一個問題，那就是沒有實現(xiàn)第2、4這樣的偶數(shù)項新聞的背景色問題，所以還需要這樣改進一下代碼：
解決了偶數(shù)項新聞的背景色問題，接下來就是要進行每一篇具體新聞的STL標(biāo)簽替換。為了方便大家對比嵌套前后的差別，特意把替換前后的代碼列在一起，用紅框框起來了，總共4組，如下圖所示：
解釋一下第1組：用{Content.ImageUrl}獲取新聞的圖片，因為圖片還需要能點擊進到詳情頁，所以又用了<stl:a>標(biāo)簽獲取新聞的鏈接。
對比會發(fā)現(xiàn)，凡是html標(biāo)簽?zāi)苡玫膶傩裕瑂tl標(biāo)簽也一樣能用，因為stl標(biāo)簽解析之后生成的就是html代碼。所以在這里可以看到鏈接的屬性：target="_blank" 就可以直接復(fù)制到stl:a標(biāo)簽中。從這四組代碼對比還能發(fā)現(xiàn)，stl標(biāo)簽替換的過程就類似填空一樣，把原來的部分替換掉即可（當(dāng)然部分復(fù)雜的會有不同）。其他幾組就不再解釋了，詳細的stl標(biāo)簽用法可以參考官方說明：http://stl.siteserver.cn。
偶數(shù)項的li除了多了 class="bg" 這么一個背景樣式之外，里面的元素是完全一樣的，所以只需要把奇數(shù)項li里的元素拷過來即可，最后給出一個完整的嵌套好了的代碼，如下圖所示：
模板嵌套完成之后，需要把此模板應(yīng)用的具體欄目中，就是所謂的模板匹配，如下圖所示：
如上圖所示，把剛才嵌套好的 “新聞列表模板” 和 “新聞” 欄目匹配好，然后再去生成頁面：
生成完成之后，再通過如下圖所示點擊紅框位置文件夾圖標(biāo)，就可進到 “新聞” 欄目對應(yīng)的前臺頁面：
看到的前臺頁面效果和最開始靜態(tài)頁面的布局是一樣的，不同的就是每篇新聞的數(shù)據(jù)，如下圖所示：
如果再查看生成出來的這個頁面的html代碼，和之前切圖人員提供給我們進行模板嵌套用的靜態(tài)頁面代碼結(jié)構(gòu)基本上是一樣，不同的也是每篇新聞的數(shù)據(jù)：
昨天晚上和幾個哥們出去喝酒，喝到十二點才散。早上，哥們來電話了:怎么樣，昨天回去那么晚，嫂子沒收拾你吧？我回答:說啥呢，她還敢收拾我！？家門她都沒敢開！
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
