html-css 15媒体查询美图的导航条

媒体查询

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><style>/*使用媒体查询 语法: @media 查询规则{}媒体类型: all所有设备print 打印设备screen带屏幕的设备可以使用连接多个媒体类型，这样他们之间就是一个或的关系可以在媒体类型前添加一个only，表示只有 only的使用主要是为了兼容一些老版本的浏览器*//* @media print,screen{body{background-color: antiquewhite; }} */@media only screen{body{background-color: aquamarine;}}
</style><body><!-- 响应式布局网页可以根部不同的设备或窗口大小呈现出不同的效果使用响应式布局。可以使一个网页适应于所有设备相应布局的关键就是 媒体查询通过媒体查询，可以为不同的设备，或设备不同状态来分别设置样式-->
</body>
</html>

媒体特性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>/* 媒体特性:width:视口的宽度height:视口的高度
max-width:视口最大宽度min-width:视口最小宽度*//*样式切换的分界点我们称为断点小于768，超小屏幕 max-width=768px大小768  小屏幕大于992 中型屏幕大于1200 大屏幕 min-width=1220pxand是交集，是并集*/@media(min-width:500px)and(max-width:700px) {body{/*当视口宽度大于500px,样式生效*/background-color: antiquewhite;}}
</style><body></body>
</html>

美图html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>美图</title><link rel="stylesheet" href="../css重置样式表/reset.css"><!-- 这个地方记住，一定是引入的css文件 --><link rel="stylesheet" href="./css/syntax.css"><link rel="stylesheet" href="../font/css/all.css">
</head>
<style></style><body><div class="topbar-wrapper"><!-- 设置顶部容器 --><div class="topbar"><!-- 设置左侧菜单导航 --><div class="left-menu"><ul class="menu-icon"><!-- 图标不能实现动画，所以用另外一种方法 --><li></li><li></li><li></li></ul><ul class="nav"><li><a href="javascript:;">手机</a></li><li><a href="javascript:;">美容仪器</a></li><li><a href="javascript:;">配件</a></li><li><a href="javascript:;">服务支持</a></li><li><a href="javascript:;">企业网站</a></li><li><a href="javascript:;"><i class="fas fa-search"></i></a><span>搜索Meitu.com</span></li></ul></div><!-- 设置中间logo --><div class="logo"><a href="#">tupian</a></div><!-- 设置右侧用户信息 --><div class="user-info"><a href="javascript:;"><i class="fas fa-user"></i></a></div></div>
</div>
</body></html>

美图less

a{color: #fff;&:hover{color: rgb(197, 190, 190);}
}
.topbar-wrapper{background-color: #161515;
}//设置美图
.topbar{//下面这两句，是为了在最后放大的时候的效果，最大宽度是1200px,并且居中max-width: 1200px;margin: 0 auto;width: 100%;height: 48px;background-color: black;color:white;padding: 0 14px;
// 让三个元素浮动起来
display: flex;
justify-content: space-between;
}.left-menu {//设置菜单.nav{//把这个下拉框隐藏起来，
display: none;top:48px;//这个时候nav是相对于html(左上角）定位胆position: absolute;background-color: black;//如何让这个框撑满整个父元素呢//根据等式，左右都为0，不设置宽度，中间就是auto，自动给撑满了left: 0;right:0;//上下也是，中间是auto，自动撑满bottom: 0;
//这个地方不能让Tops是50，那样会留白padding-top: 60px;li{width: 80%;margin: 0 auto;border-bottom: 1px solid #161515;a{display: block;line-height: 44px;font-size: 14px;}&:last-child a{display: inline-block;margin-right: 6px;}}}//图标.menu-icon{width: 18px;height: 48px;// background-color: #bfa;//开启相对定位，可以设置三条线的位置position: relative;//设置左侧导航li{width: 18px;height: 1px;background-color: white;//现在三条线在顶部position: absolute;//修改旋转中心，由中心改为左侧transform-origin: left center;transition: 0.5s;}//导航的三条线li:nth-child(1){top:18px;}li:nth-child(2){top:24px;}li:nth-child(3){top:30px;}//鼠标移入左侧导航的效果，正常项目，效果是通过js实现&:hover{li:nth-child(1){//向下旋转transform: rotateZ(40deg);}li:nth-child(2){//隐藏// visibility: hidden;//   或者把颜色变成透明，我觉得下面这个效果比上面好opacity: 0;}li:nth-child(3){transform:rotateZ(-40deg);}}}//把隐藏的下拉框移出来&:hover{//显示隐藏的菜单.nav{display: block;}}}.logo{a{//怎么把字隐藏起来text-indent: -999px;display: block;height: 44px;width: 160px;background-image: url(../picture/meitu.png);// background-color: red;background-size: 160px 44px;}
}.user-info i{font-size: 18px;padding-top: 13px;color: aqua;
}
//设置媒体查询
@media only screen {//断点 768px(和and那种写法是一样的)@media (min-width:768px) {.left-menu{//自动增长flex:auto;order: 2;.nav{display: block;//为了让菜单位置合适，我们把定位关了position: static;//让菜单横过来display: flex;padding: 0;//让它回到上面li{width: auto;border-bottom: none;a{line-height: 48px;}span{display: none;}}}//当宽度变大，我们进行调整，只将图标隐藏.menu-icon{display: none;}}.logo{order: 1;}.user-info{order: 3;}}
}

