本节介绍用css和html组合起来写的页面。(代码可以直接运行)
(1)仿旧版腾讯微博注册页面:(文件夹地址:http://files.cnblogs.com/files/MenAngel/text01.zip)
<!DOCTYPE html> <html> <title>示例7.1</title> <style> body{ background-color:#73CFF1; background-position: -640px 0; background-image:url(http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_wrapbg_v0.0.1.jpg); background-repeat:no-repeat; margin-top:0px; } div.div1{ width:800px; height:90px; border:1px; margin:0px auto; } #img1{ margin-top: 20px; margin-left: 0px; } div.div2{ width:800px; height:80px; background-image: url(http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_2%E7%BA%A7%E8%83%8C%E6%99%AF.png); border:1px; margin:auto; } div.div3 { width: 800px; height: 600px; background-color: #ffffff; margin: auto; } div.div31{ width:798px; background-color: #ffffff; } </style> </head> <body> <!--腾讯微博标题图片，占一行，一个div，层级1--> <div class="div1"> <img id="img1" src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_%E8%85%BE%E8%AE%AF%E5%BE%AE%E5%8D%9A.jpg"/> </div> <div class="div2"> <div style="border: 1px solid;border-color:#ffffff; "> <pre style="font-size:22px;color:#1E85AE; margin-left:50px;">立即注册腾讯微博</pre> <pre style="font-size: 12px;color:#1E85AE; margin-left:50px;margin-top:-20px;">您可以通过以下任意一种方式获得微博账号</pre> </div> </div> <div class="div3"> <div class="div31"style="border:1px solid;border-color: #ffffff;"> <div style="height:60px;margin-left:0px;border:1px solid;border-color:#ffffff;margin-top: 20px;"> <div style="float:left;margin-left:0px;50px border:1px solid;border-color:#ffffff;margin-left:50px;"> <image src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_qq%E5%9B%BE%E6%A0%87.png"></image> </div> <div style="border: 1px solid;border-color:#ffffff;float:left;border:1px solid;border-color:#ffffff;margin-left:30px; "> <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 style="margin-top:5px;798px;height:225px;border:1px solid;border-color:#ffffff;"> <div style="510px;height:200px;background-color:#FFFDDF;border:1px solid;border-color:#ffffff;margin:0px auto; "> <form action="" method="post"> <br/> <span style="font-size:14px;margin-left:10px;">QQ帐号： <input style="margin-bottom: 10px;" type="text" size="25";name="用户名" value=""/></span><br/> <span style="font-size:14px;margin-left:10px;">QQ密码： <input type="text" size="25"/><span style="color:black;font-size:12px">忘记密码?</span></span> <div style="border:1px solid;border-color:#ffffff;height:100px;margin-top: -15px;"> <h5 style="margin-left:80px;"><input type="checkbox"/>下次自动登录</h5> <h4 style="color:blue;margin-left:80px;" ><input type="button" value="开通微博"/></h4> </div> </form> </div> </div> </div> <hr style="720px;margin:0px,auto,0px;" /> <div class="div32"style="border:1px solid;border-color: #ffffff;background-color: #ffffff"> <div style="height:60px;margin-left:0px;border:1px solid;border-color:#ffffff;margin-top: 20px;"> <div style="float:left;margin-left:0px;50px border:1px solid;border-color:#ffffff;margin-left:50px;"> <image src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_regBg%E5%9B%BE%E5%83%8F.png"></image> </div> <div style="border: 1px solid;border-color:#ffffff;float:left;border:1px solid;border-color:#ffffff;margin-left:30px; "> <pre style="font-size:13px;color:black;"><b>邮箱注册</b></pre> <pre style="font-size: 11px;color:black;margin-top:-10px;">通过邮箱注册微博成功后，你的微博帐号将会自动绑定一个QQ号码，你可以使用这个QQ号码享受腾讯的其他服务。</pre> </div> </div> <div style="560px;height:600px;margin:0px auto;border:1px solid;border-color: #ffffff;background-color:#ffffff"> <form style="method:post;"> <ss style="font-size: 12px;"> 电子邮箱： </ss><input type="text"size="30"/><br/><br/> <ss style="font-size: 12px;"> 微博账号： </ss><input type="text"size="30"/><br/> <ss style="margin-left:88px;font-size:12px;">微博地址：http://t.qq.com/</ss><br/> <ss style="font-size: 12px;margin-left:40px;">姓名： </ss><input type="text"size="30"/><br/><br/> <ss style="font-size: 12px;margin-left:40px;">密码： </ss><input type="text"size="30"/><br/></br> <ss style="font-size: 12px;margin-left:16px;">确认密码： </ss><input type="text"size="30"/><br/><br/> <ss style="font-size: 12px;margin-left:40px;">生日： </ss><select> <option>阳历</option> <option>阴历</option> </select> <select> <option>- </option> <option>2015</option> <option>2014</option> <option>2013</option> <option>2012</option> <option>2011</option> <option>2010</option> <option>2009</option> <option>2008</option> <option>2007</option> <option>2006</option> <option>2005</option> <option>2004</option> </select> <select><option>-</option> </select> <select><option>-</option> </select></br><br/> <ss style="font-size: 12px;margin-left:40px;">性别： </ss><input type="radio"/>男<input type="radio"/>女<br/><br/> <ss style="font-size: 12px;margin-left:28px;">出生地： <select> <option>中国</option> <option>美国</option> <option>日本</option> <option>加拿大</option> </select><select> <option>安徽</option> <option>贵州</option> <option>浙江</option> <option>河北</option> </select><select> <option>贵阳</option> <option>合肥</option> <option>石家庄</option> <option>杭州</option> </select><br/><br/> <ss style="font-size: 12px;margin-left:28px;">验证码： </ss><input type="text"size="30"/><br/></ss> <h4 style="color:blue;margin-left:80px;" ><input type="button" value="确认并同意以下条款"/></h4> <ss style="font-size: 12px;margin-left:78px;"><input type="checkbox"/>我接受</ss><ss style="color:blue;font-size: 12px;">腾讯微博服务协议QQ号码规则</ss> </form> </div> <hr style="720px;margin:0px,auto,0px;" /> </div> <div class="div33"style="border:1px solid;border-color:#ffffff;height:200px;margin:0px auto;background-color: #ffffff;"> <div style="height:50px;margin-left:0px;border:1px solid;border-color:#ffffff;margin-top: 20px;"> <div style="float:left;margin-left:0px;50px border:1px solid;border-color:#ffffff;margin-left:50px;"> <image src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_regBg1.png"></image> </div> <div style="border: 1px solid;border-color:#ffffff;height:50px;float:left;border:1px solid;border-color:#ffffff;margin-left:30px; "> <pre style="font-size:13px;color:black;"><b>手机号注册</b></pre> <pre style="font-size: 11px;color:black;margin-top:-10px;">编辑短信，发送6-16位登录密码至10690700678(仅收取普通短信费)，即可开通微博。</pre> </div> <div style="border: 1px solid;border-color:#ffffff;height:50px;float:left;border:1px solid;border-color:#ffffff;margin-left:121px; "> <pre style="font-size:11px;color:black;">密码区分大小写，不能是9位以下的纯数字，不能包含空格。</pre> <pre style="font-size: 11px;color:black;margin-top:0px;">收到注册短信，直接登录<ss style="color:blue;font-size: 12px;">t.qq.com</ss></pre> </div> </div> </div> </div> </body> </html>
(2)仿慕课网官方介绍页面:(http://files.cnblogs.com/files/MenAngel/text02.zip)
<!DOCTYPE html> <html> <head> <title>示例7.2</title> <style> body{ margin-top: 0px; margin-left: 0px; margin-right: 0px; width:1350px; height:4100px; } #div1{ height:59px; background-color: black; width:1360px; } #div1 div{ float:left; width:80px; height:59px background-color: black; margin-top: 0px; } a{ display: inline-block ; width:80px; height:59px; text-align: center; color:white; line-height: 59px; } a:hover{ cursor: pointer; } #div1 div :hover{ color:yellow; background-color:#625D5D ; } #div2{ height:405px; width:1360px; background-image: url("http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_%E5%A4%8D%E5%90%8801.png"); background-size: 1360px,405px; width:1360px; } #div3{ height:690px; border-color:white; width:1360px; } #div31{ height:205px; width:1350px; margin-top: 50px; } #div32{ height:330px; } #div31 div{ float:left; } #div311{ margin-left: 170px; } #div312{ margin-left: 225px; } #div313{ margin-left: 245px; } #div321{ float:right; margin-right: 80px; } #div322{ border:solid; border-color: white; margin-left:200px; width:400px; } #div323{ border:solid; border-color: white; margin-left:100px; width:600px } #div4{ background-color: #EEF1F2; border:solid; border-color: white; height:420px; width:1360px; } #div41{ positin:absolute; } #div42{ float:left; margin-left: 100px; background-image: url("http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_03-calendar.png"); background-repeat:no-repeat; } #div5{ width:1000px; height:640px; border:solid; border-color: white; margin:0 auto; } #div6{ background-image:url("http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_der_bg.png"); height:660px; background-repeat: no-repeat; background-position: 155px 40px; border:solid; border-color: white; width:1360px; } </style> <script> function it4(){ var var1=document.getElementById('div.ul2'); var1.style.display='block'; } function it5(){ var var1=document.getElementById('div.ul2'); var1.style.display='none'; } </script> </head> <body> <!--导航栏--> <div id="div1" > <div id="div11"style="90px;"onmouseover="document.getElementById('div.ul1').style.display='block'; "onmouseout="document.getElementById ('div.ul1').style.display='none';" > <a>首页</a> </div> <div id="div.ul1" style="position: absolute;top:40px; left:-15px;display:none;"> <ul style="list-style:none; "> <li>新建</li> <li>保存</li> <li>退出</li> </ul> </div> <div id="div12" onmouseover="it4()" onmouseout="it5()"> <a><span>.NET</span></a> </div> <div id="div.ul2" style="position:absolute;top:40px; left:70px;display:none"> <ul style="list-style:none; "> <li>新建</li> <li>保存</li> <li>退出</li> </ul> </div> <div id="div13"> <a><span>课程体系</span></a> </div> <div id="div14" style="float:right;130px;"> <a style="130px">天辰软件培训课堂</a> </div> </div> <!--导航栏结束--> <!--复合栏开始--> <div id="div2"> </div> <!--复合栏结束--> <!--4复合图片div--> <div id="div3"> <div id="div31"> <div id="div311"> <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_%E4%B8%93%E6%B3%A8IT.png" id="image311" /> </div> <div id="div312"> <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_%E4%BC%81%E4%B8%9A%E7%BA%A7%E9%A1%B9%E7%9B%AE.png" id="image312" /> </div> <div id="div313"> <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_%E7%BA%BF%E4%B8%8A%E7%BA%BF%E4%B8%8B.png" id="image313" /> </div> </div> <div id="div32"> <div id="div321"> <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_02-computer1.png" id="image321" /> </div> <div style="height:150px"> </div> <div id="div322"> <span style="font-size: 40px;color:#444444; ">实时交互的在线编程</span> </div> <div id="div323"> <br/> <span style="font-size: 20px;color:#9B9B9B; ">无需配置任何编程环境，直接就能在线学习编程，省时省力省心</span> </div> </div> </div> <!--3复合div的结束--> <!---4.2个复合div的开始--> <div id="div4"> <div id="div42" > <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_03-rockets.png"/> </div> <div id="div43" style="float:right;"> <div id="div431"> <div style="height:150px"> </div> <span style="font-size: 40px;color:#444444;margin-right: 150px; "> 循序渐进的学习计划</span> </div> <div id="div432"> <br/> <span style="font-size: 20px;color:#9B9B9B;margin-right:142px;">专治各种学习编程迷茫症。有目标有路径，一切尽在掌握中</span> </div> <div id="div41" style=" position:absolute; left:100px; top:1150px;"> <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_03-smoke.png"/> </div> </div> </div> <!---4.2个复合div的结束--> <!--5世界著名的企业都在用--> <div id="div5"> <div id="div51"> <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_fk.png" style="float:left"/><h1 style="font-size:43px">.NET世界著名的企业都 在用</br></h1> </div> <div id="div52"> <pre> 全球著名的戴尔公司，伦敦股票交易市场，以及加拿大著名的BMO Financial Group，Manulife Financial Group ,RBC Financial,Scotia Bank 等公司或企业的网站和系统都是全面使用.NET的技术开发的。</pre> </div> <div id="div53"> <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_daier.jpg"/> </div> </div> <!--5的结束--> <!--少的一个--> <div style="background-color:#EFEFEF; 1360px; height:400px;"> <div style=" margin-left:170px;"> <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_fk.png" style="float:left"/><h1 style="font-size:43px">.NET诞生于全球最大的软件 企业——微软</br></h1> </div> <div style="margin-left:170px; float:left;"> <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_sm_l.jpg"/> </div> <div style="margin-left:40px height:700px;500px;float:left;;"> <spanner>Microsoft .NET是微软公司提出的新一代软件开发模型。.NET主<br/>要包括Visual Studio .net开发工具，.NET平台以及.NET服务器，<br/>其核心是Web Service。<br/> <br/><br/><br/><br/> Microsoft将.NET运用于其下的所有产品。如今ms office已于<br/>.NET紧密捆绑，Microsoft的所有王牌系统均已内置了.NET<br/>Framework。 </spanner> </div> <div style="margin-left:40px height:200px;margin-top:-30px;"> <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_fk_1.jpg"/> </div> . </div> <!--6.net平台的多重应用--> <div id="div6"> <div id="div61" style="margin-left: 170px"> <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_fk.png" style="float:left"/><h1 style="font-size:43px">.NET平台开发的多重魅力 </br></h1> </div> <div style="180px;margin-top: 130px;margin-left: 187px;float:left"> <pre><h3 style="color:yellow">移动数字设备程序</h3><h5>为智能手机、PDA、便携式 游戏机等开发的应用程序。</h5></pre> </div> <div style="176px;margin-top: 170px;margin-left: 44px;float:left"> <pre><h3 style="color:yellow">Web程序 <ss style="font-size:16px">webservice应用程序</ss></webservice应用程序></h3><h5>利用ASP.NTE技术开发的动 态网站，用户可以使用IE浏 览器进行访问，是B/S模式的 应用程序。基于XML Web Services技术开发的跨 平台、跨系统的分布式系统</h5></pre> </div> <div style="176px;margin-top: 200px;margin-left: 41px;float:left"> <pre><h3 style="color:yellow">Windows程序</h3><h5>多种程序运行在客户机上，常 有一到多个Form元素，是一 种典型的C/S模式应用。</h5></pre> </div> <div style="176px;margin-top: 230px;margin-left: 45px;float:left "> <pre><h3 style="color:yellow">局域网应用程序</h3><h5>局域网中的分布式计算机之 间需要互相通过 .NET Remoting(.NET远程) 等技术 进行通信。</h5></pre> </div> </div> <!--6的结束--> <!--7一个图片--> <div id="div7" style="height:400px;background-color:#EEF1F2;"> <img style="margin-left: 170px;" src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_3d.png" /> </div> <div id="div8" style="height:450px;background-color:blue;"> <img style="margin-top: 100px;margin-left: 140px;float:left;" src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_04-text.png" /> <img style="margin-left: 170px;" src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_04-hand.png" /> </div> <!--8表格开始--> <div id="div9" style="background-color:#EEF1F2;height:100px;"> <div id="div91" style="margin-left: 170px"> <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_fk.png" style="float:left"/><h1 style="font-size:43px">天辰.NET最科学的课程体系 </br></h1> </div> </div> <!--8的结束--> </body> </html>
(3)图层蒙版:(http://files.cnblogs.com/files/MenAngel/text03.zip)
<!DOCTYPE html> <html lang="en"> <head> <title>示例7.3</title> <style> *{ margin:0px; } .main{ width:400px; height:250px; position:relative; background-color:red; dispaly:inline-block; float:left; margin-left:4px; } .layer1{ width:100%; height:100%; position:absolute; z-index:1; } .layer1 img{ width:inherit; height:inherit; } .layer2{ width:100%; height: 50%; background-color: blue; opacity: 0.1; position:absolute; margin-top:125px; z-index:2; } .layer3{ width:100%; height:50%; position:absolute; opacity: 0.95; margin-top:125px; z-index:3; } .layer2, .layer3{ display: none; } .main:hover .layer3, .main:hover .layer2 { cursor: hand; cursor: pointer; display:block; } p{ font-family:楷体; font-weight:bolder; } </style> </head> <body> <div class="main"> <div class="layer1"> <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/859833/o_beauty01.jpg"/> </div> <div class="layer2"> </div> <div class="layer3"> <div style="40%;height:100%;display:inline-block;float:left"> <img style="100%;height:100%;" src="http://images.cnblogs.com/cnblogs_com/MenAngel/859833/o_person.png" /> </div> <div style="50%;height:100%;display:inline-block;float:right;"> <div> <br/> <p style="color:green;font-size:20px;word-wrap:break-word;"> 一代倾城逐浪花,<br/> 吴宫空忆儿家。 <br/> 效颦莫笑东邻女，<br/> 头白溪边尚浣纱。 </p> </div> </div> </div> </div> <div class="main"> <div class="layer1"> <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/859833/o_beauty02.jpg"/> </div> <div class="layer2"> </div> <div class="layer3"> <div style="40%;height:100%;display:inline-block;float:left"> <img style="100%;height:100%;" src="http://images.cnblogs.com/cnblogs_com/MenAngel/859833/o_person.png" /> </div> <div style="50%;height:100%;display:inline-block;float:right;"> <div> <br/> <p style="color:blue;font-size:20px;word-wrap:break-word;"> 聘聘袅袅十三余,<br/> 豆蔻梢头二月初.<br/> 春风十里扬州路,<br/> 卷上珠帘总不如 </p> </div> </div> </div> </div> <div class="main"> <div class="layer1"> <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/859833/o_beauty03.jpg"/> </div> <div class="layer2"> </div> <div class="layer3"> <div style="40%;height:100%;display:inline-block;float:left"> <img style="100%;height:100%;" src="http://images.cnblogs.com/cnblogs_com/MenAngel/859833/o_person.png" /> </div> <div style="60%;height:100%;display:inline-block;float:right;"> <div> <br/> <p style="color:red;font-size:18px;word-wrap:break-word;"> 有女妖且丽，裴回湘水湄。<br/> 水湄兰杜芳，采之将寄谁。<br/> 瓠犀发皓齿，双蛾颦翠眉。<br/> 红脸如开莲，素肤若凝脂。 </p> </div> </div> </div> </div> </body> </html>
