介绍 & lt; !DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt; title> Document
& lt; style>
身体{
背景:# 801638;
}
的身体,
身体比;* {
保证金:0;
填充:0;
字体类型:& # 39;Roboto& # 39;,无衬线;
粗细:正常;
}
* {
过渡:所有。3缓解0;
}/*背景颜色*/p + p文章:nth-child (1) {
背景:# c22326;
}
p + p文章:nth-child (2) {
背景:# f37338;
}
p + p文章:nth-child (3) {
背景:# fdb632;
}
p + p文章:nth-child (4) {
背景:# 027878;
}
p + p文章:nth-child (5),
p + p {
背景:# 801638;
}/* */主要布局
超文本标记语言
的身体,
p + p {
宽度:100大众;
身高:100 vh;
}
p + p {
list-style:没有;
位置:相对;
显示:flex;
flex-direction:行;
flex-wrap: nowrap;}
对齐项目:伸展;
溢出:隐藏;
}/* */文章
p + p{条
flex:初始;
宽度:20%;
高度:100%;
text-align:中心;
颜色:# fff;
文字修饰:没有;
vertical-align:底部;
box-sizing: border-box;
填充:2 vh 1大众;
位置:相对;
}/*大标题*/身体比;p:第一个孩子{
位置:固定;
底部:8 vh;
背景:# fff;
宽度:100%;
text-align:中心;
填充:.5rem;
z - index: 2;
}
身体比;p:第一个孩子h2,
身体比;p:第一个孩子h3 {
保证金:0;
填充:0;
}/* */鼠标交互
p + p:悬停{条
flex:初始;
宽度:10%;
}
p + p文章:{徘徊
宽度:60%;
}
文章在p {
透明度:0;
过渡:透明度。2缓解0;
}
p + p文章:徘徊在p {
透明度:1;
过渡:透明度。3。3缓解;
}
*//*导航
p + p文章比;h3 {
底部:2 vh;
位置:绝对的;
text-align:中心;
宽度:100%;
保证金:0;
字体大小:3 vh;
}
*//*文章布局
p{条
text-align:左;
宽度:58大众;
}
p p,条
p p h3,条
文章p h4 {
保证金:0 0 1 em 0;
}
文章p p {
宽度:40大众;
}
@media (max-width: 900 px) {
p + p{条
填充:2 vh 3大众;
}
p + p文章比;h3 {
变换:旋转(90度);
底部:23 vh;
min-width: 12 em;
text-align:左;
变换:旋转(-90度);
transform-origin: 0 0 0;
透明度:1;
}
p + p文章:徘徊在h3 {
透明度:0;
}
文章p p {
宽度:50大众;
}
p{条
max-height:钙(72%);
overflow-y:汽车;
}
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; p>
& lt; h2>我在这,谁敢动我。你们;/h2>
& lt; h3>我是你们大哥的头& lt;/h3>
& lt;/p>
& lt; p>
& lt; article>
& lt; h3>大哥的小弟一& lt;/h3>
& lt; p>
& lt; h4>大哥的小弟一& lt;/h4>
& lt; p>身高180 & lt;/p>
& lt; p>体重120 & lt;/p>
& lt;/p>
& lt;/article>
& lt; article>
& lt; h3>大哥的小弟二& lt;/h3>
& lt; p>
& lt; h4>大哥的小弟二& lt;/h4>
& lt; p>身高160 & lt;/p>
& lt; p>体重100 & lt;/p>
& lt;/p>
& lt;/article>
& lt; article>
& lt; h3>大哥的小弟三& lt;/h3>
& lt; p>
& lt; h4>大哥的小弟三& lt;/h4>
& lt; p>身高175 & lt;/p>
& lt; p>体重180 & lt;/p>
& lt;/p>
& lt;/article>
& lt; article>
& lt; h3>大哥的小弟四& lt;/h3>
& lt; p>
& lt; h4>大哥的小弟四& lt;/h4>
& lt; p>身高180 & lt;/p>
& lt; p>体重110 & lt;/p>
& lt;/p>
& lt;/article>
& lt; article>
& lt; h3>大哥的小弟五& lt;/h3>
& lt; p>
& lt; h4>大哥的小弟五& lt;/h4>
& lt; p>身高180 & lt;/p>
& lt; p>体重150 & lt;/p>
& lt;/p>
& lt;/article>
& lt;/p>
& lt;/body>
& lt;/html>
小编给大家分享一下CSS与媒体查询实现网页导航功能的方式,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
附上效果图:
代码如下,复制即可使用:
以上是CSS与媒体查询实现网页导航功能的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!