html-css 15媒体查询美图的导航条相关推荐

CSS：媒体查询 CSS3 Media Queries
定义和使用使用 @media 查询,你可以针对不同的媒体类型定义不同的样式. @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的. ...
前端CSS @media 媒体查询PC端
前端CSS @media 媒体查询PC端注意and后面跟一个空格 @media screen and (min-width: 1024px){body{font-size: 12px} } /*&g ...
【css】媒体查询（总结）
[css]媒体查询文章目录 [css]媒体查询写在前面媒体查询: 一.认识viewport 二.关于三个viewport的理论 layout viewport(布局视口) visual view ...
android 媒体查询,CSS常用媒体查询应用
原标题:CSS常用媒体查询应用媒体类型媒体类型 sans - serif字体比较适合在屏幕上阅读,而 serif 字体更容易在纸上阅读. 媒体查询包含一个可选的媒体类型和零个或多个满足CSS3规范 ...
CSS Media媒体查询
媒介类型在CSS2中,媒体查询只使用于<style>和<link>标签中,以media属性存在 media属性用于为不同的媒介类型规定不同的样式 screen 计算机屏幕(默 ...
css基础媒体查询和rem
https://m.suning.com/ https://m.jd.com/ rem em 相对父元素font-size大小 rem 相对html 的font-size大小媒体查询有时候我们使用 ...
深入理解CSS Media媒体查询
前面的话一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了媒体属性和使用场景(IE8-浏览器不支持).本文将详细介绍媒体查 ...
css --- 使用媒体查询当屏幕宽度小于某个值时,隐藏掉某个类
Bootstrap提供了一个封装好的类: .hidden-xs: 当屏幕宽度<768px时隐藏 .hidden-sm: 当屏幕768px <= 宽度<992px时隐藏 .hidden ...
html5响应式媒体查询,css基于媒体查询和 rem 的响应式布局实践
我们开发一个网站的时候希望在手机端.iPad 端.PC 端都有良好的体验,CSS 给我们提供了一个强大的条件判断语法,可以根据设备的宽度来设置不同的样式,从而实现不同的设备应用不同的布局. 下图展示了 ...

html-css 15媒体查询美图的导航条

媒体查询

媒体特性

美图html

美图less

html-css 15媒体查询美图的导航条相关推荐

最新文章

热门文章

html-css 15媒体查询 美图的导航条

媒体查询

媒体特性

美图html

美图less

html-css 15媒体查询 美图的导航条相关推荐

最新文章

热门文章

html-css 15媒体查询美图的导航条

html-css 15媒体查询美图的导航条相关推荐