网站建设中掌握基于CSS的网页布局方式，是实现web标准的基础。网站建设在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确地控制。只要对相应的代码做一些简单的修改，就可以改变网页的外观和格式。网站建设时采用CSS布局有以下优点。

1. 大大缩减页面代码，提高页面浏览速度，缩减带宽成本

2. 结构清晰，容易被搜索引擎搜索到。

什么是DIV+CSS

DIV+CSS是WEB设计标准，它是一种网页的布局方法。与传统中通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离。提起DIV+CSS组合，还要从XHTML说起。XHTML是一种在HTML（标准通用标记语言的子集）基础上优化和改进的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。

“DIV+CSS”其实是错误的叫法，而标准的叫法应是XHTML+CSS。因为DIV与Table都是XHTML或HTML语言中的一个标记，而CSS只是一种表现形式。也许其提出者本意并没有错，但是跟风者从表现曲解了其意思，认为整个页面就应当是DIV+CSS文件的组合。

前言

曾几何时，前端的页面布局一直采用div，但是div本身并没有实际的意义，它只是定义了一个区域，而且这个区域是做什么的浏览器并不知道，不利于页面的SEO优化。

因此HTML5中新增的语义化标签就很好的解决了这个问题，当然它还有其他一些好处，接下来我们就一起来看看吧。

HTML5

语义化标签的优点

今天在写一个关于 html 中 select 下拉元素选择的动态事件时，发现如果使用 javascript 中的 click 事件的话，会被执行两次。网上查了一下资料，发现 select 元素下拉选中事件并不适合使用 click 来触发，而要使用 change 事件。

select元素下拉的click事件

html代码

<select name="mochu" id="mochu">
 <option value="1">下拉1</option>
 <option value="2">下拉2</option>
 <option value="3">下拉3</option>
 <option value="4">下拉4</option>
</select>
<script>
 $('#mochu').click(function(){
 console.log($(this).val());
 });
</script>

最近，小编正在开发一个基于net core2的CMS，命名为：NetCoreTFCMS。在开发过程中经常会使用到下拉列表，觉得在View中要动态交互数据比较麻烦，就想着自己写一个tagHerlper来将enum快速生成下拉列表。

下面，我就从一个具体实例来抛砖引玉下：

会员列表页-会员状态下拉列表

1.首先定义一个文章状态的enum类型，且叫UserStatus吧。

Select 对象

Select 对象代表 HTML 表单中的一个下拉列表。

在 HTML 表单中，<select> 标签每出现一次，一个 Select 对象就会被创建。

您可通过遍历表单的 elements[] 数组来访问某个 Select 对象，或者使用 document.getElementById()。

Select 对象集合

实例

下面是一个 <input> 元素，<datalist> 中描述了其可能的值：

<inputlist="browsers"><datalistid="browsers"><optionvalue="Internet Explorer"><optionvalue="Firefox"><optionvalue="Chrome"><optionvalue="Opera"><optionvalue="Safari"></datalist>

实例

创建带有 4 个选项的选择列表：

<select>

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="mercedes">Mercedes</option>

<option value="audi">Audi</option>