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 ...
随机推荐
- C# 日期格式精确到毫秒 【转】
有时候我们要对时间进行转换,达到不同的显示效果 默认格式为:2009-6-24 14:33:34 如果要换成成200906,06-2009,2009-6-24或更多的该怎么办呢 我们要用到:DateT ...
- hdu 5147 Sequence II
http://acm.hdu.edu.cn/showproblem.php?pid=5147 题意:问有多少个这样的四元组(a,b,c,d),满足条件是 1<=a<b<c<d; ...
- java的"=="与"equals"
equals 方法是 java.lang.Object 类的方法. 有两种用法说明: (1)对于字符串变量来说,使用“==”和“equals()”方法比较字符串时,其比较方法不同. “==”比较两个变 ...
- nginx 配置多个主机
<pre name="code" class="html"> server { listen 8001; server_name localhost ...
- France \'98（概率）
题目描述 Today the first round of the Soccer World Championship in France is coming to an end. 16 countr ...
- Android Weekly Notes Issue #239
Android Weekly Issue #239 January 8th, 2017 Android Weekly Issue #239 本期内容包括: Android Things开发; Andr ...
- （转载）URL与URI的区别
(转载)http://blog.csdn.net/eagle51998/article/details/372052 1 URL(Uniform Resoure Locator:统一资源定位器)是W ...
- 图论（二分图最大权独立点集）：COGS 2051. 王者之剑
2051. 王者之剑 ★★★☆ 输入文件:Excalibur.in 输出文件:Excalibur.out 简单对比 时间限制:1 s 内存限制:256 MB [题目描述] 这是在阿尔托 ...
- 数据结构(并查集)：COGS 260. [NOI2002] 银河英雄传说
260. [NOI2002] 银河英雄传说 ★★☆ 输入文件:galaxy.in 输出文件:galaxy.out 简单对比时间限制:5 s 内存限制:128 MB [问题描述] 公元五 ...
- 搜索(三分)：HDU 3400 Line belt
Line belt Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total S ...