css.day02.eg
<!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>标签指定式</title>
<style type="text/css">
div.red{color:#f00;}
</style>
</head>
<body>
<p class="red">上海</p>
<p>上海</p>
<p>上海</p>
<div class="red">上海</div>
<div>上海</div>
<font>字体</font>
<span>字体</span>
</body>
</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>后代选择器</title>
<style>
.lv strong{color:#0F0;}
div strong{color:#009;}
strong{color:#F00;}
</style>
</head>
<body>
<p>上海 <strong>xxxx</strong></p>
<p>上海 <strong>xxxx</strong></p>
<div> 上海 <strong>xxxx</strong></div>
<div> 上海 <strong>xxxx</strong></div>
<div> 上海 <strong>xxxx</strong></div>
<div> 上海 <strong>xxxx</strong></div>
<div> 上海 <strong>xxxx</strong></div>
<div> 上海 <strong>xxxx</strong></div>
<div> 上海 <strong>xxxx</strong></div>
<div class="lv"> 上海 <strong>xxxx</strong></div>
<strong>xxxx</strong>
</body>
</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>并集选择器</title>
<style type="text/css">
/*p{color:#F00; }
span{color:#F00;}
ul{color:#F00;}*/
/*p,span,ul{color:#F00;}*/
*{color:#F00;}
*{margin:0; padding:0;}
</style>
</head>
<body>
<p>上海 <strong>xxxx</strong></p>
<p>上海 <strong>xxxx</strong></p>
<div> 上海 <strong>xxxx</strong></div>
<div> 上海 <strong>xxxx</strong></div>
<div> 上海 <strong>xxxx</strong></div>
<div> 上海 <strong>xxxx</strong></div>
<div> 上海 <strong>xxxx</strong></div>
<div> 上海 <strong>xxxx</strong></div>
<div> 上海 <strong>xxxx</strong></div>
<div class="lv"> 上海 <strong>xxxx</strong></div>
<span><strong>xxxx</strong></span>
<span><strong>xxxx</strong></span>
<ul><strong>xxxx</strong></ul>
<ul><strong>xxxx</strong></ul>
</body>
</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>伪类选择器</title>
<style type="text/css">
a:link{color:#000; text-decoration:none; }/*文本修饰为没有下划线*/
a:visited{color:#F90; text-decoration:none;} /*点击后，为黄色 没有下划线*/
a:hover{color:#F00; text-decoration:underline;} /*鼠标经过的时候，为红色下划线*/
a:active{color:#00ff00; text-decoration:underline;} /*鼠标点击的时候，为绿色 下划线*/
/*可以这么写：*/
a{color:#000; text-decoration:none;}
a:hover{color:#F00; text-decoration:underline;}
</style>
</head>
<body>
<a href="#">百度</a> <a href="#">新浪</a> <a href="#">搜狐</a> <a href="http://www.huawei.com">化为</a>
</body>
</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>导航</title>
<style type="text/css">
div{text-align:center;}
div a{width:88px; height:44px; background-image:url(gray.JPG);display:inline-block; color:#FFF; text-decoration:none; line-height:44px;}
div a:hover{background-image:url(red.JPG); color:#F90;}
</style>
</head>
<body>
<div>
<a href="#">首页</a>
<a href="#">相册</a>
<a href="#">作品</a>
<a href="#">生活</a>
<a href="#">展示</a>
<a href="#">留言</a>
</div>
</body>
</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>背景</title>
<style type="text/css">
html,body{
/* background-image:url(bg4.jpg);
background-repeat:no-repeat;
background-position:right bottom;
background-color:#eeeee8;
background-position:100px 50px;*/
/* 简写：*/
/* background:url(bg4.jpg) 100px 50px no-repeat #eeeee8;*/
background:url(013.jpg) no-repeat left top fixed;}
</style>
</head>
<body>
<p>asf</p>
<p>sadf</p>
<p>asdfas</p>
<p>df</p>
<p>asdf</p>
<p>asd</p>
<p>fas</p>
<p>df</p>
<p>asdf</p>
<p>as</p>
<p>fas</p>
<p>df</p>
<p>asdf</p>
<p>as</p>
<p>df</p>
<p>asdf</p>
<p>asd</p>
<p>fas</p>
<p>dfadsfa</p>
<p>asd</p>
<p>f</p>
<p>asdf</p>
<p>asdf</p>
<p>a</p>
<p>fdas</p>
<p>fa</p>
<p>sf</p>
<p>asd</p>
<p>fas</p>
<p>fas</p>
<p>f</p>
<p>asdf</p>
<p>sa</p>
<p>asdf</p>
<p>asdf</p>
<p>asf</p>
<p>asf</p>
<p>asf</p>
<p>asfd</p>
<p> </p>
<p>sdf</p>
</body>
</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>恭喜</title>
<style type="text/css">
div.three{ background-attachment:fixed;}
.one{height:927px; background:url(img/left.jpg) no-repeat ;}
.two{height:927px; background:url(img/right.jpg) right top no-repeat;}
.three{height:927px; background:url(img/top.jpg) no-repeat top center; }
.four{height:927px; background:url(img/bottom.jpg) no-repeat center center;}
</style>
</head>
<body>
<div class="one">
<div class="two">
<div class="three">
<div class="four"></div>
</div>
</div>
</div>
</body>
</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>无标题文档</title>
<style>
body,a,li{font-size:12px; text-decoration:none; list-style:none;}
</style>
</head>
<body>
<ul>
<li>测试</li>
<li>测试</li>
<li>测试</li>
</ul>
<a href="#">测试</a>
<a href="#">测试</a>
<a href="#">测试</a>
</body>
</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>购物车</title>
<style type="text/css">
.box{text-align:center;}
.box a{ display:inline-block;width:67px; height:32px; background:url(110.png) no-repeat top left;}
.box a:hover{ background-position:bottom;}
</style>
</head>
<body>
<div class="box">
<a href="#"></a>
</div>
</body>
</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>边框线</title>
<style type="text/css">
div{width:200px; height:100px; /*border-color:#f00; border-width:1px; border-style:dashed;*/
/*border:1px solid #0F0;*/ border-top:1px solid #F00; border-bottom:1px solid #0F0;}
</style>
</head>
<body>
<div>asdfasdf</div>
</body>
</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>表单</title>
<style type="text/css">
input{border:none; border-bottom:1px dashed #f00; }
</style>
</head>
<body>
用户名：<input type="text" /><br />
密 码:<input type="password" />
</body>
</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>列表</title>
<style type="text/css">
.hd{height:35px; width:238px; border:1px solid #D9E0EE; border-top:3px solid #FF8400; border-bottom:0; text-indent:2em; font-weight:bold; line-height:35px;}
.bd{height:130px; width:238px; border:1px solid #D9E0EE; }
.bd ul li{line-height:24px; background:url(hhh.jpg) no-repeat left center; text-indent:1em;}
.bd ul{list-style:none; /*清除列表样式*/}
.bd a{font-size:12px; text-decoration:none; color:#3c3c3c;}
.bd a:hover{color:#FF8400; text-decoration:underline;}
</style>
</head>
<body>
<div class="hd">行业动态</div>
<div class="bd">
<ul>
<li><a href="#">不老女神-伊能静的减肥秘诀！！</a></li>
<li><a href="#">不老女神-伊能静的减肥秘诀！！</a></li>
<li><a href="#">不老女神-伊能静的减肥秘诀！！</a></li>
<li><a href="#">不老女神-伊能静的减肥秘诀！！</a></li>
</ul>
</div>
</body>
</html>
转载请备注。
css.day02.eg的更多相关文章
- 2020年12月-第02阶段-前端基础-CSS Day02
CSS Day02 复合选择器 后代选择器 并集选择器 1. CSS复合选择器 理解 理解css复合选择器分别的应用场景 为什么要学习css复合选择器 CSS选择器分为 基础选择器 和 复合选择器 , ...
- css.day02
1.复合选择器 复合选择器 一般会有几个标签混合使用 .把多个组合成一个 称之为复合 1.1标签指定式 复合选择器 (交集选择器) 格式: 标记选择器+ 类名/ID名称 { 属性:值;} 实际情况用 ...
- Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- day-02（css,js）
本文档并非个人所写,只是便于参考:回顾: html: 作用:展示 文件标签: <html> <head> <title></title> </he ...
- 超全面的JavaWeb笔记day02<CSS&JavaScript>
1.CSS的简介 2.CSS概述和与HTML的结合方式(四种)(*******) 3.CSS的基本选择器(******) 4.CSS的扩展选择器(了解) 5.CSS的盒子模型(了解) 6.CSS的布局 ...
- Day02 html回顾和CSS介绍
昨天内容回顾 1.html的操作思想 ** 使用标签把要操作的数据包起来,通过修改标签的属性值来实现标签内数据样式的变化 *** <font size=& ...
- 2021年3月-第02阶段-前端基础-HTML+CSS阶段-Day02
HTML5 第二天 一.rotate 2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转 使用步骤: 给元素添加转换属性 transform 属性值为 rotate(角度) 如 transfor ...
- 《Professional JavaScript for Web Developers》day02
<Professional JavaScript for Web Developers>day02 1.在HTML中使用JavaScript 1.1 <script>元素 HT ...
- css给html添加效果
<!doctype html> <html> <head> <title>EasyMall注册界面</title> <meta htt ...
随机推荐
- 粗谈CGI
先看看 维基百科上面关于 CGI的介绍http://zh.wikipedia.org/wiki/%E9%80%9A%E7%94%A8%E7%BD%91%E5%85%B3%E6%8E%A5%E5%8F% ...
- 【Java】String,StringBuffer与StringBuilder的区别??
String 字符串常量StringBuffer 字符串变量(线程安全)StringBuilder 字符串变量(非线程安全) 简要的说, String 类型和 StringBuffer 类型的主要性能 ...
- JavaScript API
HTML5 DOM, BOM, XMLHttpRequest, NodeJS, Framework Framework---------------> jQuery zepto Undersco ...
- java design
http://www.austintek.com/mvc/ http://msdn.microsoft.com/zh-cn/magazine/cc163419.aspx http://www.croc ...
- 【HDOJ】4737 A Bit Fun
水题.不过题目很有趣儿. #include <cstdio> #define MAXN 100005 int a[MAXN]; int main() { int t, n, m; int ...
- 2013年6月19日星期三java中函数地址值传递
今天代码审核时确认了一个问题,理解了java中string和stringbuffer赋值问题,看到一个帖子很好,摘录如下: 理解这两个例子需要分清实参和形参的区别,引用和对象的区别 第一个例子的内部执 ...
- 杂题 UVAoj 10000 Longest Paths
Longest Paths It is a well known fact that some people do not have their social abilities complet ...
- Ubuntu下安装Skyeye
ubuntu12下安装skyeye1.3.2 1.首先安装skyeye的依赖包,比如gtk的依赖,一般Ubuntu 都默认安装了,稳妥起见,运行下面的代码: sudo apt-get install ...
- 如何解决升级WIN服务的时候，不暴力停止服务 达到升级的目的
同一个WIN服务,分别部署在A.B两台服务器上,前面使用netscaler负载均衡 ,A和B被请求频繁,几乎时时刻刻都被请求 .PS:发布WIN服务的正常流程是,停止WIN服务->发布WIN ...
- RAII(Resource Acquisition Is Initialization)资源获得式初始化
当在编写代码中用到异常,非常重要的一点是:“如果异常发生,程序占用的资源都被正确地清理了吗?” 大多数情况下不用担心,但是在构造函数里有一个特殊的问题:如果一个对象的构造函数在执行过程中抛出异常,那么 ...