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小时内与您取得联系。

整合营销服务商