小伙伴们,伸缩容器的属性我们已经学完了,接下来使用我们所学的伸缩容器属性完成下面的效果图。
要求:
1、logo、导航项、登录注册按钮这三项在水平和垂直方向上都对齐,而且他们之间的距离也相等。
2、导航项各项之间的距离也是一样的。
3、登录、注册按钮之间的距离也是一样的。
慕课网logo图:
效果图如下:
任务
1、对容器进行弹性布局(导航项容器和按钮也要使用弹性布局)
2、三大容器(logo、导航项、按钮)在水平方向以及垂直方向均对齐,且之间距离一样
3、导航项以及按钮之间的各项距离也相等
<!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } </style> </head> <body> <header> <div class="logo"> <img src="http://climg.mukewang.com/59feb59700019dab01910057.png" alt="" /> </div> <ul class="nav"> <li>第一个li</li> <li>第二个li</li> <li>第三个li</li> <li>第四个li</li> </ul> <div class="login"> <input type="button" value="登录"> <input type="button" value="注册"> </div> </header> </body> </html>
参考代码:
<!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } ul { list-style: none; } #head-nav { display: flex; justify-content: space-around; align-items: center; flex-wrap: nowrap; width: 100%; height: 75px; background-color: black; color: white; } .nav { display: flex; flex-wrap: nowrap; } .nav li { margin: 0 2em; } .login input { width: auto; height: auto; background: orange; color: white; border: 1px solid orange; padding: 0.5em 1em; border-radius: 0.5em; outline: none; } </style> </head> <body> <header id="head-nav"> <div class="logo"> <img src="http://climg.mukewang.com/59feb59700019dab01910057.png" alt="logo" /> </div> <ul class="nav"> <li>课程</li> <li>路径</li> <li>新闻</li> <li>手记</li> </ul> <div class="login"> <input type="button" value="登录"> <input type="button" value="注册"> </div> </header> </body> </html>