CSS练习题
1. 简易版小米侧边栏的实现
CSS学习3（CSS特性、盒子模型） - 201812 - 博客园 (cnblogs.com)
分析：背景应该为具有透明度的灰黑色，鼠标在对应位置显示的是小手，说明应该是链接。需要特别注意的是padding等会撑大盒子，需要计算好。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS</title> <!-- <link href="study01.css" rel="stylesheet">--> <style> /* 230*42 460-420=40 */ div { width: 234px; height: 420px; padding: 20px 0px; /* 上下有内边距 */ background: rgba(105,101,101,.6); } a { width: 204px; height: 42px; line-height: 42px; /*文字垂直居中*/ display: block; /*转换为块元素*/ text-decoration: none; /*取消a标签自带的下划线*/ color: white; padding: 0px 0px 0px 30px; /*文字离边框有一定的距离*/ } a:hover { background-color: #ff6700; } </style> </head> <body> <div> <!--使用a标签--> <a href="#">手机</a> <a href="#">电视</a> <a href="#">家电</a> <a href="#">笔记本 平板</a> <a href="#">出行 穿戴</a> <a href="#">耳机 音箱</a> <a href="#">健康 儿童</a> <a href="#">生活 箱包</a> <a href="#">智能 路由器</a> <a href="#">电源 配件</a> </div> </body> </html>
效果：
2. 新浪导航栏简单实现
CSS学习3（CSS特性、盒子模型） - 201812 - 博客园 (cnblogs.com)
分析：盒子的大小不一致，因为盒子里面的字数是不一样的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS</title> <style> .nav { height: 41px; background-color: #fcfcfc; border-bottom: 1px solid #edeef0; border-top: 3px solid #ff8500; line-height: 41px; } .nav a { display: inline-block; color: #4c4c4c; text-decoration: none; padding: 0 10px; } .nav a:hover { background-color: #eee; color: #ff8500; } </style> </head> <body> <div class="nav"> <a href="#">设为首页</a> <a href="#">手机新浪网</a> <a href="#">移动客户端</a> <a href="#">登录</a> <a href="#">微博</a> <a href="#">博客</a> <a href="#">邮箱</a> <a href="#">网站导航</a> </div> </body> </html>
效果：
3. 小米产品模块的简单实现
CSS学习4（边框、阴影、浮动） - 201812 - 博客园 (cnblogs.com)
分析：基于浮动，首先背景是一个大盒子，包含两个小盒子，这两个小盒子设置浮动就可以在原本的大盒子上面左右并行显示了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS</title> <style> .box { height: 460px; width: 1200px; background-color: lightblue; margin: 0 auto; } .left { float: left; width: 210px; height: 460px; background-color: rgba(105,101,101,.6) } .right { float: left; width: 990px; height: 460px; background-color: lightblue; } </style> </head> <body> <div class="box"> <div class="left"></div> <div class="right"></div> </div> </body> </html>
大致效果：
4、
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS</title> <style> * { /*注意，ul和li是由默认的内外边距的，所以要先修改掉*/ margin:0; padding: 0; } .box { width:1226px; height: 285px; background-color: pink; margin: 0 auto; /*居中对齐*/ } .box li { list-style: none; width: 296px; height: 285px; background-color: blue; float: left; margin-right: 14px; /*这样子写会导致最后一个li不在父盒子里面，原因是最后一个li不应该有右边距的*/ } .box .last { /*要注意权重问题*/ margin-right: 0; } </style> </head> <body> <ul class="box"> <li>1</li> <li>2</li> <li>3</li> <li class="last">4</li> </ul> </body> </html>
5、
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS</title> <style> .box { width: 1226px; height: 615px; background-color: pink; margin: 0 auto; } .left { float: left; width: 234px; height: 615px; background-color: blue; } .right { float: left; width: 992px; height: 615px; background-color: lightblue; } .right>div { /*注意：有大于号>，只选择right里面包含的div标签，如果div标签里面还包含div是不会被选择出来的*/ float: left; height: 300px; width: 234px; background-color: green; margin-left: 14px; margin-bottom: 14px; } </style> </head> <body> <div class="box"> <div class="left">左盒子</div> <div class="right"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> </body> </html>
