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网站建设的课,觉得性价 ...
随机推荐
- 《Linux命令行与shell脚本编程大全 第3版》Linux命令行---4
以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下: <Linux命令行与shell脚本 ...
- django 模型生成sql（多对多）
模型如下: class Publisher(models.Model): name = models.CharField(max_length=30) address = models.CharFie ...
- Linux每日一坑001
centos6,7中网卡/etc/sysconfig/network-scripts/ifcfg-eth0的命名是有要求的,必须是ifcfg-开头.改网卡名的时候掉坑.
- Single Number III - LeetCode
Given an array of numbers nums, in which exactly two elements appear only once and all the other ele ...
- MySQL错误：Error Code: 1175. You are using safe update mode and you tried to update a table without a WHERE that uses a KEY column To disable safe mode, toggle the option in Preferences -> SQL easonjim
错误: Error Code: . You are using safe update mode and you tried to update a table without a WHERE tha ...
- 基于WPF系统框架设计(9)-多值绑定之IMultiValueConverter
应用场景 我想把View层的一个布局控件和功能按钮传到ViewModel层,达到动态变更布局,同时灵活获取功能按钮的属性,让View和ViewModel完全分离,而不受View层影响. 最后我想到使用 ...
- ThinkPHP3.1 模板布局
ThinkPHP的模板引擎内置了布局模板功能支持,可以方便的实现模板布局以及布局嵌套功能.有三种布局模板的支持方式: 第一种方式:全局配置方式 这种方式仅需在项目配置文件中添加相关的布局模板配置,就可 ...
- php数据库操作代码
数据库名为reg,表名为member,字段名为username,password,regdate <?php $link=@mysql_connect("localhost" ...
- 初始----python数字图像处理--：环境安装与配置
一提到数字图像处理编程,可能大多数人就会想到matlab,但matlab也有自身的缺点: 1.不开源,价格贵 2.软件容量大.一般3G以上,高版本甚至达5G以上. 3.只能做研究,不易转化成软件. 因 ...
- 从零开始搭建GitHub个人博客--第一步
最近一段时间工作不是很忙,便开始着手整理博客并梳理自己的简历 可是,打开cnblog后第一眼我便开始了纠结~ 原起: 一直在cnblog写博客,看博客,突然发现这种在线纯文档记录的方式俨然跟不上时代的 ...