网站页面导航怎么设置css(纯CSS + 媒体查询实现网页导航效果)
类别:Web前端 浏览量:2645
时间:2022-03-29 15:41:14 网站页面导航怎么设置css
纯CSS + 媒体查询实现网页导航效果附上效果图,如果大家感觉不错,请参考实现代码:
代码如下,复制即可使用:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { background: #801638; } body, body > * { margin: 0; padding: 0; font-family: 'Roboto', sans-serif; font-weight: normal; } * { transition: all .3s ease 0s; } /* Background colours */ li + li article:nth-child(1) { background: #c22326; } li + li article:nth-child(2) { background: #f37338; } li + li article:nth-child(3) { background: #fdb632; } li + li article:nth-child(4) { background: #027878; } li + li article:nth-child(5), li + li { background: #801638; } /* Main layout */ html, body, li + li { width: 100vw; height: 100vh; } li + li { list-style: none; position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; overflow: hidden; } /* Articles */ li + li article { flex: initial; width: 20%; height: 100%; text-align: center; color: #fff; text-decoration: none; vertical-align: bottom; box-sizing: border-box; padding: 2vh 1vw; position: relative; } /* Big Headings */ body > li:first-child { position: fixed; bottom: 8vh; background: #fff; width: 100%; text-align: center; padding: .5rem; z-index: 2; } body > li:first-child h1, body > li:first-child h2 { margin: 0; padding: 0; } /* Hover interaction */ li + li:hover article { flex: initial; width: 10%; } li + li article:hover { width: 60%; } article > li { opacity: 0; transition: opacity .2s ease 0; } li + li article:hover > li { opacity: 1; transition: opacity .3s ease .3s; } /* navigation */ li + li article > h2 { bottom: 2vh; position: absolute; text-align: center; width: 100%; margin: 0; font-size: 3vh; } /* Article layouts */ article li { text-align: left; width: 58vw; } article li p, article li li h2, article li h3 { margin: 0 0 1em 0; } article li p { width: 40vw; } @media (max-width: 900px) { li + li article { padding: 2vh 3vw; } li + li article > h2 { transform: rotate(90deg); bottom: 23vh; min-width: 12em; text-align: left; transform: rotate(-90deg); transform-origin: 0 0 0; opacity: 1; } li + li article:hover > h2 { opacity: 0; } article li p { width: 50vw; } article li { max-height: calc(72%); overflow-y: auto; } } </style> </head> <body> <li> <h1>我在这,谁敢动我。</h1> <h2>我是你们大哥的头</h2> </li> <li> <article> <h2>大哥的小弟一</h2> <li> <h3>大哥的小弟一</h3> <p>身高180</p> <p>体重120</p> </li> </article> <article> <h2>大哥的小弟二</h2> <li> <h3>大哥的小弟二</h3> <p>身高160</p> <p>体重100</p> </li> </article> <article> <h2>大哥的小弟三</h2> <li> <h3>大哥的小弟三</h3> <p>身高175</p> <p>体重180</p> </li> </article> <article> <h2>大哥的小弟四</h2> <li> <h3>大哥的小弟四</h3> <p>身高180</p> <p>体重110</p> </li> </article> <article> <h2>大哥的小弟五</h2> <li> <h3>大哥的小弟五</h3> <p>身高180</p> <p>体重150</p> </li> </article> </li> </body> </html>
您可能感兴趣
- css高级使用技巧(全面解析CSS Media媒体查询使用操作推荐)
- css媒体查询常见的媒体类型(css基于媒体查询和 rem 的响应式布局实践)
- css3 media媒体查询
- 网站页面导航怎么设置css(纯CSS + 媒体查询实现网页导航效果)
- 五代十国南唐历代国君(五代十国南唐历代国君)
- 飞机引进工程师杨隆 匠人匠心,只争朝夕(飞机引进工程师杨隆)
- 三人行,她们是育人路上的 铁三角 团队(她们是育人路上的)
- 阴阳师 孟婆山兔CP不倒 新皮肤草稿 孟婆兔 让痒痒鼠点赞(阴阳师孟婆山兔CP不倒)
- 阴阳师孟婆御魂推荐 孟婆御魂搭配毕业套(阴阳师孟婆御魂推荐)
- 袁冰妍终于接到新剧,饰演反追男主,看到合作演员 眼光果然毒辣(袁冰妍终于接到新剧)
热门推荐
- 无法打开物理文件 操作系统错误 5:拒绝访问
- serv-u服务器搭建(Serv-U 无法连接到服务器127.0.0.1,端口43958 之解决办法)
- python装饰器使用说明(详解Python装饰器)
- linux编写ftp程序(Linux实现文件上传ftp服务器脚本代码)
- Laravel 中创建 Zip 压缩文件并提供下载的实现方法(Laravel 中创建 Zip 压缩文件并提供下载的实现方法)
- 什么是HttpHandler
- laravel开发登录接口(解决laravel5中auth用户登录其他页面获取不到登录信息的问题)
- docker多个端口怎么分(Docker多个容器不能有相同端口号的处理方案)
- 云主机免费推荐吗(云主机可以永久免费吗?)
- html5+css样式代码(详解HTML5中CSS外观属性)