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网站建设的课,觉得性价 ...
随机推荐
- CString 转换为 char*
CString str="这是一个测试"; char* str_0=str.GetBuffer(0);
- JS-JavaScript String 对象-string对象方法3:concat()
1.concat():用于连接两个或多个字符串. 1).语法:string.concat(string1, string2, ..., stringX) (string1, string2, . ...
- html特殊字符编码问题导致的细节问题
今天在写前端html时,一个a标签的链接地址,由于链接地址需要给后台传参数,因此带了部分url参数: 在html源码里写的连接地址是: http://域名/bidder/noticesearch?no ...
- python的依赖性安全性检查
1.safety 安装: pip install safety 使用: 检查整个系统的依赖包安全性safety check检查某个项目的依赖性安全safety check -r requirement ...
- 一张图，关于 Bayes error rate，贝叶斯错误率等的分析
造轮子是那帮搞研究的“科学家”干的事情(类似E&E里的explore),“工程师”的职责是利用已有的东西解决问题(类似E&E里的exploit). 其次,即使以工程师的角色解决业务问题 ...
- todo提纲
deep&wide为啥work,如何优化特征:详述attention,attention在ctr预估中如何使用,din为啥work?详述transformer,如何应用于ctr预估;item2 ...
- Hadoop部署启动异常问题排查
hadoop的日志目录(/home/hadoop/app/hadoop-2.6.4/logs) 1.hadoop启动不正常用浏览器访问namenode的50070端口,不正常,需要诊断问题出在哪里: ...
- Linux多线程编程-信号量
在Linux中.信号量API有两组.一组是多进程编程中的System V IPC信号量.另外一组是我们要讨论的POSIX信号量. 这两组接口类似,但不保证互换.POSIX信号量函数都已sem_开头,并 ...
- HTTP基础（分析两个例子）
两个例子(一个get,一个post)(一个是访问页面,一个是提交修改后的博文): preferences.aspx:(header)(文件) 1. Remote Address:42.121. ...
- android位置布局
fill_parent 设置一个构件的布局为fill_parent将强制性地使构件扩展,以填充布局单元内尽可能多的空间.这跟Windows控件的dockstyle属性大体一致.设置一个顶部布局或控件为 ...