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 ...
随机推荐
- PHP与MYSQL配合完成IP的存取
如何存储IP 程序设计要在功能实现的基础上最大限度的优化性能.而数据库设计是程序设计中不可忽略的重要部分,巧存IP地址可以一定程度提升性能. 利用函数算法处理 MySQL没有直接提供IP类型字段,但有 ...
- 【译】UI设计基础(UI Design Basics)--iOS应用解析(iOS App Anatomy)(三)
2.1 iOS应用解析(iOS App Anatomy) 几乎所有的iOS应用都会用到UIKit框架中的组件.了解这些基础组件的名称,角色,功能可以帮你在应用界面设计时做出更好的决策. UIKit提 ...
- 工作总结：检查字符串合法性(C++)
BOOL CLiftCtrlModbusConfigDlg::CheckValid(const CString &str) { ASSERT(str.GetLength() > ); ] ...
- 模拟键盘发送文字（使用SendInput函数）
嗯...老生常谈的话题, 不过系统的总结了一下, 找了个相对简单的实现方式, 可以方便的发送任何文字 参考另一片文章: http://www.cnblogs.com/-clq/archive/2011 ...
- MFC重绘函数：InvalidateRect(), Invalidate()和UpdateWindow()
1. 重绘消息 当需要更新或者重绘窗口时,一般系统会发出两个消息WM_PAINT(通知客户区有变化)和WM_NCPAINT(通知非客户区有变化) WM_NCPAINT系统会自己搞定 WM_PAINT消 ...
- WPF之插件开发
一:解决方案管理器截图 效果图: 二:简单功能说明 IMsg定义了一个接口,MYPlugin1实现接口功能,”插件式开发“实现程序运行时再调用非本身引用的dll文件,调用该dll的方法实现功能 三:I ...
- Invert Binary Tree——LeetCode
Invert a binary tree. 4 / \ 2 7 / \ / \ 1 3 6 9 to 4 / \ 7 2 / \ / \ 9 6 3 1 Trivia:This problem was ...
- bzoj 1089 [SCOI2003]严格n元树（DP+高精度）
1089: [SCOI2003]严格n元树 Time Limit: 1 Sec Memory Limit: 162 MBSubmit: 1250 Solved: 621[Submit][Statu ...
- 《A First Course in Probability》-chaper6-随机变量的联合分布-独立性
在探讨联合分布的时候,多个随机变量之间可以是互相独立的.那么利用独立性这个性质我们就能够找到一些那些非独立随机变量没有的求解概率的方法. 对于离散型随机变量的独立联合分布: 离散型随机变量X.Y独立, ...
- POJ 3187 穷举
题意:已知有N个数分别为1-N,如下图为4个数.相邻两两相加直至只剩下一个数,下图的结果就是16. 3 1 2 4 4 3 6 7 9 16 现在反过来看,告诉你数的个数N和最终结果,问这 ...