罗瑟钢琴官网

这个网站是一个名为“罗瑟钢琴”的官方网站，主要提供钢琴相关的产品和信息。在设计上，它使用了媒体查询(media query)来根据屏幕大小调整元素的显示方式。当屏幕宽度大于等于768px时，网站的logo、导航栏和社交媒体图标会进行样式上的调整，以适应不同的显示需求。

• #logo{ max-height: 62px !important; margin: 20px 0; }：这段代码确保了网站logo的最大高度为62px，并且在页面中居中对齐；
  
• .navbar{ float: left; width: 100%; }：这段代码设置了navbar的布局为浮动，宽度为100%，并居左显示；
  
• #nav_contant{ height: 148px !important; }：这行代码设置了nav内容区域的高为148px，并在页面中居中显示；
  
• .navbar-header{ height: 100%; }：这行代码将navbar-header的高度设置为100%。
  
• #nav_list{ margin: 40px 0; }：这行代码设置了nav列表区域的边距为40px，并在页面中居中显示；
  
• #nav_list li a:hover{ background: rgba(0,0,0,0) !important; border-bottom: 1px solid #c2a360; } .nav>li>a:focus{ background: none; }：这两段代码分别设置了当鼠标悬停在或点击nav列表项时的背景颜色和边框样式，以及焦点状态下的元素背景色。
  
• #weixin_m_img{ display: none; position: absolute; right: 45px; top: 100px; }：这行代码隐藏了社交媒体图标，并将其放置在右侧45px位置，底部100px处。
  

以上代码是CSS的媒体查询，它们被嵌入HTML文档中以根据屏幕尺寸调整样式。