瑞讲堂｜HTML5课程系列——其他表单元素

3.1 select下拉选择控件

在表单中通过<select>控件可以创建一个下拉式的列表或带有滚动条的列表，可以在列表中选中一个或多个选项，通常用于填写生日、所在地区等信息中，开发人员提前设计好选项，让用户在填写信息时可以直接选择，更加方便用户的使用。

基本语法：

<form action=“form.php” method=“post”>

<select name="week">

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

<option value="5">5</option>

<option value="6">6</option>

<option value="7">7</option>

</select>

</form&g

想读更多 ->

Css布局冷知识1

伪类和伪元素

它们允许应用的样式用于文档不存在的结构上，或者是通过当前元素的状态甚至是文档自身的状态而推断的某些东西上。

a:link 指值元素没有被访问过的状态。

a:visited 指元素已经访问的状态。

a:hover 指鼠标经过元素的状态。

a:active 指鼠标按下激活元素的状态

<a>

padding

border

margin

#box_relative { position: relative; left: 30px; top: 20px; }

想读更多 ->

Nginx合并Js/Css

小郑同学在开发我们系统的时候发现首页静态资源多次请求服务器加载缓慢。带着这个问题他去访问了淘宝，发现了淘宝一条请求里有多个Js。最后百度一下发现了Concat。Concat是淘宝开发的一个Nginx模块，可以将多个Js/Css合并成一个请求（当然在合理的情况下），这样可以减少对服务器的请求个数，达到静态资源相对较快的加载。下面我们看一下具体的操作。

下载Nginx 和Concat

wget http://nginx.org/download/nginx-1.6.2.tar.gz

git clone git://github.com/alibaba/nginx-http-concat.git

下载Concat可能需要翻墙

解压安装

将下载好的Concat 放到某目录，本次试验放入/usr/local/src/

tar zxvf nginx-1.6.2.tar.gz

cd nginx-1.6.2

./configure

--prefix=/usr/local/webserver/nginx

--with-http_stub_status_module

--with-http_ssl_module

CSS基础内容复习

平台ID：WEB_wysj(点击关注) ◎ ◎ ◎ ◎ ◎◎◎◎◎一┳═┻︻▄

块元素是一个元素，占用了全部宽度，在前后都是换行符

如：h1,p,div

内联元素只需要必要的宽度，不强制换行。

span, i,a

所有HTML元素可以看作盒子 包括 边距，边框，填充，和实际内容。

Margin - 清除边框区域。Margin没有背景颜色，它是完全透明

Border - 边框周围的填充和内容。边框是受到盒子的背景颜色影响

Padding - 清除内容周围的区域。会受到框中填充的背景颜色影响

Content - 盒子的内容，显示文本和图像

当为元素设置了width和height 属性时，只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加填充，边框和边距。

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

margin清除周围的元素（外边框）的区域。margin没有背景颜色，

想读更多 ->

精通 CSS 选择器（二）

补充了一些之前遗漏掉的选择器以及一些在 Selectors Level 4 中新定义的选择器。

[attribute="value" i]，在 Selectors Level 4 中增强了属性选择器，添加一个 i 标识，让属性大小写不再敏感，例如a[href$=".pdf" i]：

支持的浏览器：Chrome/Opera, Firefox, Safari

:matches(selector...)，选择匹配任意选择器参数的元素，例如：

使用该伪类可以写成：

作用是简化代码。

支持的浏览器：Chrome/Opera(:-webkit-any), Firefox(:-moz-any), Safari

:

想读更多 ->

CSS 指南

CSS - 层叠样式表(Cascading Style Sheets)

CSS定义如何显示HTML元素。

CSS 描述了HTML元素的可视化样式(外观，布局，颜色，字体)。

CSS是单独设计的文件（从而大大提高HTML的灵活性和减少HTML的复杂性）。

CSS简单易学。你可以把一个HTML元素当作选择器，并在大括号内的列出样式属性

CSS 实例

body

{

background-color:#d0e4fe;

}

h1

{

color:orange;

text-align:center;

}

p

{

font-family:"Times New Roman";

font-size:20px;

}

ids：CSS代码中的 #logo 用来选择带有属性 id="logo" 的HTML元素。

所有这些选择器都可以附加使用伪类（pseudo-classes）。一个伪类用来：

定义一个元素的特殊状态，这个状态往往和用户的动态交互行为或文档的动态结构化特征有关，因此不能提前写入HTML文档中。

是以冒号（colon） : 开始的一个关键词。

语法

伪类不能单独存在。它必须附加在一个选择器上。伪类将只是定义那个选择器的特殊状态。语法看起来如下：

.selector:pseudo-class{ }

在选择器和伪类中间没有空格， between the select

想读更多 ->

7个你值得关注的CSS专家及CSS主题

今天给大家介绍7个值得大家关注的CSS专家，同时他们所分享的6个CSS相关的主题：

第一位：

Wenting Zhang，她是CSS ICON && underline.js作者、 也是Adobe Typekit的用户体验设计师

CSS可不仅仅是简简单单的布局语言，她还是绘画和动画双料小能手！512个极简风格的图标都全部用CSS实现，然后再细细打磨动画。

来自Adobe Typekit的用户体验设计师Wenting Zhang将细细讲述CSS的隐藏绘画功能和高级动画技巧漂亮极简的CSS icon设计与描绘，让CSS进阶学习不再枯燥。那些不广为人知的CSS高阶技巧，让网页界面设计活起来！

第二位：

大漠：CSS专家、阿里巴巴前端技术专家，由他运营的http://www.w3cplus.com/网站受到很多新同学的好评。

现在大量网页设计基于网格布局。虽说人们通常注意不到它，但杂乱无章的布局时代确实已经过去了，现在是整齐结构化的天下。无论从理论、美学和整齐来说，这样的布局都很好平衡。网格结构是所有现代网站的基础，它总能给最终用户完美无暇的设计。他给通过给大家分享“CSS Grid Layout”这个主题来解决上面的问题。

第三位：

陈剑鑫：阿里移动事业群 -

想读更多 ->

css入门汇总

CSS引入的方式：

方式一：行内样式

<p style=”color:red;”></p>

方式二：内嵌套

<style type=”text/css”>

P{

Color:red;

}

</style>

<p>内嵌套</p>

方式三：链接式(把CSS抽到一个单独的文件中，这样可以给很多网页使用)

<link type=”text/css” href=”red.css” rel=”stylesheet” />

方式四：导入样式

<style type=”text/css”>

@import url(red.css)

</style>

一般情况下不适用导入样式：这是直接把这个CSS文件加载都这个地方，所以说效率不高，链接式是用什么元素有用什么样式再去CSS中请求加载。

CSS中的优先级：

行内样式 >链接式>内嵌式>导入式(链接式在后面)

行内样式 >内嵌式>导入式>链接式(链接式在前面)

总的规律：

想读更多 ->

CSS属性-派生选择器

派生选择器

通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。

在 CSS1 中，通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors)，这是由于他们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中，它们称为派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。

派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。

比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：

请注意标记为 <strong> 的蓝色代码的上下文关系：

想读更多 ->