ASP.NET动态网站制作（4）--css（3）
前言：这节课主要运用前面所学的知识写三个例子，并且学习浏览器兼容性的解决方法。
内容：
例子1：一个关于列表的例子
html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ListExample</title>
<link rel="stylesheet" type="text/css" href="css/list.css"/>
</head> <body>
<ul>
<li class="list"><a href="javascript:;">体育明星</a>
<ul class="subList">
<li><a href="javascript:;">乔丹</a></li>
<li><a href="javascript:;">纳什</a></li>
<li><a href="javascript:;">奥尼尔</a></li>
</ul>
</li>
<li class="list"><a href="javascript:;">政治明星</a>
<ul class="subList">
<li><a href="javascript:;">习大大</a></li>
<li><a href="javascript:;">普金</a></li>
<li><a href="javascript:;">奥巴马</a></li>
</ul>
</li>
<li class="list"><a href="javascript:;">娱乐明星</a>
<ul class="subList">
<li><a href="javascript:;">黄家驹</a></li>
<li><a href="javascript:;">刘德华</a></li>
<li><a href="javascript:;">周润发</a></li>
</ul>
</li>
<li class="list"><a href="javascript:;">历史人物</a>
<ul class="subList">
<li><a href="javascript:;">康熙</a></li>
<li><a href="javascript:;">李世民</a></li>
<li><a href="javascript:;">秦始皇</a></li>
</ul>
</li>
</ul>
</body>
</html>
css代码：
@charset "utf-8";
/* CSS Document */
*
{
padding:0px;
margin:opx;
font-family:"微软雅黑";
}
a
{
text-decoration:none;
color:#FFF;
}
a:hover
{
color:#FF0;
}
ul
{
list-style-type:none;
}
body
{
background-color:#FFDFE7;
}
.list
{
width:200px;
border-bottom:solid 1px #EF9E9C;
}
.list>a
{
height:30px;
line-height:30px;
background-color:#C61031;
display:block;
border-left:solid 13px #731410;
padding-left:5px;
}
.list>a:hover
{
background-color:#990020;
}
.subList li
{
border-bottom:solid 1px #EF9E9C;
}
.subList a
{
height:30px;
line-height:30px;
background-color:#EF5173;
display:block;
border-left:solid 28px #A51C18;
padding-left:5px;
}
.subList a:hover
{
background-color:#C2425D;
}
结果图：
例子2：一个关于布局的例子
html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AlighmentExample</title>
<link rel="stylesheet" type="text/css" href="css/alignment.css"/>
</head> <body>
<div id="header"></div>
<div id="main-body">
<div id="main-left"></div>
<div id="main-right"></div>
</div>
<div id="footer"></div>
</body>
</html>
css代码：
@charset "utf-8";
/* CSS Document */
*
{
padding:0px;
margin:0px;
font-family:"微软雅黑";
}
#header
{
height:90px;
width:900px;
border:solid 2px #390;
margin:20px auto;
}
#main-body
{
height:400px;
width:900px;
margin:20px auto;
}
#main-left
{
width:200px;
height:400px;
border:solid 2px #F09;
float:left;
margin-right:10px;
}
#main-right
{
width:682px;
height:400px;
border:solid 2px #F00;
float:left
}
#footer
{
clear:both;
width:900px;
height:90px;
border:solid 2px #30F;
margin:0px auto;
}
结果图：
例子3：一个关于图文列表的例子
html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>image-text</title>
<link rel="stylesheet" type="text/css" href="css/image-text.css"/>
</head> <body>
<div id="dnews">
<div id="title">
<div id="theme"><a href="javascript:;">汽车 </a>/<a href="javascript:;"> 在线购车</a></div>
<div id="channel"><a href="javascript:;">更换频道</a></div>
</div>
<div id="con">
<div id="con1"><a href="javascript:;"><img src="data:image/car.png"/></a></div>
<div id="con2"><a href="javascript:;">报废车辆搭成山寨“巨石阵”</a></div>
</div>
<div id="newslist">
<ul>
<li><a href="javascript:;">国庆出游最佳选择 四款超实用7座SUV推荐</a></li>
<li><a href="javascript:;">国内SUV车型最新消息盘点 比亚迪宋领先</a></li>
<li><a href="javascript:;">东风本田歌瑞10月16日上市 起售价低于8万</a></li>
<li><a href="javascript:;">曝纳智捷3谍照 预计明年3季度上市</a></li>
<li><a href="javascript:;">2016款3系长轴版购车手册 推荐320Li进取型</a></li>
</ul> </div>
<div id="singleNews1"><a href="javascript:;">在中国有车和没车的区别</a></div>
<div id="singleNews2"><a href="javascript:;">9.9元抢凯美瑞2.2万代金券</a></div>
</div>
</body>
</html>
css代码：
@charset "utf-8";
/* CSS Document */
*
{
padding:0px;
margin:0px;
font-family:"微软雅黑";
}
a
{
text-decoration:none;
}
ul
{
list-style-type:none;
}
#dnews
{
width:340px;
height:307px;
margin:90px auto;
border-top:solid 1px #6DAAEA;
border-bottom:solid 1px #6DAAEA;
}
#title
{
height:33px;
line-height:33px;
background-color:#F7FAFD;
color:#0873CB;
}
#theme
{
float:left;
}
#theme a
{
color:#0873CB;
font-weight:;
}
#theme a:hover
{
text-decoration:underline;
}
#channel
{
margin-right:20px;
float:right;
}
#channel a
{
color:#0873CB;
}
#con
{
margin-top:20px;
clear:both;
height:60px;
}
#con1
{
margin-right:15px;
float:left;
}
#con2
{
font-weight:;
color:#3B63B7;
line-height:60px;
margin-top:15px;
}
#con2 a:hover
{
text-decoration:underline;
}
#newslist
{
margin-top:10px;
clear:left;
height:145px;
}
#newslist li
{
height:29px;
line-height:29px;
background-image:url("../image/tip.png");
background-repeat:no-repeat;
background-position:left center;
}
#newslist a
{
font-size:15px;
font-family:"宋体";
margin-left:17px;
color:#000;
}
#newslist a:hover
{
color:#F00;
text-decoration:underline;
}
#singleNews1
{
margin-left:0px;
height:29px;
line-height:29px;
float:left;
}
#singleNews1 a
{
font-family:"宋体";
font-size:14px;
color:#000;
margin-right:9px;
}
#singleNews1 a:hover
{
color:#F00;
text-decoration:underline;
}
#singleNews2
{
height:29px;
line-height:29px;
float:left;
}
#singleNews2 a
{
font-family:"宋体";
font-size:14px;;
color:#000;
}
#singleNews2 a:hover
{
color:#F00;
text-decoration:underline;
}
结果图：
浏览器兼容性问题的原因：
不同浏览器使用内核及所支持的HTML等网页语言标准不同；以及用户客户端的环境不同（如分辨率不同）造成的显示效果不能达到理想效果。最常见的问题就是网页元素位置混乱，错位。目前暂没有统一的能解决这样的工具，最普遍的解决办法就是不断的在各浏览器间调试网页显示效果，通过对css样式控制以及通过脚本判断并赋予不同浏览器的解析标准。
浏览器兼容性问题解决参考：http://www.cnblogs.com/zhutianxiang/archive/2012/01/19/2320349.html
后记：还需多多练习。
ASP.NET动态网站制作（4）--css（3）的更多相关文章
- ASP.NET动态网站制作（3）--css（2）
前言:css分为四次课讲完,第一节课内容见ASP.NET动态网站制作(2)--css(1),接下来的内容会涉及到定位.浮动.盒子模型(第二次课).css的具体应用(第三次课).css3(第四次课).今 ...
- ASP.NET动态网站制作（2）--css（1）
前言:这节课主要讲关于css的相关内容. 重点:1.css(Cascading Style Sheet)叠层样式表,做网页的外观,是用来控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 2 ...
- ASP.NET动态网站制作（1）--html
前言:正式上课的第一课,讲的是前端部分的最基础内容:html. 前端:html,css,js 数据库:sql server 动态部分:.net,c#... IIS(Internet Informati ...
- ASP.NET动态网站制作（28）-- 三层框架（2）
前言:三层框架的第二节课,继续上次课的内容. 内容: 1.三层框架的使用目的:可以将视图层和业务逻辑层及实体层分开,可以提高代码的扩展性,安全性,可以实现程序的低耦合性. 2.GetModel方法及G ...
- ASP.NET动态网站制作（26）-- Ajax
前言:这节课讲解关于Ajax的相关内容. 内容: 1.当点击页面中的一个按钮提交数据或请求数据的时候,整个页面的信息都会提交(不管信息是否是提交或者请求的数据,页面中所有的数据都提交),这样耗用的时间 ...
- ASP.NET动态网站制作（20）-- C#（3）
前言:C#的第三节课,继续上次课的内容,依旧围绕基础的只是讲解. 内容: 1.StringBuilder类:由于string类一旦创建,则不能更改.如果做字符串拼凑的话,将会非常耗费空间,如: str ...
- ASP.NET动态网站制作（18）-- jq作业讲解及知识补充
前言:这节课主要讲解js及jq作业,并在作业讲解完后补充关于jQuery的一些知识点. 内容: 1.作业讲解:计算器那一块考虑的各种情况还不算完善,只实现了基本的功能,还需多多练习使用jQuery. ...
- ASP.NET动态网站制作（11）-- JQ（3）
前言:这节课主要是讲CSS作业,然后继续讲jQuery. 内容: 1.css作业讲解. 2.jq设置元素样式: (1)添加.删除css类别:$("div").addClass(& ...
- ASP.NET动态网站制作（0）
前言:一直想系统地学习一下网站建设的相关内容,看过相关的书籍,也跟着视频学过,但总觉得效率不高,学过的东西印象不深刻,或许还是自己动手实践的少.无意中免费听了一堂讲ASP.NET网站建设的课,觉得性价 ...
随机推荐
- IPC最快的方式----共享内存（shared memory）
在linux进程间通信的方式中,共享内存是一种最快的IPC方式.因此,共享内存用于实现进程间大量的数据传输,共享内存的话,会在内存中单独开辟一段内存空间,这段内存空间有自己特有的数据结构,包括访问权限 ...
- MQ 分拆Json数据包然后上传
public void UploadInsurHistory() { using (IDbConnection connection = ConnConfig.DmsConnection) { IDb ...
- 获取网页是手机端还是PC端访问
C#方式: /// <summary> /// 是否手机访问 /// </summary> /// <returns></returns> public ...
- NLP--edit distance
基本思想 通过插入(insert).删除(delete)和替换(substitute)个操作将一个字符串s1变换到另一个字符串s2的最少步骤数distacnce,用(1-distance/length ...
- JavaScript的Object
题目 var foo = new Object(); var bar = new Object(); var map = new Object(); map[foo] = "foo" ...
- 构建更好的HashMap
在7月份的那期 Java理论与实践(“并发集合类”)中,我们简单地回顾了可伸缩性的瓶颈,并讨论了怎么用共享数据结构的方法获得更高的并发性和吞吐量.有时候学习的最好方法是分析专家的成果,所以这个月我们将 ...
- EasyMvc入门教程-基本控件说明（11）菜单导航
基本上,是个网站就会有菜单导航,目前流行的菜单是不是这样样子的? 似乎是bootstrap引领的风格,我们就用EasyMvc实现吧,上代码: @{ var data = new List<Men ...
- RPM命令使用
RPM是RedHat Package Manager(RedHat软件包管理工具)的缩写 •rpm的常用参数 i:安装应用程序(install) e:卸载应用程序(erase) vh:显示安装进度:( ...
- Linux命令之basename 命令
用途 返回一个字符串参数的基本文件名称. 语法 basename String [ Suffix ] 描述 basename 命令读取 String 参数,删除以 /(斜杠) 结尾的前缀以及任 ...
- 【AngularJS】【03】使用AngularJS进行开发
看不到PPT的请自行解决DNS污染问题.