css技巧之 shapes 打造媒體雜志般得布局

么是shapes呢？

shape的意思是圖形，CSS shapes也就是css 圖形的意思了，也就是使用CSS生成各種圖形（圓形、矩形、橢圓型、多邊形等集合圖形）。在CSS3之前，我們能做的只有生成矩形，四四方方，條條框框。

shapes的使用

我們先來看看使用shapes后，我們的顯示效果吧。

是不是很酷炫？那么我們怎么才能做到這樣的效果呢。

首先我們需要了解shape下面的一個屬性 shape-outside。

它也具有制造各種集合圖形的能力，但是它只能和浮動 float 一起使用。

雖然使用上有所限制，但是它賦予了我們一種更為自由的圖文混排能力。

讓我們看下代碼

css部分

html部分

好了，這就是shape-outside寫好的一個小demo。希望大家會喜歡。

如果還想更深入的了解前端知識，請大家關注我，我會不定期的發一些關于前端的知識。

謝謝大家的觀看。

.昨日回顧

編號	姓名	性別	學歷	畢業院校
1	張三	男	大專	中國人民大學
2	李四
3

<table>

<tr>

</tr>

<tr>

<td>重蔚自留地</td>

</tr>

</table>

如果使用表格來排版網頁，搜索引擎搜互的幾乎很低。

DIV+CSS布局或排版網頁，層級一般為3層左右。

HTML網頁是一個結構化的文檔，是一按層次順序展示的一個文檔。

<table>的子元素（標記）是<tbody>，而不是<tr>；

<tr>是<tbody>的子元素

2.表單

1、表單的主要功能：就是用來搜索用戶信息。

2、表單的工作原理

用戶填寫有表單的網頁，單擊某個按鈕進行提交；

用戶填寫的表單數據，將發到服務器；

服務器上有專門的程序來對用戶提交的數據進行驗證；

如果有錯誤，服務器會返回給瀏覽器一個錯誤信息；

如果沒有錯誤，PHP程序會將用戶提交的數據寫入數據庫，并返回一個成功的信息。

補充：

用戶輸入的信息是否正確，比如：郵箱地址、電話號碼、用戶名是否重名等

這些信息都是由PHP后臺程序來做驗證。

3、<form>標記：是一組標記(多個標記)

用戶名：<input type=“text” name=“username” size=“50” />

密碼：<input type=“password” name=“password” size=“50” />

</form>

注意：所有表單元素都必須放在<form>中，然后一起提交給服務器。

<form>的常用屬性

Name：指表單的名稱，這個名稱一般給JS或PHP來用。

比如：要獲取“用戶名”框中輸入的信息，用JS獲取是：document.form1.username.value

Action：設置表單數據的處理程序文件名；比如：login.php

Method：表單數據的提交方式。有兩種方式：GET和POST

默認的提交方式：就是GET方式。

GET方式：將表單中的數據(以“名稱/值”)形式，追加到表單處理程序(action指定)的末尾。

缺點：提交少量信息、不太安全、只能提交簡單的數據，一般可以提交100個字節內的數據

http://www.sina.com.cn/news.php?id=234

POST方式：將表單數據直接發放ACTION指定的處理程序，并沒有在地址欄顯示。

優點：提交海量數據、相對比較安全、提交的數據類型多樣化

Enctype：是指表單數據的編碼方式(加密方式)

Application/x-www-form-urlencoded 普通的加密方式(默認)

Multipart/form-data 只有上傳文件時使用。

單行文本框：用戶名、地址、聯系方式、郵編等

注意：如果要把表單元素排齊，請使用表格來排，排的順序是<form>標記中嵌<table>，<td>中放每一個表單元素。

2、單行密碼框：密碼框中的內容是以“*”號顯示，是為了保證數據的安全

3、按鈕

提交銨鈕：<input type=“submit” name=“submit” value=“提交按鈕” />

重置按鈕(清空)：<input type=“reset” name=“reset” value=“重新填寫” />

圖片按鈕：<input type=“image” src=“圖片URL” value=“值” />

注意：圖片按鈕默認是提交表單

普通按鈕：<input type=“button” name=“名稱” value=“按鈕文本” />

注意：普通按鈕沒有任何功能，一般要結合JS來實現提交或重置。

提示：如果哪一個表單項，不想讓它提交到服務器，請不要給它添加name屬性即可。

4、單選按鈕：一組相互排斥的按鈕，也就是每一次只能選擇一個。

<input type=“radio”name=“名稱” value=“值”checked=“checked” />男

