整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

前端开发:极简的CSS 框架

在本文中,我们将与大家分享 10个最佳的极简 CSS 框架,它们能够为你提供建站必备的组件,帮助你节省时间。

希望对大家有所帮助!

一、Spectre(一个轻量级、响应式的现代 CSS 框架,用于快速建站和扩展程序的开发。它通过最佳编码实践和一致性的设计语言,为排版与元素、基于 Flexbox 的响应布局系统、CSS 组件提供了基本样式。)

二、Milligram(提供了极简样式设置,便于你快速、简洁的开启建站之旅。虽然它不是一个 UI 框架,但它的设计理念却是以提供优秀的性能、高效的开发效率以及最少的属性重置而构建的。同时,它也是轻量的)

三、Mobi(是一个轻量级、可扩展、移动优先的 CSS 框架。它专注于细节,对于内容丰富的网页能够提供优质的用户体验。虽然,它专注移动端,但桌面客户端的体验也是很棒的。)

四、Mini(作为一个 Gzip 压缩后不到 7KB 大小的极简框架,它具备响应式、易用性和定制性等特性,旨在为你提供尽可能多的功能。由于它是轻量框架,不仅让你创建的网站和应用程序具备更快的加载速度,而且它所提供的组件可以满足基本的开发要求。)

五、 Siimple(是一个助你打造扁平化网站风格的轻量、响应式的开源框架。它内置了 SASS / SCSS,为你的网页设计提供了简洁的开始。)

六、Base(一个稳固的响应式 HTML 与 CSS 框架。)

七、Scooter(专注为 Dropbox 提供基础样式、CSS 组件以及快速静态原型的 SCSS 框架。)

八、Responsive(一个功能强大、对开发人员友好的,用于构建响应式网站的轻量级前端框架。)

九、 拼图 Pintuer (国内优秀的HTML、CSS、JS跨屏响应式开源前端框架,使用最新浏览器技术,为快速的前端开发提供一系统的文本、图标、媒体、表格、表单、按钮、菜单、网格系统等样式工具包,占用资源小,使用拼图可以快速构建简洁、优雅而且自动适应手机、平板、桌面电脑等设备的前端界面,让前端开发像玩游戏一下快乐而轻松。)

十、 BluCSS (是一个简便易记的CSS框架。可轻松应用在项目中。)

相信大家都会自己心中最喜欢的工具,如果本文没有列举出来,欢迎大家在评论区留下自己心目中最喜欢、最有价值的工具~~

切图 qietu(.com)

.HTML中表单元素的基本概念

HTML表单是HTML元素中较为复杂的部分,表单往往和脚本,动态页面,数据处理等功能相结合,因此是制作动态网站很重要的内容.

表单一般用来收集用户的输入信息

2.表单工作原理

访问者在浏览有表单的网页时,可填写必需的信息,然后按某个按钮提交,这些信息通过网络传送到服务器上.服务器上专门的程序对这些数据进行处理,如果有错误会返回错误信息,并要求纠正错误.当数据完整无误后,服务器反馈一个输入完成的信息

3.表单的功能

功能:表单用于向服务器传输数据,从而实现用户与WEB服务器的交互表单能够包含input系统标签,比如文本字段,复选框,单选框,提交按钮等表单还可以包含textarea,select,fieldset,label标签.

4.表单的常用类型及说明

1.表单常用的类型有:

2.表单属性:

3.文本输入框(text):

当用户要在表单中输入字母,数字内容时,就会用到文本域

代码如下:

注意,表单本身并不可见.同时,在大多浏览器中,文本域的缺省宽度是20个字符.

在密码域中输入的字符,浏览器将使用项目符号来代替这些字符.

4.单选按钮(radio):

当用户从若干给定的选择中选取一个选项时,就会用到单选框.

代码如下:

用户只能从众多选择中选取一个选项.

当用户点击一个单选按钮时,该按钮会变为选中状态,其他所有按钮会变为非选中状态.

5.复选框(checkboxes)

当用户需要从若干给定的选择中选取一个或多个选项时,就会用到复选框

代码如下:

用户一次可以选择多个选项.

6.重置按钮(reset)

重置按钮会清除当前页面上的用户输入的所有数据,把当前页面恢复到打开时的样子.

代码如下:

<form><p><input type="reset"></p></form>

7.提交按钮

会在当前页面生成一个提交按钮,用户点击此按钮,浏览器就会把当前页面用户输入的数据传送到服务端

代码如下:

<form><p><input type="button" value="按钮"/></p></form>

8.提交文件

当需要把客户端的文件发送到服务端时,需要用到提交文件按钮

代码如下:

<form action="/index/" method="post"><p><input type="file"/></p></form>

上传文件注意两点: 请求方式必须是post enctype="multipart/form-data"

9.下拉菜单

当需要用户从很多选项中选择一个或多个选项时,也可以使用下拉列表.

代码如下:

这样的下拉列表,用户只能从其中选择一个选项,当需要用户选择两个或以下时,可以添加参数来进行控制.

代码如下:

还可以在

OPTION

中添加

selected="selected"

选项来设置默认值.

10.表单属性

1.action属性的说明:

