百度前端技术学院-task1.8源代码
2016-03-24 16:12
295 查看
主要是不采用bootstrap实现网格。
遇到的困难及注意点如下:
1、[class*='col-'],这个是选择col-开头的类,第一次用,以前也只是看到过;
2、媒体查询,总觉得容易理解错误。@media (min-width: 769px){}代表的是屏幕至少大于等于769px;@media (max-width: 769px){}代表的是屏幕至少小于等于769px;
3、before,after的用法,还有待进一步去理解。
4、calc()的运用,注意不要符号之间要留有空格。
5、outline的运用;
6、本想用一个类实现的,但是实际是根据内容的重要性,放大程度不一样。所以得添加多个类,并重新定义。
遇到的困难及注意点如下:
1、[class*='col-'],这个是选择col-开头的类,第一次用,以前也只是看到过;
2、媒体查询,总觉得容易理解错误。@media (min-width: 769px){}代表的是屏幕至少大于等于769px;@media (max-width: 769px){}代表的是屏幕至少小于等于769px;
3、before,after的用法,还有待进一步去理解。
4、calc()的运用,注意不要符号之间要留有空格。
5、outline的运用;
6、本想用一个类实现的,但是实际是根据内容的重要性,放大程度不一样。所以得添加多个类,并重新定义。
<!DOCTYPE html> <html> <head> <title>响应式布局</title> <meta charset="utf-8"> <style> html,body{margin: 0px;padding: 0px;} .grid-container{ width: 100%; } .row:before, .row:after { content:""; display: table ; clear:both; } .row{ padding-left: 20px; } [class*='col-'] { float: left; height: 50px; width: 16.66%; background-color: #eee; outline: 1px solid #999; margin: 20px 20px 0 0px; } @media (min-width: 769px){ .col-md-1{ width: calc(8.33% - 20px); } .col-md-2{ width: calc(16.66% - 20px); } .col-md-3{ width: calc(25% - 20px); } .col-md-4{ width: calc(33.33% - 20px); } .col-md-6{ width: calc(50% - 20px); } .col-md-8{ width: calc(66.66% - 20px); } .col-md-12{ width: calc(100% - 20px); } } @media (max-width: 768px){ .col-sm-2{ width:calc(16.66% - 20px); } .col-sm-3{ width:calc(25% - 20px); } .col-sm-6{ width:calc(50% - 20px); } .col-sm-8{ width:calc(66.66% - 20px); } .col-sm-12{ width:calc(100% - 20px); } } </style> </head> <body> <div class="grid-container"> <div class="row"> <div class="col-md-4 col-sm-6"></div> <div class="col-md-4 col-sm-6"></div> <div class="col-md-4 col-sm-12"></div> </div> <div class="row"> <div class="col-md-3 col-sm-3"></div> <div class="col-md-6 col-sm-6"></div> <div class="col-md-3 col-sm-3"></div> </div> <div class="row"> <div class="col-md-1 col-sm-2"></div> <div class="col-md-1 col-sm-2"></div> <div class="col-md-2 col-sm-8"></div> <div class="col-md-2 col-sm-3"></div> <div class="col-md-6 col-sm-3"></div> </div> </div> </body> </html>
相关文章推荐
- Json 和 Jsonlib 的使用
- 15、 EXTJs前后台交互
- [转]EL表达式和JSTL表达式实例
- js:使用JSON.stringify的时候,对\n等特殊字符的处理
- 4000 nodejs简易server环境及简易接口路由 写在一起 (2)
- 关于LCD的分屏与切屏 Tearing effect
- 关于LCD的分屏与切屏 Tearing effect
- 从零开始山寨Caffe·拾:IO系统(三)
- 使用transform和transition制作CSS3动画
- protobuf jsoncpp 安装
- 14、EXTJS4.0 用法笔记3种和后台交互数据的方法
- CSS3实现雪碧图动画
- 错误:Invalid action class configuration that references an unknown class named [XXX]的解决
- JS 实用技巧总结
- JavaScript之基础-2 JavaScript 变量、常量
- jQuery制作无缝轮播的焦点图
- JSTL
- 数组、字典转json格式字符串
- JavaScript入门系列之知识点总结
- JavaScript:事件响应