从导航开始

现在让我们来用刚学会的Responsive技巧来制作一个blog前端。

一切从导航开始,例子的Demo大概是这样的:点击查看例子 请尝试拖拽窗口大小,查看响应式效果。

第一步:HTML和CSS实现导航

index.html:

从导航开始

注意:index.css 的宽度要用百分比来计算,这样在页面大小变化的时候,整个框架也会按比例放缩。

.container{ width:90%; height: auto; margin:0 auto; margin-top:20px; background-color: #fff; -webkit-box-shadow: 0 0 10px rgba( 0, 0, 0, .1 ); -moz-box-shadow: 0 0 10px rgba( 0, 0, 0, .1 ); box-shadow: 0 0 10px rgba( 0, 0, 0, .1 ); } div#logo{ float: left; padding-top: 7px; width:25%; } div.navigation{ height: 80px; } div#nav{ width: 75%; float:right; } #nav ul{ margin-top:25px; list-style: none; } #nav ul li{ float: left; width:20%; text-align: center; font-size:1.5rem; }

第二步:实现Responsive.css:

要实现响应式的布局,就要监测当屏幕大小变化时,重新调整一些元素的位置,大小,样式。

而在这个例子中,我们需要:

  1. 重新调整Logo位置,使其居中。
  2. 重新调整导航位置,使其在下行占满。
  3. 取消掉logo和ul > li的浮动,防止页面出现错误。

@media screen and (max-width: 480px){ div#logo{ width: 100%; text-align: center; margin-left: 0; padding-left: 0; } div#nav{ width: 100%; } div#nav ul{ float:none; margin-left: 0; padding-left: 0; width: 100%; } div#nav ul li{ float: none; width: 100%; margin-right: 0; margin-left: 0; padding-top:10px; padding-bottom: 10px; background-color: #fff; } }

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注