注意：一組單選按鈕的name值是一樣的，最后只能提交選中的哪一個。

5、復選框：一組復選框的名稱也是一樣的，在后臺獲取值時，將使用“數組”的形式來獲取。

<input type=“checkbox”name=“名稱”value=“值”checked=“checked” />游戲

注意：復選框可以同時選擇多個，也可以一個都不選。

提示：數組是一個名字里，可以存放多個不同的值（了解）

JS數組：Var hobby = [“游戲”,“美術”,“電腦”]

6、下拉列表

</select>

7、文本區域

提示：如果要在<textarea>中插入圖片，實現圖文混排，這個標記做不到。一般網站的效果都是通過“在線HTML代碼編回器”實現的。比如：FCKEdit(就業班講)

8、上傳文件

注意：value屬性是只讀屬性，是為了保證網站的安全。

GET方式上傳不了文件，

只有POST能上傳文件，并且編碼類型設置為：mulitpar/form-data

3.框架

1、框架的概念：將一個瀏覽器窗口劃分若干個區域，每個區域都是一個獨立的小窗口，小窗口中存放一個網頁文件。

框架相當于一個窗戶。一個窗戶由窗格和玻璃構成。一個框架是由框架集(Frameset)和框架頁(Frame)構成。

<frameset>中定義框架的結構(上下型、左右型)、大小、位置等。

<frame>中定義小窗口是否顯示滾動條、小窗口是否可以改大小、默認顯示的網頁

在框架定義頁面中，不能出現<body>及<body>的子標記，換句話說，<frameset>和<body>只能選擇其中一個。

2、框架的代碼結構

</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>的常用屬性：主要定義：是否可以調整大小、是否顯示滾動條、默認頁設置

Src：設置小窗口中顯示的默認網頁；

Noresize：是否可以調整窗口的大小，取值：noresize

Scrolling：是否顯示滾動條，取值：yes、no、auto(自動)

Name：設置每個小窗口的

Index.html

4.行內框架<iframe></iframe>

<ifame>是嵌套到<body>元素中的。

常用屬性

Src：引入哪個HTML文件

Width：指行內框架的寬度

Height：指行內框架的高度

Scrolling：是否顯示滾動條

Align：水平對齊方式

果您覺得文章對您有點用，麻煩在您閱讀、收藏、轉發的時候，順手幫忙點個贊、留個言、加關注，這是我繼續寫下去的絕佳動力。

利用SiteServer CMS 系統建網站的主要工作量就是在于做模板，即所謂的模板嵌套。對于一個剛接觸SiteServer CMS 系統的新手來說，最關心的問題莫過于模板是如何嵌套出來的、模板制作過程中需要用到哪些技術、這些技術好不好掌握等問題。今天這篇文章就是來展示SiteServer CMS模板嵌套全過程。

1、開始模板嵌套之前的工作

在開始展示SiteServer CMS模板嵌套全過程之前，以下工作必須自行做完，否則無法開展模板嵌套工作。

安裝好了SiteServer CMS系統，如果還沒有安裝的請根據這篇文章：手把手教你如何安裝SiteServer 把系統安裝好。
需要嵌套成模板的靜態頁面html文件（此部分工作由頁面切圖人員負責）已經準備好了。
本文演示的模板特別簡單，就是一個新聞列表的模板。之所以這樣來選擇，主要還是為了更清晰地給大家展示模板嵌套的整個過程，而不要被模板里面的細節所干擾。
本文展示的是SiteSever CMS系統安裝在本機，通過localhost訪問。
之前有發過一篇文章：深入講解SiteServer CMS：模板嵌套，這里面也講了一些模板基礎知識可以參考。

2、靜態頁面需求分析

不要被標題嚇倒，這里的需求分析指的是對還沒有嵌套的靜態頁面上所有元素的含義需要了解清楚。切圖人員給你的是還沒有進行模板嵌套的網站靜態頁面，結構可能是這樣子的：

直接用瀏覽器打開新聞列表靜態頁面list.html，看到效果如下圖：

從上圖可以看到，這是一個典型的圖文混排的新聞列表頁面。在開始對這個頁面進行模板嵌套之前需要了解頁面上所有元素具體含義（圖片中的紅色文字就是對每個字段的含義進行了解釋），要不然無從下手，或者嵌套出來也可能不符合要求。特別要注意的是一些非具體元素的細節容易忽略掉，比如：第2、4兩條記錄是有背景顏色的。從這可以推斷出偶數行記錄需要帶背景顏色，這一點在模板嵌套中必須體現出來。

