网页练习
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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> * { margin: 0px; padding: 0px; } body { background-image: url(Images/banner.jpg); background-attachment: fixed; min-width: 980px; } .div1 { height: 950px; width: 100%; position: relative; text-align: center; background-repeat: no-repeat; background-size: cover; } #div2 { background-image: url(Images/banner2.jpg); } #div3 { background-image: url(Images/banner3.jpg); } #div4 { background-image: url(Images/banner4.jpg); } .div5 { background-color: #333; width: 100%; height: 478px; position: relative; } .anniu { width: 240px; height: 40px; border: 1px solid #00B8A2; border-radius: 10px; line-height: 30px; color: #FFF; background-color: #00B8A2; cursor: pointer; transition: 0.5s; padding: 10px 60px; } .anniu:hover { opacity: 0.7; } #divtop { height: 60px; width: 100%; background-color: #000; opacity: 0.5; position: fixed; top: 0px; left: 0px; z-index: 99; } #zuodiv { background-image: url(Images/logo-01.png); background-repeat: no-repeat; background-size: contain; height: 60px; background-position: center center; width: 160px; position: fixed; top: 0px; left: 0px; z-index: 99; } #youdiv { width: 800px; height: 60px; position: fixed; top: 0px; right: 40px; line-height: 60px; z-index: 99; } li { float: left; color: #FFF; margin-left: 40px; list-style: none; cursor: pointer; } li:hover { cursor: pointer; color: white; border-bottom: 3px solid #00B8A2; } a { color: #FFF; cursor: pointer; text-decoration: none; } #youzuo { width: 450px; height: 60px; line-height: 60px; position: absolute; } #youyou { width: 350px; height: 60px; position: absolute; top: 0px; right: 0px; } .denganniu { width: 70px; height: 30px; border-radius: 10px; border: 1px solid #00B8A2; top: 15px; position: relative; float: left; margin-left: 10px; line-height: 30px; text-align: center; } #zhu { color: white; background-color: #00B8A2; cursor: pointer; } #deng { color: #00B8A2; transition: 0.5s; cursor: pointer; } #deng:hover { color: white; background-color: #00B8A2; } #sou { width: 150px; height: 30px; border: 1px solid #00B8A2; border-radius: 20px; position: absolute; top: 15px; right: 20px; } .ios { width: 230px; height: 42px; border: 1px solid #999; top: 50px; position: relative; margin-left: 400px; border-radius: 5px; color:#FFF; line-height: 42px; background-image:url(../../HTML%E4%B8%8A%E8%AF%BE%E9%83%A8%E5%88%86/10.24/og1_.png); background-size:20px; background-repeat: no-repeat; background-position:10px; font-weight:bold; } .ios1:hover{ cursor: pointer; background-color: #6d8dab; font-weight: bold; } .ios2:hover{ cursor: pointer; background-color: #6d8dab; font-weight: bold;} .ios:hover{ cursor: pointer; background-color: #6d8dab; font-weight: bold;} .ios1 { width: 230px; height: 42px; border: 1px solid #999; top: 50px; position: absolute; margin-left: 800px; border-radius: 5px; color: #FFF; text-align: center; line-height: 42px;font-weight:bold; } .ios2 { width: 230px; height: 42px; border: 1px solid #999; top: 50px; position: absolute; margin-left: 1200px; border-radius: 5px; color: #FFF; text-align: center; line-height: 42px;font-weight:bold; } .cp { position: relative; width: 150px; height: 160px; left: 380px; top: 140px; } .gs { position: absolute; width: 150px; height: 160px; left: 680px; top: 185px; } .zc { position: absolute; width: 150px; height: 160px; left: 1000px; margin-top: -15px; } .lx { position: absolute; width: 300px; height: 160px; right: 300px; margin-top: -10px; } .di { position: relative; width: 1200px; height: 50px; left: 380px; border-top: 1px solid #03C; top: 200px; } .jiantou{ margin-top:150px; border-radius:50px; } .jiantou:hover{ background-color:#999;} </style> </head> <body> <div id="divtop"> </div> <div id="zuodiv"></div> <div id="youdiv"> <div id="youzuo"> <ul style="z-index:2;"> <li><a href="#" style="color:#00B8A2">首页</a></li> <li><a href="#">下载</a></li> <li><a href="#">动态</a></li> <li><a href="#">社区</a></li> <li><a href="#">智博星</a></li> </ul> </div> <div id="youyou"> <div class="denganniu" id="deng">登陆</div> <div class="denganniu" id="zhu">注册</div> <div id="sou"> <input type="text" placeholder=" 搜索" style="background:none; color:white; font-size:20px; height:28px; width:120px; border:none; position:relative; top:1px;" /> <img src="Images/searchIcon.png" style="position:absolute; top:5px; right:7px;" /> </div> </div> </div> <div class="div1"> <img style="margin-top:300px;" src="Images/01.png" /><br /> <img style="margin-top:20px; opacity:0.7;" src="Images/02.png" /><br /> <br /> <a class="anniu">产品亮点</a><br /> <img class="jiantou" src="../../HTML上课部分/10.24/箭头下.png" /></div> <div class="div1" id="div2"> <img style="margin-top:300px;" src="Images/201.png" /><br /> <img style="margin-top:20px; opacity:0.7;" src="Images/202.png" /><br /> <br /> <a class="anniu">用户故事</a> <br /> <img class="jiantou" src="../../HTML上课部分/10.24/箭头下.png" /> </div> <div class="div1" id="div3"> <img style="margin-top:300px;" src="Images/301.png" /><br /> <img style="margin-top:20px; opacity:0.7;" src="Images/302.png" /><br /> <br /> <a class="anniu">功能列表</a> <br /> <img class="jiantou" src="../../HTML上课部分/10.24/箭头下.png" /></div></div> <div class="div1" id="div4"> <img style="margin-top:300px;" src="Images/401.png" /><br /> <img style="margin-top:20px; opacity:0.7;" src="Images/402.png" /><br /> <br /> <a class="anniu">注册体验</a> <br /> <img class="jiantou" src="../../HTML上课部分/10.24/箭头上.png" /></div></div> <div class="div5"> <div class="ios"> iOS版下载</div> <div class="ios1">Android版下载</div> <div class="ios2">PC版下载</div> <div class="cp"> <table> <tr height="40"> <td style="color:white; font-size:20px;">产品</td> </tr> <tr height="30"> <td>◆产品介绍</td> </tr> <tr height="30"> <td>◆使用手册</td> </tr> <tr height="30"> <td>◆更新日志</td> </tr> <tr height="30"> <td>◆案例展示</td> </tr> </table> </div> <div class="gs"> <table> <tr height="40"> <td style="color:white; font-size:20px;">公司</td> </tr> <tr height="30"> <td>◆关于团队</td> </tr> <tr height="30"> <td>◆招聘专栏</td> </tr> <tr height="30"> <td>◆新闻资讯</td> </tr> <tr height="30"> <td>◆合作加盟</td> </tr> </table> </div> <div class="zc"> <table> <tr height="40"> <td style="color:white; font-size:20px;">支持</td> </tr> <tr height="30"> <td>◆官方博客</td> </tr> <tr height="30"> <td>◆用户社区</td> </tr> <tr height="30"> <td>◆在线模版</td> </tr> <tr height="30"> <td>◆隐私声明</td> </tr> <tr> <td>◆服务条款</td> </tr> </table> </div> <div class="lx"> <table> <tr height="40"> <td style="color:white; font-size:20px;">联系我们</td> </tr> <tr height="30"> <td>地址:中国.山东省淄博市张店区齐鲁电商谷</td> </tr> <tr height="30"> <td>电话:0533-6078222</td> </tr> <tr height="30"> <td>信箱:6078222@163.com</td> </tr> </table> </div> <div class="di"></div> </div> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>Apple(中国)-官方网站</title> <style> * { margin: 0px; padding: 0px; } .a { height: 40px; background-color: #333; z-index: 2; position: relative; opacity:0.5; z-index:99; } .aa { height: 20px; width: 100px; right: 400px; position: absolute; top: 15px } .b { height: 700px; position:relative; width: 100%; background-image:url(../../HTML%E9%83%A8%E5%88%86/1029/Images/event_large.jpg); background-repeat:no-repeat; background-position:center; } .c { height: 200px; position:relative; width:100%; } .cc { height: 200px; position:relative; float: left; width: 25%; margin: 0px } } #a { left: 400px; position: relative; bottom: 9px } .c1 { float: left; position: relative; margin-left:80px;line-height:40px; color:white; z-index:99;} .c1:hover{ color:#666; cursor:pointer;} .a1{ position:fixed;} li { position: relative; height: 20px; color: #535353; } li:hover { text-decoration: underline; } li.biao { position: relative; text-shadow: 0px 0px 1px #4F4F4F; font-size: 12px; color: #000; } li.biao:hover { text-decoration: none; } </style> </head> <body> <div style="border-bottom:1px solid; height:40px; background-color:#666;"> <div class="aa"><font size="-5" color="#999999"> <广告> </font></div> </div> <div class="b"> <div class="a"> <ul style="position:relative; list-style:none; left:350px;"> <li class="c1"><img src="og1.png" width="40"/></li> <li class="c1">Mac</li> <li class="c1">iPad</li> <li class="c1">iPhone</li> <li class="c1">Watch</li> <li class="c1">Music</li> <li class="c1">技术支持</li> <li class="c1"><img src="搜索.png" width="52"</li> <li class="c1"><img src="锁.png"</li> </ul> </div> </div> <div class="c"> <div class="cc"><img src="../../HTML部分/1029/Images/nike_watch_large.jpg" /></div> <div class="cc"><img src="../../HTML部分/1029/Images/airpods_large.jpg" /></div> <div class="cc"><img src="../../HTML部分/1029/Images/iphone_upgrade_large.jpg" /></div> <div class="cc"><img src="../../HTML部分/1029/Images/accessibility_large.jpg" /></div> </div> <div style=" position:relative; width:100%;height:460px; line-height:40px; text-align:left; top:5px; background-color:#f2f2f2;"> <div style="width:1000px; margin-left:auto; margin-right:auto;"> <div style="position:relative;width:100%; height:50px; font-size:12px; color:#A7A7A7;"> 双镜头摄像头仅于 iPhone 7 Plus 提供。亮黑色外观仅于 128GB 及以上存储容量的机型提供。 <hr /> </div> <div style="position:relative;width:100%;height:245px; font-size:12px;"> <div style="margin-left:20px; width:200px;position:relative;"> <ul style="list-style:none;position:relative;float:left;"> <li class="biao">选购及了解</li> <li>Mac</li> <li>iPad</li> <li>iPhone</li> <li>Watch</li> <li>Music</li> <li>iTunes</li> <li>iPod</li> <li>配件</li> </ul> </div> <div style="margin-left:100px; width:200px;position:relative;float:left;"> <ul style="list-style:none;position:relative;"> <li class="biao">Apple Store 商店</li> <li>查找零售店</li> <li>Genius Bar 天才吧</li> <li>讲座和学习</li> <li>青少年活动</li> <li>Apple Store App</li> <li>翻新和优惠</li> <li>分期付款</li> <li>重复使用和循环利用</li> <li>订单状态</li> <li>选购帮助</li> </ul> </div> <div style=" width:200px;position:relative;float:left;"> <div style=" width:200px;position:relative;float:left;"> <ul style="list-style:none;position:relative;"> <li class="biao">教育应用</li> <li>Apple 与教育</li> <li>高校师生选购</li> </ul> </div> <div style=" width:200px;position:relative;float:left; top:20px;"> <ul style="list-style:none;position:relative;"> <li class="biao">商务应用</li> <li>Apple 与商务</li> <li>商务选购</li> </ul> </div> </div> <div style=" width:200px;position:relative;float:left;"> <div style=" width:200px;position:relative;float:left;"> <ul style="list-style:none;position:relative;"> <li class="biao">帐户</li> <li>管理你的 Apple ID</li> <li>Apple Store 帐户</li> <li>iCloud.com</li> </ul> </div> <div style=" width:200px;position:relative;float:left; top:20px;"> <ul style="list-style:none;position:relative;"> <li class="biao">Apple 价值观</li> <li>辅助功能</li> <li>环境责任</li> <li>隐私</li> <li>供应商责任</li> </ul> </div> </div> <div style=" width:200px;position:relative;float:left;"> <ul style="list-style:none;position:relative;"> <li class="biao">关于 Apple</li> <li>Apple 资讯</li> <li>工作机会</li> <li>媒体资讯</li> <li>活动</li> <li>联系 Apple</li> </ul> </div> </div> <div style="position:relative;width:100%;font-size:12px; color:#A7A7A7;"> 更多选购方式:前往 Apple Store 零售店,致电 400-666-8800 或查找在你附近的授权经销商。 <hr /> <div style="position:relative;float:left;">Copyright © 2016 Apple Inc. 保留所有权利。隐私政策丨使用条款丨销售政策丨法律信息丨网站地图</div> <div style="position:relative; margin-right:0px; width:56px; height:20px; float:right; background-image:url(cut/China.png)"></div> <div style="position:relative;float; width:950px; height:20px; line-height:20px;float:left;">京公安网安备 11010502008968 京ICP备10214630</div> </div> </div> </div> </body> </html>