CSS补充与JavaScript基础
一、CSS补充
position
1.fiexd
固定在页面的某个位置;
示例将顶部菜单始终固定在页面顶部
position: fixed; 将标签固定在某个位置
right: 0; 距离右边0像素
left: 0; 距离左边0像素
top: 0; 距离上边0像素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height: 48px;
background-color: #2459a2;
color: #DDDDDD;
/* 将顶部固定 */
position: fixed;
right: 0;
left: 0;
top: 0;
}
.ph-body{
background-color: #DDDDDD;
height: 5000px;
/* 内容要空余出上面的高度否则内容会被压在下面 */
margin-top: 48px;
}
</style>
</head>
<body style="margin: 0 auto">
<div class="pg-header">头部</div>
<div class="ph-body">
内容
</div>
</body>
</html>
2.relative+absolute
实现返回顶部效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="margin: 0 auto;">
<div style="width: 50px;height: 50px;background-color: cornflowerblue;position: absolute;right: 0;bottom: 0;">返回顶部</div>
<div style="height: 5000px;background-color: #dddddd;">
asdfasdf
</div>
</body>
</html>
实例：relative+absolute实现自定义浮动位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="margin: 0 auto">
<div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
<div style="position: absolute;left:0;bottom:0;width: 50px;height: 50px;background-color: black;"></div>
</div>
<div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
<div style="position: absolute;right:0;bottom:0;width: 50px;height: 50px;background-color: black;"></div>
</div>
<div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
<div style="position: absolute;left :0;bottom:0;width: 50px;height: 50px;background-color: black;"></div>
</div>
</body>
</html>
3.页面遮罩样式
opcity: 0.5 透明度
z-index: 层级顺序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link rel="stylesheet" href="../css/commons.css"> -->
<style>
.level-1{
z-index: 10;
position: fixed;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -200px;
background-color: white;
height: 400px;
width: 500px;
/*隐藏属性
display: none;
*/
}
.level-2{
z-index: 9;
position: fixed;
opacity: 0.5;
background-color: black;
top: 0;
left: 0;
right: 0;
bottom: 0;
/*隐藏属性
display: none;
*/
}
</style>
</head>
<body style="margin: 0 auto">
<!-- 最上面一层白色 -->
<div class="level-1">
<input type="text" />
<input type="text" />
</div>
<!-- 第二层透明 -->
<div class="level-2"></div>
<!-- 第一层底部绿色 -->
<div style="height: 5000px;background-color: green">内容</div>
</body>
</html>
4.overflow
overflow:
hidden 不显示超过对象尺寸的内容，如果图片设置了width: 200px;height: 300px;那么图片超过设置的内容全部不显示
auto 超过设置对象的尺寸内容时自动加上滚动条
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 200px;width: 300px;overflow: auto">
<img src="1.jpg">
</div>
<div style="height: 200px;width: 300px;overflow: hidden">
<img src="1.jpg">
</div>
</body>
</html>
效果图
5.hover
设置对象在其鼠标悬停时的样式。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
top: 0;
left: 0;
right: 0;
position: fixed;
height: 48px;
line-height: 48px;
background-color: #2459a2;
}
.pg-body{
margin-top: 50px;
}
.share-head-body{
margin: 0 auto;
width: 980px;
}
.pg-header .menu{
display: inline-block;
padding: 0 10px 0 10px;
color: white;
}
/* 当鼠标经过时，css样式才生效
.pg-header .menu:hover{
background-color: blue;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="share-head-body">
<a>LOGO</a>
<a class="menu">全部</a>
<a class="menu">42区</a>
<a class="menu">段子</a>
<a class="menu">1024</a>
</div>
</div>
<div class="pg-body">
<div class="share-head-body">
内容
</div>
</div>
</body>
</html>
效果图
6.background其它
background-image:url('image/4.gif'); # 默认，div大，图片重复放
background-repeat: repeat;
取值:
repeat : 默认值。背景图像在纵向和横向上平铺
no-repeat : 背景图像不平铺
repeat-x : 背景图像仅在横向上平铺
repeat-y : 背景图像仅在纵向上平铺
background-position-x: 设置或检索对象的背景图像横坐标位置。必须先指定 background-image 属性。
background-position-y: 设置或检索对象的背景图像纵坐标位置。必须先指定 background-image 属性。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.bk-img{
background-image: url(1.png);
background-repeat: no-repeat;
height: 20px;
width: 20px;
border: 1px solid red;
background-position-x: 0px;
background-position-y: 0px;
}
</style>
</head>
<body>
<div style="height: 100px"></div>
<div class="bk-img"></div>
</body>
</html>
7.小结输入框实现
所用知识点background-image、position
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.login{
height: 35px;
width: 400px;
position: relative;
margin-top: 5px;
float: left;
margin-right: 20px;
}
.login .span{
position: absolute;
right: 6px;
top: 10px;
height: 16px;
width: 16px;
/*让span标签具有块级标签的特性*/
display: inline-block;
}
</style>
</head>
<body>
<div class="login">
<input type="text" style="height: 35px;width: 370px;
padding-right: 30px;"/>
<span class="span" style="background-image: url(name.jpg)"></span>
</div>
</body>
</html>
效果图
二、JavaScript
独立的语言，浏览器具有js解释器
1.JavaScript代码存在形式
JavaScript代码存在形式：
- Head中
<script>
//javascript代码
alert(123);
</script>
//如果写在head中推荐下面方式
<script type="text/javascript">
//javascript代码
alert(123);
</script>
- 文件中
<script src='js文件路径'> </script>
PS: JS代码需要放置在 <body>标签内部的最下方
2.JavaScript注释
单行注释 //
多行注释 /* */
3.JavaScript变量命名方式
python 命名方式：
name = 'alex'
JavaScript 命名方式:
name = 'alex' # 全局变量
var name = 'eric' # 局部变量
4.通过浏览器console编写JavaScript代码
通过浏览器的console也可以临时编写JavaScript代码
5.JavaScript基本数据类型
数字
a = 18;
字符串
a = "alex"
a.chartAt(索引位置) 通过字符串下标获取指定字符串
a.substring(起始位置，结束位置) 通过字符串下标对字符串进行切片
a.lenght 获取当前字符串长度
...
列表(数组)
a = [11,22,33]
字典
a = {'k1':'v1','k2':'v2'}
布尔类型
true
false
6.for循环
for循环是循环的是元素的索引，for循环通常有两种方式
第一种方式
a = [11,22,33,44]
for(var item in a){
console.log(item);
}
循环字典时循环的是key
a = {'k1':'v1','k2':'v2'}
for(var item in a){
console.log(item);
}
- 上面代码的执行结果为
第二种方式
第二种方式不支持字典的循环
for(var i=0;i<10;i++){
console.log(i)
}
a = [11,22,33,44]
for(var i=0;i<a.length;i++){
console.log(a[i])
}
- 上面代码的执行结果为
7.条件判断
if判断语法:
else if 相当于python中的elif
if(条件){
}else if(条件){
}else if(条件){
}else{
}
表达式:
== 值相等;例如 1 == "1" 值都为1，但是类型不同一个是数字一个是字符串，
=== 值和类型都相等；1 === 1
&& and
|| or
8.函数
语法：
定义函数
function func(arg1,arg2){
}
执行函数
func(1,2)
9.定时器
每隔400毫秒自动执行一次指定的函数
setInterval('函数名()', 400)
10.alert和console.log
alert实现鼠标点击时弹出对话框效果
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 400px;border: 1px solid black;width: 300px;margin: 0 auto">
<div style="margin-top: 10px;text-align: center">
<input type="text" />
<input id='i1' onclick="func()" type="button" value="点我">
</div>
</div>
<script>
function func() {
alert("警告")
}
</script>
</body>
</html>
实现效果
console.log
将内容输出到浏览器的console控制台
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div onclick="func()" id="i1">你好，世界</div>
<script>
function func() {
// 获取指定ID的标签
var tag = document.getElementById('i1');
//获取i1标签的内容
var content = tag.innerText;
//内容输出到console
console.log(content);
}
func()
</script>
</body>
</html>
实现效果
11.DOM
1.查找标签
获取单个元素 document.getElementById('i1')
获取多个元素（列表）document.getElementsByTagName('div')
获取多个元素（列表）document.getElementsByClassName('c1')
a. 直接找
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合
b. 间接
tag = document.getElementById('i1')
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
2.操作标签
a. innerText
获取标签中的文本内容
标签.innerText
对标签内部文本进行重新复制
标签.innerText = ""
b. className
tag.className =》 直接整体做操作
tag.classList.add('样式名') 添加指定样式
tag.classList.remove('样式名') 删除指定样
c. checkbox
获取值
checkbox对象.checked
设置值
checkbox对象.checked = true
3.实例1：查找标签修改标签内容实现循环标签内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.i1{
background-color: red;
color: white;
font-size: 20px;
font-weight: bold;
text-align: center;
height: 38px;
line-height: 30px;
}
</style>
</head>
<body style="margin: 0 auto">
<div id="i1" class="i1">欢迎光临共享商城</div>
<script>
function func() {
//根据ID获取指定标签的内容
var tag = document.getElementById('i1');
//获取标签的内容
var content = tag.innerText;
// 获取内容的索引为1的字符
var start = content.charAt(0);
// 获取从1到最后的值
var end = content.substring(1,content.length);
// 重新拼接内容
var new_content = end + start ;
// 重新赋值i1标签的内容
tag.innerText = new_content;
}
//定时器每个500毫秒执行一次func
setInterval('func()',500)
</script>
</body>
</html>
实现效果
4.通过JavaScript实现添加样式删除样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.remove{
display: none;
}
.level-1{
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: black;
opacity: 0.5;
z-index: 9;
}
.level-2{
position: fixed;
width: 500px;
height: 400px;
background-color: white;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -200px;
z-index: 10;
}
</style>
</head>
<body>
<div>
<table border="1" style="width: 200px;text-align: center">
<thead>
<tr>
<th>主机名</th>
<th>端口</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td>1.1.1.2</td>
<td>80</td>
</tr>
</tbody>
</table>
</div>
<div>
<input type="button" value="添加主机" onclick="ShowModel()"/>
</div>
<!-- 透明层 -->
<div id='i1' class="level-1 remove"></div>
<div id='i2' class="level-2 remove">
<p style="text-align: center">
<input type="text" value="主机名"/>
</p>
<p style="text-align: center">
<input type="text" value="端口">
</p>
<p style="text-align: center">
<input type="button" value="确定">
<input type="button" value="取消" onclick="DelModel()">
</p>
</div>
<script>
//移除样式
function ShowModel() {
document.getElementById('i1').classList.remove('remove')
document.getElementById('i2').classList.remove('remove')
}
//添加样式
function DelModel() {
document.getElementById('i1').classList.add('remove')
document.getElementById('i2').classList.add('remove')
}
</script>
</body>
</html>
实现效果
5.实例：使用标签直接查找与间接查找实现全选与反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 隐藏样式 */
.hide{
display: none;
}
/* 透明层 */
.level-1{
background-color: black;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0.5;
z-index: 9;
}
/* 弹出框 */
.level-2{
position: fixed;
width: 500px;
height: 400px;
background-color: white;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -200px;
z-index: 10;
}
</style>
</head>
<body>
<!-- 表格 -->
<div>
<input type="button" value="添加主机" onclick="ShowModel()">
<input type="button" value="全部取消" onclick="AllRemove()">
<input type="button" value="全选" onclick="Allchoose()">
<input type="button" value="反选" onclick="ReverseAll()">
<table>
<thead>
<tr>
<th>选择</th>
<th>主机名</th>
<th>IP地址</th>
<th>端口号</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox"></td>
<td>bjtn-1.1-webngx</td>
<td>192.168.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>bjtn-1.2-webngx</td>
<td>192.168.1.2</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>bjtn-1.3-webngx</td>
<td>192.168.1.3</td>
<td>80</td>
</tr>
</tbody>
</table>
</div>
<!-- 透明层 -->
<div id="i1" class="level-1 hide"></div>
<!-- 弹出框 -->
<div id="i2" class="level-2 hide">
<p style="text-align: center">
<input type="text" value="hostname">
</p>
<p style="text-align: center">
<input type="text" value="ip">
</p>
<p style="text-align: center">
<input type="text" value="端口">
</p>
<p style="text-align: center">
<input type="button" value="确定">
<input type="button" value="取消" onclick="Cancel()">
</p>
</div>
<!-- js -->
<script>
function ShowModel(){
document.getElementById('i1').classList.remove('hide')
document.getElementById('i2').classList.remove('hide')
}
function Cancel(){
document.getElementById('i1').classList.add('hide')
document.getElementById('i2').classList.add('hide')
}
//全选
function Allchoose(){
//1.先获取到tbody标签
var tbody = document.getElementById('tb');
//2.获取到所有的子标签
var tr_list = tbody.children;
//3.设置所有子标签里的第一个标签中的input标签checkbox为true
for(var i=0;i<tr_list.length;i++){
//4.获取当前的tr标签
var current_tr = tr_list[i];
//5.获取当前tr标签中的input中的checkbox
var checkbox = current_tr.children[0].children[0];
//6.将checkbox的值设置为true就自动全选
checkbox.checked = true;
}
}
//全部取消
function AllRemove(){
//1.先获取到tbody标签
var tbody = document.getElementById('tb');
//2.获取到所有的子标签
var tr_list = tbody.children;
//3.设置所有子标签里的第一个标签中的input标签checkbox为false
for(var i=0;i<tr_list.length;i++){
//4.获取当前的tr标签
var current_tr = tr_list[i];
//5.获取当前tr标签中的input中的checkbox
var checkbox = current_tr.children[0].children[0];
//6.将checkbox的值设置为false
checkbox.checked = false;
}
}
//反选
function ReverseAll(){
//1.先获取到tbody标签
var tbody = document.getElementById('tb');
//2.获取到所有的子标签
var tr_list = tbody.children;
//3.设置所有子标签里的第一个标签中的input标签checkbox为true
for(var i=0;i<tr_list.length;i++){
//4.获取当前的tr标签
var current_tr = tr_list[i];
//5.获取当前tr标签中的input中的checkbox
var checkbox = current_tr.children[0].children[0];
//6.如果当前的checkbod等于true就设置为false，否则就设置为true
if(checkbox.checked){checkbox.checked = false;}else{
checkbox.checked = true;
}
}
}
</script>
</body>
</html>
实现效果
6.实例：左侧菜单栏效果
- 存放css样式文件
.pg-header{
height: 48px;
line-height: 48px;
background-color: #DDDDDD;
}
.container{
width: 980px;
margin: 0 auto;
}
.pg-info{
color: brown;
font-weight: bold;
font-size: 16px;
}
.pg-li{
margin: 0 5px;
float: left;
}
ol, ul {
list-style: none;
}
.hide{
display: none;
}
.item .header{
height: 35px;
background-color: #2459a2;
color: white;
line-height: 35px;
}
- html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="commons.css">
</head>
<body style="margin: 0 auto">
<div class="pg-header">
<!-- 头部信息 -->
<div class="container">
<ul class="pg-li">
<li><a class="pg-info">后台管理</a></li>
</ul>
</div>
</div>
<!-- 左侧菜单 -->
<div style="text-align: center;width: 310px;">
<div class="item">
<div id='i1' class="header" onclick="ChangeMenu('i1');">家用电器</div>
<div class="content">
<div>合资品牌</div>
<div>国产品牌</div>
<div>互联网品牌</div>
</div>
</div>
<div class="item">
<div id='i2' class="header" onclick="ChangeMenu('i2');">电脑办公</div>
<div class="content hide">
<div>笔记本</div>
<div>游戏本</div>
<div>平板电脑</div>
</div>
</div>
<div class="item">
<div id='i3' class="header" onclick="ChangeMenu('i3');">厨具</div>
<div class="content hide">
<div>烹饪锅具</div>
<div>剪刀菜板</div>
<div>厨房配件</div>
</div>
</div>
<div class="item">
<div id='i4' class="header" onclick="ChangeMenu('i4');">个护化妆</div>
<div class="content hide">
<div>洁面</div>
<div>洗发</div>
<div>沐浴</div>
</div>
</div>
</div>
<script>
function ChangeMenu(nid){
//获取当前id的标签
var head = document.getElementById(nid);
//找到父标签的父标签下的所有子标签
var item_list = head.parentElement.parentElement.children;
//循环所有子标签找到索引为1的标签添加hide样式隐藏标签
for(var i=0;i<item_list.length;i++){
//当前的标签
var current_item = item_list[i];
//修改当前标签内部索引为1的div，添加hide演示
current_item.children[1].classList.add('hide');
}
//所有标签全部添加上隐藏样式属性后删除当前标签的下一个子标签隐藏属性
head.nextElementSibling.classList.remove('hide');
}
</script>
</body>
</html>
实现效果
CSS补充与JavaScript基础的更多相关文章
- css补充、JavaScript、Dom
css补充: position: fixed:可以将标签固定在页面的某个位置 absolute+relative:通过两者的结合可以让标签在一个相对的位置 代码例子:(通过fixed标签将某些内容固定 ...
- (五)CSS和JavaScript基础
DHTML :制作动态HTML页面的技术 DHTML=HTML+层叠样式表CSS+脚本语言javascript 一.CSS 1.1 CSS样式的分类: 行内样式:只影响一行,其他相同标签也不影响.如下 ...
- JavaScript基础--事件驱动和访问CSS技术(十)
1.原理: 2.快速入门案例 js中的事件主要分为4种: 案例:监听鼠标点击事件,并能够显示鼠标点击的位置x,y <script language="javascript" ...
- 前端之JavaScript基础
前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...
- 第三篇：web之前端之JavaScript基础
前端之JavaScript基础 前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript ...
- JavaScript基础：DOM操作详解
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 JavaScript的组成 JavaScript基础分为三个部分: ...
- JavaScript基础三
1.10 关于DOM的事件操作 1.10.1 JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数. ...
- JavaScript基础（2）-DOM
一.伪数组arguments arguments代表的是实参,有个讲究的地方是:arguments只在函数中使用. 1.返回函数实参的个数:arguments.length,例如: fn(2,4); ...
- 第五模块·WEB开发基础-第2章JavaScript基础
第1章 JavaScript基础 01-JavaScript历史介绍 02-JavaScript的组成 03-JavaScript的引入方式 04-变量的使用 05-基本数据类型(一) 06-基本数据 ...
随机推荐
- ApiController使用Session验证出现Null解决方案
问题描述 在服务端保存登录信息,出现异常信息 分析发现HttpContext.Current.Session为null 解决方案 执行时出报异常,要在Global.asax里添加:开启Session功 ...
- jQuery-1.9.1源码分析系列（十六）ajax——ajax框架
ajax的介绍就不多说了,点击可看. 既然是ajax框架,那么闲谈一谈jQuery的ajax处理思路. 现在的浏览器都支持ajax,只不过不同的浏览器使用方法可能有不同(IE使用new window. ...
- 基于<MediaElement>的WPF视频播放器（终章）【3】
一.前言 对于<MediaElement>前两章介绍了差不多了,其实好的界面还需要UI工程师的配合,比如帮忙设计下按钮的样式等等.同样视频本身也需要吸引人,不然做的再好的播放器也没用.之后 ...
- js用户管理中心tab切换界面模板
效果体验:http://hovertree.com/texiao/js/27/ 效果图如下: 代码如下: <!DOCTYPE html> <html> <head> ...
- C# 项目提交过程中感受
C# 项目提交过程中感受 新到一家互联网公司,昨天第一次提交代码,遇到了不少问题,而且大多数是代码格式问题,特此将范的错误记录下来,自我警示. 1. 代码对齐,这个虽然一直也都在注意,不过还是有一行代 ...
- Asp.net 面向接口可扩展框架之数据处理模块及EntityFramework扩展和Dapper扩展(含干货)
接口数据处理模块是什么意思呢?实际上很简单,就是使用面向接口的思想和方式来做数据处理. 还提到EntityFramework和Dapper,EntityFramework和Dapper是.net环境下 ...
- css的三种样式
1.行间样式 顾名思义就是直接写在div对里面的样式 2.内部样式 把样式写在一对<style></style>标签对中 这个标签对是放在html页面里面的 3.外联样 ...
- 【原创-算法-实现】异步HTTP请求操作
一.说明 1) 这个类 是我 在真实项目中,优化解决真实问题 时,不参考第三方代码,完全由自己查阅MSDN官方文档 , 完成的一个真实生产环境中使用的功能类 2) 读者在使用此类时,请尊重原创,在代码 ...
- 【UI插件】开发一个简单日历插件（上）
前言 最近开始整理我们的单页应用框架了,虽然可能比不上MVVM模式的开发效率,也可能没有Backbone框架模块清晰,但是好歹也是自己开发出来 而且也用于了这么多频道的东西,如果没有总结,没有整理,没 ...
- IIS6.0添加上.net4.0后，以前的.net系统出现“服务器应用程序不可用”的错误提示解决办法
把VS2010开发的网站.net4.0部署到Windows Server 2003的服务器上去, Windows Server 2003操作系统自带的为IIS 6.0,IIS 6.0一般只支持.NET ...