【任务一】编码实现如图4所示导航栏效果。要求如下：
- 导航栏下边框为10px灰色单实线。
- “星着装”的背景图像与其它项目不同。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>导航栏</title> <style type="text/css"> .all{ width: 1010px; height: 129px; border-bottom: 10px solid silver; margin: 20px auto; } .a{ width: 1010px; height: 344px; background: url(images/head_bg.jpg) repeat-x; } .b{ width: 400px; height:350px; position: absolute; /* 绝对定位 */ top: 20; margin-left:40px ; background: url(images/logo.png) no-repeat; } .c{ width: 400px; height:344px; position: absolute; /* 绝对定位 */ top: 20; /* 紧贴.a的顶部 */ left: 430px; /* 距离右边40px */ background: url(images/xuanfu.png) no-repeat; } .d { color: white; position: absolute; /* 绝对定位 */ top: 0; left: 800px; /* 水平居中 */ transform: translateX(-50%); /* 水平居中 */ text-align: center; /* 文字居中 */ } .d span { display: inline-block; width: 90px; height: 100px; line-height: 100px; /* 垂直居中文字 */ padding-left: 10px; /* 调整margin */ font-size: 20px; /* 根据需要调整字体大小 */ } } </style> </head> <body> <div class="all"> <div class="a"> <div class="b"> <div class="c"></div> </div> <div class="d"> <span class="one">穿搭速通</span> <span class="two">时尚大片</span> <span class="three">星着装</span> <span class="four">时尚圈</span> <span class="five">时尚专栏</span> <span class="six">会员/登陆</span> </div> </div></div> </body> </html>
2200
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
