JavaSe基础XX24——CSS
2014-09-18 21:55
190 查看
*01-CSS(概述&和html结合的方式一二)
*02-CSS(和html结合的方式三四)
*03-CSS(基本选择器&优先级)
*04-CSS(关联选择器&组合选择器)
*05-CSS(伪元素选择器_1)
*06-CSS(伪元素选择器_2)
---------------小结--------------------
*07-CSS(CSS样式的结合应用)
*08-CSS(CSS的盒子模型)
*09-CSS(CSS的布局-漂浮)
----------------------小结---------------------
*10-CSS(CSS的布局-定位)
------------小结-------------
*11-CSS(CSS的布局-图文混排)
、
*12-CSS(CSS的布局-图像签名)
*02-CSS(和html结合的方式三四)
*03-CSS(基本选择器&优先级)
*04-CSS(关联选择器&组合选择器)
*05-CSS(伪元素选择器_1)
*06-CSS(伪元素选择器_2)
---------------小结--------------------
<!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> <!--link rel="stylesheet" href="1.css" type="text/css" /--> <style type="text/css"> /*@import url(1.css); div{ background-color:#09F; color:#FFF; } .haha{ background-color:#FF3; color:#0C0; }*/ /*预定样式,实现动态的加载。 .hehe{ background-color:#C93; color:#00F; }*/ /* #qq{通常ID的取值在页面中是唯一的,因为该属性除了给css使用,还可以被js使用。id通常都是为了去标示页面中一些特定区域使用的。 background-color:#000; color:#FFF; } *//* span b{关联选择器 选择器中的选择器 background-color:#09F; color:#FFF; } */ /*组合选择器*/ /* .haha,div b{对多种选择器进行相同样式定义 background-color:#000; color:#C00; } */ /* 伪元素 超链接的状态。 */ /*未访问*/ a:link{ background-color:#06F; color:#FFF; text-decoration:none; font-size:18px; } /* 鼠标悬停 */ a:hover{ background-color:#FFF; color:#F00; font-size:24px; } /*点击效果*/ a:active{ background-color:#000; color:#FFF; font-size:36px; } /*访问后效果*/ a:visited{ background-color:#FF9; color:#000; text-decoration:line-through; } p:first-letter{ font-size:36px; color:#F00; } div:hover{ background-color:#F00; color:#FFF; } input:focus{ background-color:#09F; } #qq{ float:left; } /* L V H A */ </style> </head> <body> <input type="text" /> <input type="text" /> <hr /> <a href="http://www.sina.com.cn" target="_blank">伪元素选择器演示</a> <hr /> <!-- css和html相结合的第一种方式。 1,每一个html标签中都有一个style样式属性。该属性的值就是css代码。 2,使用style标签的方式。 一般都定义在head标签中 优先级: 标签选择器<类选择器<id选择器<style属性 --> <div id="qq">这是一个div<b>区域</b>1</div> <div class="haha" id="qq">这是一个div区域2</div> <span>span<b>区域</b>1</span> <span class="haha">span区域2</span> <p>这是一个段落1</p> <p class="haha">这是一个段落2</p> </body> </html>
*07-CSS(CSS样式的结合应用)
*08-CSS(CSS的盒子模型)
*09-CSS(CSS的布局-漂浮)
----------------------小结---------------------
<!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"> /* body{ margin:0px; } */ div{ border:#09F solid 1px; height:100px; width:200px;/**/ } #div_1{ /*border-bottom:#F60 2px dashed;*/ background-color:#F90; /*padding:20px 100px 200px 300px;上 右 下 左 margin:0px;*/ float:left; } #div_2{ background-color:#0CF; float:left; } #div_3{ background-color:#3F0;8 clear:left;/**/ } </style> </head> <body> <div id="div_1"> 第一个盒子11第一个盒子11 </div> <div id="div_2"> 第二个盒子22 </div> <div id="div_3"> 第三个盒子33 </div> </body> </html>
*10-CSS(CSS的布局-定位)
------------小结-------------
<!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{ border:#09F solid 1px; height:100px; width:200px;/**/ } #div_0{ background-color:#CCC; height:400px; width:400px; position:relative; top:100px; left:100px; } #div_1{ background-color:#F90; position:relative; top:20px; } #div_2{ background-color:#0CF; width:220px; } #div_3{ background-color:#3F0;8 } </style> </head> <body> <div id="div_0"> <div id="div_1"> 第一个盒子11第一个盒子11 </div> <div id="div_2"> 第二个盒子22 </div> <div id="div_3"> 第三个盒子33 </div> </div> </body> </html>
*11-CSS(CSS的布局-图文混排)
、
<!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"> #imgtext{ border:#06F dashed 1px; width:180px; } #img{ float:right; } #text{ color:#F60; font-family:"华文隶书"; } </style> </head> <body> <div id="imgtext"> <div id="img"> <img src="9.bmp" /> </div> <div id="text"> 这是一个美女,说明文字。 一切尽在不言中。哇 !这是一个美女,说明文字。 一切尽在不言中。哇! 这是一个美女,说明文字。 一切尽在不言中。哇! </div> </div> </body> </html>
*12-CSS(CSS的布局-图像签名)
<!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"> #text{ font-family:"华文隶书"; font-size:24px; position:absolute; top:80px; left:10px; } #imgtext{ border:#F60 dotted 1px; width:500px; position:absolute; top:100px; } </style> </head> <body> <div id="imgtext"> <div id="img"> <img src="1.jpg" height="300" width="500" /> </div> <div id="text"> 花丛中的美女,我的! </div> </div> </body> </html>
相关文章推荐
- JavaSe基础XX03——数组
- JavaSe基础XX05——面向对象
- JavaSe基础XX16——API对象-String
- JavaSe基础XX17——常用对象API-集合框架_3
- JavaSe基础XX17——常用对象API-集合框架_2
- JavaSe基础XX01——函数
- JavaSe基础XX18——IO流_1
- JavaSe基础XX15——线程_3
- JavaSe基础XX15——线程_2
- JavaSe基础XX17——常用对象API-集合框架_5_ 工具类
- JavaSe基础XX06——面向对象
- JavaSe基础XX12——面向对象——[异常_1]
- JavaSe基础XX11——面向对象——[内部类]
- JavaSe基础XX16——Eclipse使用
- JavaSe基础XX15——线程_1
- JavaSe基础XX04——多维数组
- JavaSe基础XX09——面向对象
- JavaSe基础XX13——Object
- JavaSe基础XX16——API对象-基本数据类型对象包装类
- JavaSe基础XX17——常用对象API-集合框架_6_其他对象API