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 ...
随机推荐
- objective-c 错题
//1, NSString *name = [[NSString alloc]initWithString:@"张三"]; NSLog(@"%d",[name ...
- arm-none-eabi-gcc install
Zephyr除了官方的编译工具,还有第三方工具 arm-none-eabi-gcc . This PPA is an alternative to toolchain released at http ...
- seajs打包部署工具spm的使用总结
相信使用seajs的好处大家都是知道的,接触seajs好像是在半年前,当时还不知道页面阻塞问题,这里不带多余的话了. seajs实现了模块化的开发,一个网站如果分了很多很多模块的话,等开发完成了,发现 ...
- 简化 Django
http://www.oschina.net/translate/simplifying-django 尽管Django的流行和普及, 一些开发者仍然认为她是一个过时的web开发框架, 仅仅适合内容丰 ...
- Truck History
poj1789:http://poj.org/problem?id=1789 题意大概是这样的:用一个7位的string代表一个编号,两个编号之间的distance代表这两个编号之间不同字母的个数.一 ...
- android之apk自动更新解析包失败问题
在apk自动更新(相关问题可以看我的博客http://blog.csdn.net/caicongyang) 从服务器下载完成后,点击notification提示安装时,每次都报解析包失败错误!首先我想 ...
- [LeetCode#110, 112, 113]Balanced Binary Tree, Path Sum, Path Sum II
Problem 1 [Balanced Binary Tree] Given a binary tree, determine if it is height-balanced. For this p ...
- Linux系统下用户行为审计
以下内容在RHEL 6.4下测试通过. 1.编写脚本Command_history.sh,生产历史命令记录文件,内容如下 #!/bin/bash [ -d /usr/lib/.cmdlog ] || ...
- 通过redis-rdb-tools分析redis内存使用量
背景:生产上一台redis服务器,物理内存32G,几个项目都在用,经常不足一月内存就会耗尽,然后开始使用swap,当swap也用尽的时候,系统就宕机.redis配置也优化过几次,但未见成效.因此决定看 ...
- 【模拟】Codeforces 707A Brain's Photos
题目链接: http://codeforces.com/problemset/problem/707/A 题目大意: 给一张N*M的图,只有六种颜色(如下),只含B,W,G的是黑白图,否则是彩色图.问 ...