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网站建设的课,觉得性价 ...
随机推荐
- phpexcel--导入excel表格
最近在做一个小项目,就是一个管理信息的小系统:要求有导入和导出的信息为excel的功能,研究过导入导出功能的肯定知道导出要比导入的简单多了,导入用的phpexcel,当时对phpexcel是完全不了解 ...
- 转载自——Json.net动态序列化以及对时间格式的处理
关于我工作中对Json处理的东西 第一:动态序列化类 第二:时间格式处理 通常我们一个类里 可能有十到更多的属性,但是我们序列化通常只需要序列化其中的 三到五个这样的话就会有多余的数据 如果 我只想序 ...
- mysql之日期函数
写在前面 mysql的学习,断断续续,今天就接着学习mysql的日期操作吧. 系列文章 mysql之创建数据库,创建数据表 mysql之select,insert,delete,update mysq ...
- 泽熙学到的 z
叶展,原泽熙投资总经理助理,现任齐鲁证券资产管理公司总裁助理,齐鲁星空.星汉等集合理财投资经理. 导读:三年前,我加入了泽熙投资,正式成为一名职业投资者.做职业投资者一直是我的理想.在股市中用眼光和头 ...
- PHP执行linux系统命令
本文是第一篇,讲述如何在PHP中执行系统命令从而实现一些特殊的目的,比如监控服务器负载,重启MySQL.更新SVN.重启Apache等.第二篇<PHP监控linux服务器负载>:http: ...
- Bag标签之校验
校验输入的内容是不是正确(校验整数.小数.字母.汉字或日文.username.XML节点名.日期.邮件及自己定义) 使用方法: <Bagid=书包名 act=verify> <wen ...
- 【React Native开发】React Native控件之DrawerLayoutAndroid抽屉导航切换组件解说(13)
),请不要反复加群! 欢迎各位大牛,React Native技术爱好者增加交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送! 该DrawerLayoutAndroid组件封 ...
- linux 文件查找实用技巧
1.tail catalina.out -n 100000 | grep -niR com.uujimu.utils.ArticleContentReplace.replacNumToA 查找内容,并 ...
- xshell容易断开的问题
修改服务器的sshd_config文件. http://bbs.51cto.com/thread-904289-1.html
- websocket聊天时，图片压缩处理（url或者input-file）
业务背景:私信聊天,需要发送图片,但是图片过大需要压缩处理.此时只有图片url,可以使用以下方法:canvasDataURL(url, 目标图片宽度,图片要显示区域的父元素) 注:该文件包含了inpu ...