慕课网3-13编程练习:采用flex弹性布局制作页面主导航
2024-08-30 05:15:43
小伙伴们,伸缩容器的属性我们已经学完了,接下来使用我们所学的伸缩容器属性完成下面的效果图。
要求:
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>
flex弹性模型制作主页导航参考代码
最新文章
- [Computational Advertising] 计算广告学笔记之基础概念
- Elasticsearch 全教程
- Redis C#缓存的使用
- redis 数据类型详解 以及 redis适用场景场合
- [原]php远程odbc连接sqlsvr数据库,自定义端口,命名实例的连接方式
- 【HTML5】浅析html使用SSE(Server-Sent Events)连接JSP
- mysql 时间戳 按周、日、月 统计方法 附 date格式
- 3dmax导出3ds具有过多要导出的面超过64k解决方法
- web.xml中webAppRootKey
- 【转载】茶叶蛋干货!《超容易的Linux系统管理入门书》(连载十)进行动态主机配置DHCP
- ejabberd,erlang,简单看了一下,总结一下,很肤浅
- 转:sql语句中GROUP BY 和 HAVING和使用 count()
- POJ 1742 hdu 2844 Coins
- Angularjs快速入门(二)
- OSX 10.8+下开启Web 共享 的方法
- Python模块查找路径
- BZOJ 2463: [中山市选2009]谁能赢呢?(智商)
- 6.0-uC/OS-III软件定时器管理
- MVC中页面的传值方式总结
- 《C语言程序设计》指针篇<;一>;
热门文章
- python环境配置以及基本知识
- Jmeter学习笔记之逻辑控制器-Runtime Controller
- 06 Python流程控制
- photon Unity RPC 调用流程
- JavaScript 面向对象的编程(一)
- 关于jupyter notebook
- Eclipse不编译解决方案
- [bzoj2038][2009国家集训队]小Z的袜子(hose)_莫队
- [bzoj 1005][HNOI 2008]明明的烦恼(prufer数列+排列组合)
- Centos7 上安装mysql遇上的问题:mysql无法正常启动