从本节开始介绍css配合html可以达到的一些效果。
(1)导航栏:
<html> <head> <title>示例5.1</title> </head> <style> #nav_div{ height:60px; background-color:black; } a{ display:inline-block; /*设为inline-block是为了让同类标签在同一行显示*/ color:white; line-height:60px; /*设置行高*/ width:100px; text-align:center; /*让文本居中显示*/ float:left; /*设置为左浮动，仅对内联元素有效*/ } #nav_div a:hover{ /*当鼠标滑动到a标签上时*/ cusor:pointer; font-size:20px; background-color:#625D5D; /*背景颜色*/ color:#FFF30E; /*字体颜色*/ } </style> <body style="margin:0px;"> <div id="nav_div"> <a href="#">首页</href> <a href="#">公司简介</href> <!--为什么界面中这个只能链接不靠右显示--> <a style="float:right;margin-right:0px;" href="#">智能链接</a> </div> <body> </html>
(2)行级元素div的块级用法:
<!DOCTYPE html> <html> <head> <title>示例5.2</title> <style> #padding_div{ dispaly:inline-block; width:200px; height:150px; background:black; padding-top:50px; float:left; } #padding_div div{ width:100px; height:100px; background:green; } #border_div{ dispaly:inline-block; width: 195px; height: 195px; background: red; margin-left:30px; border-style:solid; border-left-width:20px; float:left; } </style> </head> <body> <div> <!--仅仅当两个div都设为内联时，他们的排列才遵守同一规则--> <div id="padding_div"> <div></div> </div> <div id="border_div"> </div> </div> </body> </html>
(3)div的overflow属性:
<!DOCTYPE html> <html> <head> <title>示例5.3</title> <style> .over_div{ display:inline-block; width:150px; height:200px; background-color:grey; color:yellow; } #over01{ overflow:visible; } #over02{ overflow:hidden; } #over03{ overflow:scroll; } #over04{ overflow:auto; } </style> </head> <body> <div> <div class="over_div" id="over01"> 默认值。内容不会被修剪，会呈现在元素框之外。 overflow属性规定当内容溢出元素框时发生的事情。这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使 元素框中可以放下所有内容也会出现滚动条。 </div> <div class="over_div" id="over02"> 内容会被修剪，并且其余内容是不可见的。 overflow 属性规定当内容溢出元素框时发生的事情。这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使 元素框中可以放下所有内容也会出现滚动条。 </div> <div class="over_div" id="over03"> 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 overflow 属性规定当内容溢出元素框时发生的事情。这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使 元素框中可以放下所有内容也会出现滚动条。 </div> <div class="over_div" id="over04"> 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 overflow 属性规定当内容溢出元素框时发生的事情。这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使 元素框中可以放下所有内容也会出现滚动条。 </div> </body> </html>
(4)表单和div的混合使用:(仿照腾讯微博注册登录页面)
<!DOCTYPE html> <html> <head> <title>示例5.4</title> <style> body{ background-color:#73CFF1;/*蓝色色调*/ margin-top:0px; } #main_div { width: 800px; height: 600px; background-color: #ffffff;/*白色*/ margin: auto;/*默认居中*/ } div.block_div{ width:798px; background-color: #ffffff; border:1px solid; border-color: #ffffff; } #div_block_01{ height:60px; margin-left:20px; border:1px solid; border-color:#ffffff; margin-top: 20px; } #img_div{ float:left; margin-left:20px; margin-top:10px; width:50px; border:1px solid; border-color:#ffffff; margin-left:50px; } #text_div{ border: 1px solid; border-color:#ffffff; float:left; border:1px solid; border-color:#ffffff; margin-left:20px; } #div_block_02{ margin-top:5px; width:798px; height:225px; border:1px solid; border-color:#ffffff;" } #form_div{ width:510px; height:200px; background-color:#FFFDDF; border:1px solid; border-color:#ffffff; margin:0px auto; } span{ font-size:15px; margin-left:10px; } </style> </head> <body> <div id="main_div"> <div class="block_div"> <div id="div_block_01"> <div id="img_div"> <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_tencent_QQ01.png"></img> </div> <div id="text_div"> <pre style="font-size:13px;color:black;"><b>用QQ号码注册</b></pre> <pre style="font-size: 11px;color:black;margin-top:-10px;">用QQ号码开通可以方便你在微博上找到QQ好友，腾讯微博承诺，绝不会泄漏您的QQ号码。</pre> </div> </div> <div id="div_block_02"> <div id="form_div"> <form action="" method="post"> <br/> <span>QQ帐号： <input style="margin-bottom: 10px;" type="text" size="25";name="用户名" value=""/></span><br/> <span>QQ密码： <input type="text" size="25"/><span style="color:blue;font-size:10px">忘记密码?</span></span> <div style="border:1px solid;border-color:#ffffff;height:100px;margin-top: -15px;"><br/> <p><b style="margin-left:80px;"><input type="checkbox"/>下次自动登录</b></p> <p><b style="color:blue;margin-left:80px;" ><input type="button" value="开通微博"/></b></p> </div> </form> </div> </div> </div> <div> </body> <html>
(5)设置文本属性:
<!DOCTYPE html> <html> <head> <title></title> <style> .p1 { word-spacing: 15px; /*单词间距*/ Letter-spacing:5px; /*字母间距*/ text-indent:10px; /*首行的文本缩进*/ line-height:30px; /*行高*/ } .p2 { Text-align:center; /*设置文本居中*/ } </style> </head> <body> <p class="p1">CSS是Csssascading Style Sheet 这个几个英文单词的缩写,翻译成中文是“层叠样式表”的意思。CSS能让网页制作者有效的定制、改善网页的效果。CSS是对HTML的补充，网页设计师曾经为无法很好的控制网页的显示效果而倍感苦恼，CSS的出现解决了这个问题。</p> <p class="p2">帝子降兮北渚，目眇眇兮愁予。洞庭波兮木叶下...</p> </body> </html>
