4.定位练习
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ background-color: rgba(0,0,0,0.3); width: 280px; padding: 10px; position: relative; } input{ /* 因为添加了内边距 宽度280-20*2*/ width: 240px; /* 去掉自带边框 */ border: 0; padding: 10px 20px; } img{ position: absolute; top: 14px; right: 25px; } p{ font-size:12px ; color: red; margin: 0; } </style> </head> <body> <div> <input type="text" placeholder="请输入您的用户名" /> <img src="http://doc.canglaoshi.org/tstore_v1/images/login/yhm.png" > <p>用户名不能为空!</p> </div> </body> </html>
测试效果：
5.固定定位
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #d1{ position: fixed; background-color: white; width: 100%; } #i1{ margin-top:100px ; } #d2{ width: 80px; height: 158px ; background-color: blue; position: fixed; right: 20px; bottom: 100px; } </style> </head> <body> <div id="d1"> <h1>页面顶部内容</h1> </div> <div id="d2"> </div> <img src="../2.jpg" > <img src="../2.jpg" > <img src="../2.jpg" > <img src="../2.jpg" > <img src="../2.jpg" > <img src="../2.jpg" > <img src="../2.jpg" > <img src="../2.jpg" > </body> </html>
测试效果：
6.浮动定位
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body>div{ width: 200px; height: 200px; border: 1px solid red; } #d1{ width: 80px; height: 55px; background-color: red; float: left; } #d2{ width: 80px; height: 50px; background-color: green; float: left; } #d3{ width: 80px; height: 50px; background-color: blue; float: left; } </style> </head> <div> <div id="d1"></div> <div id="d2"></div> <div id="d3"></div> </div> <body> </body> </html>
测试效果：
7.学子商城练习
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ font: 12px "simhei", Arial, Helvetica, sans-serif; color: #666; } body>div{ width: 366px; height: 233px; background-color: #e8e8e8; } #top_div{ height: 35px; background-color: #0AA1ED; border-radius: 2px; } #top_div>img{ margin: 8px 0 0 10px; } #top_div>span{ color: white; font-size: 16px; /* 位置微调使用相对定位 */ position: relative; bottom: 3px; } .c1{ /* 让div里面的内容缩进10个像素 */ padding-left: 10px; } ul{ list-style-type: none; /* 去掉无序列表自带缩进 */ padding: 0; /* 因为ul里面的所有li全部浮动了,此时因为高度识别为0 会出现显示异常 添加以下代码解决*/ overflow: hidden; margin-top: 8px; margin-bottom: 25px; } li{ float: left; margin-right: 10px; } .c1>p{ color: #62B5EC; margin-bottom: 8px; } li>a{ color: #0AA1ED; text-decoration: none; } a:hover{ color: #0a7eb8; } </style> </head> <body> <div> <div id="top_div"> <img src="http://doc.canglaoshi.org/tstore_v1/images/itemCat/computer_icon1.png"/> <span>电脑,办公/1F</span> </div> <div class="c1"> <p>电脑整机</p> <ul> <li><a href="#">笔记本</a></li> <li><a href="#">游戏机</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 class="c1"> <p>电脑配件</p> <ul> <li><a href="#">CPU</a></li> <li><a href="#">SSD硬盘</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 class="c1"> <p>外设/游戏</p> <ul> <li><a href="#">键盘</a></li> <li><a href="#">鼠标</a></li> <li><a href="#">U盘</a></li> <li><a href="#">移动硬盘</a></li> <li><a href="#">游戏设备</a></li> <li><a href="#">智能单车</a></li> </ul> </div> </div> </body> </html>
显示效果：
