>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 20875 个阅读者 刷新本主题
 * 贴子主题:  响应式 Web 设计:网格视图 回复文章 点赞(0)  收藏  
作者:flybird    发表时间:2020-01-30 15:15:42     消息  查看  搜索  好友  邮件  复制  引用



响应式Web设计-网格视图

什么是网格视图?

很多网页都是基于网格设计的,这说明网页是按列来布局的。

点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小

使用网格视图有助于我们设计网页。这让我们向网页添加元素变的更简单。

点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小

响应式网格视图通常是12列,宽度为100%,在浏览器窗口大小调整时会自动伸缩。

创建响应式网格视图

接下来我们来创建一个响应式网格视图。

首先确保所有的HTML元素都有box-sizing属性且设置为border-box

确保边距和边框包含在元素的宽度和高度间。

添加如下代码:

*{

box-sizing:border-box;

}

以下实例演示了简单的响应式网页,包含两列:

实例

.menu{
width:25%;

float:left;
}

.main{
width:75%;

float:left;
}

以上实例包含两列。

12列的网格系统可以更好的控制响应式网页。

首先我们可以计算每列的百分比:100%/12列=8.33%。

在每列中指定class,class="col-"用于定义每列有几个span:

CSS:

.col-1{width:8.33%;}
.col-2{width:16.66%;}
.col-3{width:25%;}

.col-4{width:33.33%;}
.col-5{width:41.66%;}
.col-6{width:50%;}

.col-7{width:58.33%;}
.col-8{width:66.66%;}
.col-9{width:75%;}

.col-10{width:83.33%;}
.col-11{width:91.66%;}
.col-12{width:100%;}

所有的列向左浮动,间距(padding)为15px:

CSS:

[class*="col-"]{
float:left;

padding:15px;
border:1pxsolidred;
}

每一行使用<div>包裹。所有列数加起来应为12:

<div class="row">
<div class="col-3">...</div>
<div class="col-9">...</div>
</div>

列中行为左浮动,并添加清除浮动:

CSS:

.row:after{
content:"";

clear:both;
display:block;
}

我们可以添加一些样式和颜色,让其更好看:

实例

html{
font-family:"LucidaSans",sans-serif;
}

.header{
background-color:#9933cc;

color:#ffffff;
padding:15px;
}
.menuul{

list-style-type:none;
margin:0;

padding:0;
}
.menuli{

padding:8px;
margin-bottom:7px;

background-color:#33b5e5;
color:#ffffff;

box-shadow:01px3pxrgba(0,0,0,0.12),01px2pxrgba(0,0,0,0.24);
}
.menuli:hover{

background-color:#0099cc;
}

程序猿的技术大观园:www.javathinker.net



[这个贴子最后由 flybird 在 2020-01-31 15:56:07 重新编辑]
  Java面向对象编程-->数组
  JavaWeb开发-->开发JavaMail Web应用
  JSP与Hibernate开发-->第一个helloapp应用
  Java网络编程-->XML数据处理
  精通Spring-->虚拟DOM和render()函数
  Vue3开发-->Vue组件开发高级技术
  前端Vue单页面应用性能优化
  卫琴姐姐最新制作的Vue3视频教程,强烈推荐!!!
  Promise对象的then()和catch()方法
  Vue 项目从 Vue CLI 2 升级到 Vue CLI 4
  JavaScript Promise对象的用法
  JavaScript输出格式化日期和时间
  Node.js操纵Mongodb数据据
  Vue watcher的高级用法
  Vue路由传递参数详细说明
  Vue之引用第三方JS插件,CKPlayer使用
  JS 循环删除数组
  JavaScript Date 对象
  CSS3的响应式 Web 设计:媒体查询
  JavaScript 类型转换
  JavaScript基础入门
  更多...
 IPIP: 已设置保密
树形列表:   
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。