3、創建模板文件

需求分析清楚之后，就可以開始著手模板嵌套工作了。

第一步就是把切圖人員給過來的css、images和js文件夾拷備到安裝好了的SiteServer CMS系統根目錄下，如下圖所示：

第二步就是在SiteServer CMS后臺創建一個空白的名叫“新聞列表模板”的欄目模板，如下圖所示：

第三步就是找到剛才創建的模板文件（模板文件的具體位置規則可以參考這篇文章：深入講解SiteServer CMS：模板嵌套），如下圖所示：

第四步就是用你熟悉的文本編輯器（本人習慣用Atom）打開此空白模板文件，把切圖人員提供的list.html代碼粘貼到此空白模板文件中，如下圖所示：

什么都不用做，直接保存。此時如果用這個欄目模板去匹配任何一個欄目，生成的欄目頁面都是一樣的，因為這純粹就是一個不包含任何STL標簽，也即不能從數據庫中調取任何數據。

4、用STL標簽進行模板嵌套

從這開始才算是真正的用STL標簽進行模板嵌套。模板嵌套的過程其實就是把之前靜態頁面中的靜態文本替換STL標簽的過程。替換成了STL標簽，就意味著這個位置的內容是從數據庫里讀取數據的，從而實現了SiteServer CMS系統后臺發布數據存儲在數據庫中，再通過標簽調取顯示到網站前臺頁面上的效果。

首先我們進行欄目名稱的STL標簽替換，如下圖所示：

此時如果用這個欄目模板去匹配不同欄目，生成的欄目頁面Title就會不一樣了，會顯示各自欄目的欄目名稱了。接下來進行新聞列表模板嵌套，先分析一下html：

SiteServer CMS系統STL標簽中是用<stl:contents>標簽來調取內容列表的，所以可以這樣進行STL標簽替換：

上圖所示代碼會有一個問題，那就是沒有實現第2、4這樣的偶數項新聞的背景色問題，所以還需要這樣改進一下代碼：

解決了偶數項新聞的背景色問題，接下來就是要進行每一篇具體新聞的STL標簽替換。為了方便大家對比嵌套前后的差別，特意把替換前后的代碼列在一起，用紅框框起來了，總共4組，如下圖所示：

解釋一下第1組：用{Content.ImageUrl}獲取新聞的圖片，因為圖片還需要能點擊進到詳情頁，所以又用了<stl:a>標簽獲取新聞的鏈接。

對比會發現，凡是html標簽能用的屬性，stl標簽也一樣能用，因為stl標簽解析之后生成的就是html代碼。所以在這里可以看到鏈接的屬性：target="_blank" 就可以直接復制到stl:a標簽中。從這四組代碼對比還能發現，stl標簽替換的過程就類似填空一樣，把原來的部分替換掉即可（當然部分復雜的會有不同）。其他幾組就不再解釋了，詳細的stl標簽用法可以參考官方說明：http://stl.siteserver.cn。

偶數項的li除了多了 class="bg" 這么一個背景樣式之外，里面的元素是完全一樣的，所以只需要把奇數項li里的元素拷過來即可，最后給出一個完整的嵌套好了的代碼，如下圖所示：

5、匹配具體欄目、生成靜態頁面

模板嵌套完成之后，需要把此模板應用的具體欄目中，就是所謂的模板匹配，如下圖所示：

如上圖所示，把剛才嵌套好的 “新聞列表模板” 和 “新聞” 欄目匹配好，然后再去生成頁面：

生成完成之后，再通過如下圖所示點擊紅框位置文件夾圖標，就可進到 “新聞” 欄目對應的前臺頁面：

看到的前臺頁面效果和最開始靜態頁面的布局是一樣的，不同的就是每篇新聞的數據，如下圖所示：

如果再查看生成出來的這個頁面的html代碼，和之前切圖人員提供給我們進行模板嵌套用的靜態頁面代碼結構基本上是一樣，不同的也是每篇新聞的數據：

開心一笑

昨天晚上和幾個哥們出去喝酒，喝到十二點才散。早上，哥們來電話了:怎么樣，昨天回去那么晚，嫂子沒收拾你吧？我回答:說啥呢，她還敢收拾我！？家門她都沒敢開！

在線咨詢

上一篇：CSS 滾動驅動動畫實現圓弧滾動條
下一篇：為Word裝上這3大插件，你的論文寫作效率至少提升2倍

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商