1.css引入
直接在块里定义style,如<div style="color:red;"></div>;仅影响这一个块儿。 在head里面引入,会影响整个html,如: <style> div { color:red; } </style> 在head里引入外部css文件,只要引入了就作用于html, <link rel="stylesheet" href="css1.css" /> css1.css里的内容: div { color:red; }
管的范围越小优先级越高。
2.css选择器
2.1 标签选择器
在head里定义一个 <style> div { color:red; } </style> ,这个是把当前html的所有div标签都使用该样式。
2.2 id选择器
<style> #i1 { color:red; } </style> 将id="i1"的标签使用该样式
2.3 类选择器
<style> .c1 { color:red; } </style> 将class="c1"的标签使用该样式
2.4 层级选择器
<style> .c2 div p .c1 { color:red; } </style> 将class="c2"的标签下面的div标签下面的p标签下面的class="c1"的标签使用该样式
2.5 多类选择器
<style> .c3 .c4 .c5 { color:red; } </style> 将class="c3、c4、c5"的标签应用该样式
2.6 属性选择器
<head> <style> .c1[xing="zhang"]{ color:red; } </style> </head> <body> <div> <div class="c1" xing="zhang">1</div> <div class="c1">1</div> <div class="c1" xing="li">1</div> <div class="c1" xing="zhang">1</div> </div> </body>
3.css基本样式
<head> <title>test2</title> <!--link rel="stylesheet" href="css1.css" /--> <style> .c1{ # 颜色可以用编码或者数字或者字母形式。 background-color:red; color:#FFB6C1; #background-color:rgb(25,180,10); font-size:55px; # 高度只能指定像素;宽度可以指定像素或者百分比。 height:100px 100px; # 必须有宽度和高度,才能显示图片内容;默认会用图片将指定区域填满,使用了no-repeat参数后,就只显示一张图片。 background-image:url('image/1.gif'); background-repeat:no-repeat; } .img{ height:100px; 100px; background-image:url('image/1.gif'); #background-position的作用就是抠图,把一个大图扣的只显示一小块儿图。 background-position:50px -58px; } </style> </head> <body> <div class="c1">张</div> # 百分比是受限于父模块的总宽度的,比如父模块总宽度是500px那子1的宽度是100px,子2的宽度是400px。float的作用是让子1和子2拼接成一行,不然子1和子2会显示为两行,试试效果。 <div style="500px"> <div style="20%;background-color:green;float:left">子1</div> <div style="80%;background-color:yellow;float:left">子2</div> </div> <div class="img"> </div> # 只写一个border就是四周都有框;solid是实心的,dashed是虚线的;必须得有高度,不然就是一条线; # border-top就是只有上面有框;border-left就是只有左边有框。 <div style="border:1px solid red; height:10px"></div> <div style="border:1px dashed red; height:10px"></div> <div style="border-top:5px dashed red;"></div> #display:none ,将标签内容和标签占用的位置都隐藏了 <div style="display:none;background-color:red;">content</div> # 将块级标签转化为内联标签 <div style="display:inline;background-color:red;">content</div> # 将内联标签变成块级标签 <span style="display:clock;background-color:red;">content</span> #将标签的内容隐藏,位置还在页面显示,空白。 <div style="visibility:hidden;background-color:red;">content</div> <br/> # 内联标签是无法用height和width改变高度和宽度的 <span style="background-color:red;height:500px;200px;">span-test</span> <br/> # display:inline-block,使其既具有内联标签的属性(自己的字符占多少位置,样式就占多少位置),又具有块级标签的属性(可以定义高度、宽度等。) <span style="display:inline-block;background-color:red;height:500px;200px;">span-test</span> </body>
cursor:设置鼠标样式,鼠标放到超链接上变成小手,放到文本上变成竖杠等。
4.边距
默认的话,组件与组件之间是没有距离的,一直堆叠和拼接,需要用边距来调整。
画红线的这些就是用边距实现的,不然会紧贴着。
<!DOCTYPE html> <html lang="en"> <head> <title>fazhan</title> </head> <body> <div style="height:70px;border:1px solid red;"> # 内边距,调整自己标签的位置 <div style="padding:30px;height:35px;background-color:green;"> </div> </div> <div style="height:100px;background-color:green;border:1px solid red;"> # 外边距,调整自己与父标签的相对位置 <div style="margin-top:30px;"> <input /> <input /> <input /> </div> </div> </body> </html>
5. 漂浮
# 20%和30%会分为两行显示 <div style="500px;background-color:red;"> <div style="20%;background-color:green">fdsf</div> <div style="30%;background-color:blue">dfdf</div> </div> <br/> <br/> <br/> # 因为使用了float,所以20%和30%会拼接到一行上,而且父标签的样式会消失。 <div style="500px;background-color:red;"> <div style="20%;background-color:green;float:left;">fdsf</div> <div style="30%;background-color:blue;float:left;">dfdf</div> </div> <br/> <br/> <br/> # 使用了clear:both,20%和30%不仅会显示到一行上,而且父标签的样式还在。clear:both要加在所有漂浮标签的后面,这是一种low的方法,但是可以解决问题。 <div style="500px;background-color:red;"> <div style="20%;background-color:green;float:left;">fdsf</div> <div style="30%;background-color:blue;float:left;">dfdf</div> <div style="clear:both;"></div> </div>
6. 位置
<body> <div style="height:5000px;background-color:green"></div> # position:fixed,固定标签在屏幕的固定位置,top、bottom、left、right,用像素来指定位置,如果是负值就会出区域;指定该标签显示在屏幕的固定位置,屏幕滚动,标签也跟着滚动。 <a href="https://www.baidu.com" style="position:fixed;right:100px;bottom:100px;">返回顶部</a> # 将标签固定到一个位置,如果滚动屏幕,标签不跟着屏幕走。 <a href="https://www.baidu.com" style="position:absolute;right:100px;bottom:100px;">绝对返回顶部</a> #这样做不能把gogogo放到边框的右下角,而是放到了屏幕的右下角; <div style="height:300px;300px;border:1px solid red;"> <div style="position:absolute;right:0;bottom:0;">gogogo</div> </div> # 因为第一个div里有position:relative,所以gogogo会放在边框里的右下角;如果在第二个div里也加上position:relative,那gogogo就会放到第二个div的右下角。 <div style="height:300px;300px;border:1px solid red;position:relative"> <div style="height:100px;100px;background-color:black;"> <div style="position:absolute;right:0;bottom:0;color:red">gogogo</div> </div> </div> </body>
7. 将对话框放到屏幕中间、背景透明度、组件优先级
<head> <title>fazhan</title> # 目的:让屏幕中间显示一个可以输入的文本框。 # top:50%;left:50%;使该标签的左上角位于屏幕的正中间位置。 # margin-left:-150px;margin-top:-200px; 如果想让标签框位于屏幕的正中间,需要先让标签的左上角位于屏幕正中间,然后向左移动一半宽的距离,向上移动一半高的距离。 # opacity设置透明度,1是不透明; # z-index,设置组件优先级,优先级高的会覆盖优先级低的组件。 <style> .model{ height:400px; 300px; background-color:green; position:fixed; top:50%; left:50%; margin-left:-150px; margin-top:-200px; z-index:10; } .shadow1{ position:fixed; top:0; left:0; right:0; bottom:0; background-color:black; opacity:0.4; z-index:9; } </style> </head> <body> <input type="botton" value="按钮" /> <div class="shadow1"></div> <div class="model"> <input type="text" /> <input type="text" /> <input type="text" /> <input type="text" /> </div> </body>
8. 网站头设计
8.1
篮框与浏览器上左右没有间距,标题一、二、三在稍微居中的位置展示。
<!DOCTYPE html> <html lang="en"> <head> <title>fazhan</title> <!-- body ,margin:0表示body里的所有组件的边距是0,不然组件的上下左右默认是有一个边距的。--> <style> body{ margin:0; } .pg-header{ height: 44px; background-color: #2459a2; } .w{ 980px; margin:0 auto; } </style> </head> <body> <div class="pg-header"> <div class="w"> <!-- 标题一到三默认是在屏幕的最左端显示,如果想让他们居中显示,可以先建立一个980像素宽的div,然后把 标题一到三加到这个980像素宽的div上,然后让这个980像素宽的div居中,使用margin:0 auto就可以让div居中--> <a>标题一</a> <a>标题二</a> <a>标题三</a> </div> </div> <div class="pg-body"></div> <div class="pg-footer"></div> </body> </html>
8.2
<!DOCTYPE html> <html lang="en"> <head> <title>fazhan</title> <style> <!-- line-height: 44px,将文字置于44px高的居中位置;list-style-type:none,取消列表前面的小黑点;padding:0 10px 0 10px,将本组件移动,位置分别为上、右、下、左;cursor:pointer,使鼠标变成小手; ul li:hover,鼠标移动上去后,显示代码里的效果。 --> body{ margin:0; } .pg-header{ height: 44px; background-color: #2459a2; line-height: 44px; } .w{ 980px; margin:0 auto; } ul{ margin:0; list-style-type:none; } ul li{ float:left; padding:0 10px 0 10px; color: white; cursor:pointer; } ul li:hover{ background-color:green; } </style> </head> <body> <div class="pg-header"> <div class="w"> <ul> <li>菜单一</li> <li>菜单二</li> <li>菜单三</li> </ul> </div> </div> <div class="pg-body"></div> <img src="2.jpg" style="height:500px;100px;"> <div class="pg-footer"></div> </body> </html>
9. 写出加减商品的框
<!DOCTYPE html> <html lang="en"> <head> <!-- 使框里的文本左右方向居中,高低居中需要用line-height:npx; --> <!-- 内联标签不能设置宽高,为了高度居中,需要设置高度,所以将内联标签改为块级标签--> <!-- margin:0、padding:0使组件的内外边框都为0,适合组件堆叠--> <!-- 使用了display:inline-block的组件,默认会增加3px的宽度,所以如果想让组件与组件之间无缝结合的话,需要去掉3px,float:left。--> <!-- img标签默认是有边框的,只不过默认不显示;当把img放到a标签内,chrome和firefox依然会自动将边框去掉了,如果用IE打开,可能就会出现边框,所以为了保险起见,对所有的a标签都要使用style{ border:0;}--> <!-- a标签内的文字默认是蓝色的,点击后变成蓝色的。--> <title>fazhan</title> <style> .inp{ border:0; border-left:1px solid #dddddd; border-right:1px solid #dddddd; height:25px; 20px; margin:0; padding:0; float:left; } .sp{ display:inline-block; text-align:center; margin-left:-3px; float:left; height:25px; 25px; line-height:25px; } </style> </head> <body> <div style="border:1px solid #dddddd;display:inline-block;"> <span class="sp">-</span> <input class="inp" type="text" /> <span class="sp">+</span> </div> </body> </html>
10.网页标题一直置顶
<!DOCTYPE html> <html lang="en"> <head> .pg-header{ 48px; position:fixed; top:0; left:0; right:0; background-color:red; } .pg-body{ height:2000px;
#margin-top,为了防止body的内容被header挡住。 margin-top:48px; } </head> <body> <div class="pg-header">fdsafdsf</div> <div class="pg-body">fdafsdfd</div> </body> </html>
11.文本框的特效
左边有个小头像和小锁子
<!DOCTYPE html> <html lang="en"> <head> <style> .icon-name{ background-image:url('jdxiaotu.png'); background-position:590px 339px; height:16px; 16px; display:inline-block; } </style> </head> <body> <div style="200px;position:relative;"> # padding的部分不能输入了 <input style="180px;padding-right:20px;" /> <span class="icon-name" style="position:absolute;top:2px;right:0;"></span> </div> </body> </html>
12. font awesome
<!DOCTYPE html> <html lang="en"> <head> # 下载了font awesome,解压到一个目录,然后在html的head里引用css样式。 # font-awesome.css与font-awesome-min.css它俩的内容一样,只不过前者将代码分行了,更清晰,后者把代码写成了一行, # 占用字节小。所以开发时选择前者,方便查看,上线时用后者,更轻便。 <link rel="stylesheet" href="plugins/font-awesome-4.6.3/css/font-awesome.css"> </head> <body> # 到http://fontawesome.io/icon找到需要的图标,然后直接将代码添加到html里就行了,如果想改变颜色,可以加 # style="color:red"等。 <i class="fa fa-address-book" aria-hidden="true"></i> </body> </html>
13. 关于伪类的补充
13.1 .c1:hover
13.2 .c2:before
# 在块儿的内容前加上666 .c2:before{ content:'666'; }
13.3 .c2:after
# 在块儿的内容后加上777 .c2:after{ content:'777'; }
13.4 伪类after的主要应用
前面讲到过,如果div使用了float:left使组件漂浮了,则父div的样式都会消失,除非新加一个<div style="clear:both;"></div>。
页面的元素很多,如果每个float:left都对应着一个clear:both的div,那就太费劲了,所以需要定义一个样式类,这个样式类就用到了after,等于是在每个div后面加上一个“clear:both”。
<!DOCTYPE html> <html lang="en"> <head> <title>fazhan</title> <style> .left{ float:left; } .clearfix:after{ content:'.'; visibility:hidden; } </style> </head> <body> <div class="clearfix" style="background-color:red;"> <div class="left">1</div> <div class="left">2</div> <!--div style="clear:both"></div--> </div> </body> </html>
上面的代码实现了既让父div拥有样式,又实现了让子div漂浮,但是如果子div设置了高度,父div不会跟着增高,试试下面代码的效果,
<!DOCTYPE html> <html lang="en"> <head> <title>fazhan</title> <style> .left{ float:left; } .clearfix:after{ content:'.'; visibility:hidden; } </style> </head> <body> <div class="clearfix" style="background-color:red;"> <div class="left" style="height:100px;background-color:green;">1</div> <div class="left">2</div> <!--div style="clear:both"></div--> </div> </body> </html>
页面效果:
,子div的绿色背景凸出来了,父div的高度没有跟着变化。所以需要继续调整代码,往下看,
<!DOCTYPE html> <html lang="en"> <head> <title>fazhan</title> <style> .left{ float:left; } .clearfix:after{ content:'.'; clear:both; visibility:hidden; display:block; height:0; } </style> </head> <body> <div class="clearfix" style="background-color:red;"> <div class="left" style="height:100px;background-color:green;">1</div> <div class="left">2</div> <!--div style="clear:both"></div--> </div> </body> </html>
页面效果:
,如此就达到目的了,这个效果可以作为网站页面的背景,给网站的主页面加一个背景色,然后只要添加组件就撑大背景。注:一般都习惯把这个伪类起名为“clear:fix”。
14. css总结
CSS 存在形式: 直接放到标签里;优先级最高;只作用于此标签。 在head的style里定义;优先级居中;作用于整个html。 css文件导入;优先级最低;作用于所有导入了的html。 同样优先级的样式,后面的样式会覆盖前面的样式;用chrome调试模式查看时,有些样式代码中间划着一个横线,这就是被覆盖了。 最牛的,color:red !important;任谁也覆盖不了的样式,一般用在display:none这类的样式上,需要隐藏的时候,无论如何都能做到隐藏。 选择器: 标签选择器 class选择器 ID选择器 层级选择器 组合选择器 属性选择器 样式: color,width,height 需要注意一点,如果要用width的百分比,一定要在它的上层加一个div,并且给上层div指定一个宽度(居中的话就是margin:0 auto;) 如果不这样做,当浏览器缩小的比内容页还小时,不会出现滚动条,而是把多余的东西显示到屏幕外面去了。正确使用如下例: <div class="main" style="980px;margin:0 auto;"> <div style="20%;float:left;backgroud-color:red;">fdfsdfdfdfdfdasfdsfdsfdasf</divd> <div style="80%;float:left;backgroud-color:green;">fdfsdfdfadsfasfdasf</divd> </div> cursor backgroud-color opacity,透明度,值为1是不透明 position: fixed absolute relative && absolute z-index padding补充: input标签padding出去的部分是不可写的。 伪类: hover before after
15. 使用css的border做出小三角
<html lang="en"> <head> <title>fazhan</title> <style> .clearfix{ display:inline-block; border-top:15px solid red; # transparent是透明色。 border-right:15px solid transparent; border-bottom:15px solid transparent; border-left:15px solid transparent; } </style> </head> <body> <div class="clearfix"> </div> </body> </html>
16. 做出阴影效果
<!DOCTYPE html> <html lang="en"> <head> <title>fazhan</title> <meta charset="UTF-8" /> <style> body{ margin:0; } .clearfix{ display:inline-block; border-top:8px solid gray; border-right:25px solid transparent; border-bottom:8px solid transparent; border-left:25px solid transparent; position:absolute; top:170px; margin-left:-25px; } .main{ background-color:gray; height:2000px; 1200px; margin:0 auto; } .tiaoxing{ background-color:black; height:50px; 1200px; margin-left:-25px; position:absolute; top:120px; } </style> </head> <body> <div class="main"> <div class="tiaoxing"> <span style="color:red;position:absolute;top:20%;left:10%">我的指甲</span> </div> <div class="clearfix"> </div> </div> </body> </html>
17.后台管理布局
不同于网站前端主页面(中间是内容,两边是空白),后台管理界面一般是这种上面一个菜单、左边一个菜单、右边是内容的布局。
后台布局的主要展示如上图,有两种不同的左侧菜单显示,一种是滑动滚轮时上面和左侧菜单跟着移动,一种是滑动滚轮时上面和左侧菜单固定不动。
17.1 滚轮滚动时,上面和左侧的菜单栏也跟着移动
<!DOCTYPE html> <html lang="en"> <head> <title>fazhan</title> <meta charset="UTF-8" /> <style> body{ margin:0; } .pg-header{ height:48px; background-color:yellow; } .pg-body .pg-main-menu{ 200px; position:absolute; top:48px; bottom:0; background-color:red; } .pg-body .pg-main-content{ position:absolute; top:48px; left:210px; right: 0; #没有指定bottom:0,则页面内容占多少,就显示多少,页面没有内容,则显示空白(也没有背景色:绿。) background-color:green; } </style> </head> <body> <div class="pg-header"> </div> <div class="pg-body"> <div class="pg-main-menu"> </div> <div class="pg-main-content"> #页面内容很多,超过了单页高度,所以会自动出现滚动条,滑动滚轮的时候,左侧的菜单也跟着移动,随着滚轮往下走,左侧菜单会消失。 fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br> fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br> fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br> fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br> fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br> fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br> fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br> fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br> fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br> fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br> fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br> fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br> fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br> </div> </div> </body> </html>
17.2 滚轮滚动时,上面和左侧的菜单栏固定不动
<!DOCTYPE html> <html lang="en"> <head> <title>fazhan</title> <meta charset="UTF-8" /> <style> body{ margin:0; } .pg-header{ height:48px; background-color:yellow; } .pg-body .pg-main-menu{ 200px; position:absolute; top:48px; bottom:0; background-color:red; } .pg-body .pg-main-content{ position:absolute; top:48px; left:210px; right: 0; # 对比上面的代码,加了bottom和overflow; # overflow:auto,当页面内容超过单屏时,在右侧出现滚轮,滑动滚轮只会影响当前div,所以上面和左侧的菜单是固定的。 bottom:0; overflow:auto; background-color:green; } </style> </head> <body> <div class="pg-header"> </div> <div class="pg-body"> <div class="pg-main-menu"> </div> <div class="pg-main-content"> fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br> fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br> fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br> fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br> fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br> fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br> fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br> fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br> fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br> fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br> fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br> fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br> fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br> </div> </div> </body> </html>