使用action选项来指定服务端的脚本来处理被提交的表单

<form action="/index/" method="post">

如果省略action属性,则action会被设置为当前页面

2.method属性的说明:

method属性规定在提交表单时所用的http方法(POSTGET)

<form action="/index/" method="post">

<form action="/index/" method="get">

3.get方法或post方法的使用方式说明:

如果表单提交是被动的(比如搜索引擎查询),并且没有敏感信息.

当使用get方法时,表单的数据在页面地址栏中是可见的

因此,get最适合少量数据的提交,浏览器会设定容量限制

如果表单正在更新数据,或者包含敏感信息(比如密码)时应该使用post,post的安全性更好.

因为在页面地址栏中被提交的数据是不可见的.

切图 qietu(.com)

wordpress主题开发的整个过程中,切图虽然是一个很不显眼的流程,但有时却是不可或缺的,尤其是团队协同开发的时候。wordpress主题的效果图,往往是一张很大的图片,我们在开发wordpress主题的静态模板时,不会也不可能把整张效果图放到web页面上给客户看。我们需要把这张超大的效果图中图片分割下来,给wordpress主题静态模板的前端开发人员,由他们通过HTML代码和CSS代码来把它们展现在web网页上,这个过程,就是切图。那么,我们怎样给我们的wordpress主题模板的效果图进行切图呢?

首先,切图人员要熟悉切图的软件,我们这里以photoshop为例,因为,我一般都是通过photoshop来进行切图的。这里,我们先弄一张效果图,这里我就不通过photoshop来设计了,我直接找到一个自己比较喜欢的网站——时美网,然后通过搜狗浏览器来对它整个页面进行截图。在搜狗浏览器打开《时美网》,然后点击搜狗浏览器的“文件”导航菜单中的“保存为图片”子菜单(如下图),这样,我们就把时美网的首页以图片的形式保存到了我们的本地电脑中。

第一步:打开photoshop软件。

我们打开photoshop软件,我这里安装的是 photoshop CS5,版本比较老,但用起来还是挺顺手,你们可以下载更新一点的版本,现在应该是photoshop 2021了吧,最近,也没太关注这个。我觉得,不管什么软件,只要够用就行。

第二步:在photoshop中打开效果图。

点击photoshop顶部菜单中的“文件”,在下拉菜单中点击“打开”,这时会弹出一个窗口,在这个窗口中找到我们刚刚在浏览器中截取的wordpress主题效果图,如下图:

双击打开它 或者 鼠标左键点击选择它,再点击“打开”按钮,这时wordpress主题效果图就在photoshop的编辑区域展示,如下图:

第三步:放大图片。

这时,在编辑区域,图片是以全景的形式展示,所以看上非常小,不好切割。我们按住 ctrl 键后,再连续点击 +号键,就可以把图片放大,如下图:

第四步:选择“切片”工具。

光标移到photoshop的左侧的工具栏中的“裁剪工具”上,单击鼠标的右键,这时,会显示这个按钮上的右键菜单,如下图:

然后,我们在这个弹出来的右键菜单中,点击选择“切片工具”。

第五步:切割效果图中的图片。

选择好切割图片后,我们就可以对wordpress主题效果图进行切割操作了。切片工具操作是很简单的,我们只需在那些需要切割的地方,按下鼠标左键,然后拖拽到适当的区域,就可以创建切片,如下图:

在这个演示中,我切割了7次,也就是说,我只切割了效果图中的图片,因为,在我编写前端静态模板时,我只需要这些图片来作为素材,而文字部分我可能直接用文字来添加。我们每切割一次,就会在被的图片上显示一个蓝色的标记,意思是我们切割了这部分。

第六步:保存切图。

我们切割好效果图后,我们还要保存它们。点击photoshop顶部菜单中的“文件”,在下拉菜单中选择点击“存储为web和设备所用的格式”子菜单,如下图:

这时会弹出一个“存储为web和设备所用的格式”的窗口,如下图:

在这个窗口中,我们可以对存储图片的格式、大小等进行设置,然后点击“存储”按钮,这时会弹出“将优化结果存储为”窗口。在这个窗口中,我们可以选择保存的格式,这里我选择的是“仅限图像”,如下图:

然后,在“切片”选项中,我选择的是“所有用户切片”,如下图:

“所有用户切片”就是我们用切片工具切割过的图片,如我们在第五步中切割的那7个图片。当然,我们也可以选择“所有切片”,我们在切割我们需要的图片时,photoshop会把不需要部分自动切割成其它的部分,所有切片包括用户切片和其它切片。

这些设置成后,我们就可以点击“保存”按钮,就开始保存到本地电脑上。保存后的图片会放到一个images文件夹中,而每个图片都会以效果图名作为前缀来命名的,如下图:

好了,这就是我们对wordpress主题的效果图进行切割的整个过程。还是那句话,在wordpress主题的整个开发过程中,切图并不是必须的,一般情况下,只有团队协同开发中,可能会用到切图。在我个人的wordpress主题模板开发过程中,我很少用到切图这个流程。当然,这要视每个人的习惯而定了。嗯,有关切图就介绍到这里。如有疑问,欢迎点评或私信。