随笔分类 -  HTML5与CSS3以及自适应响应布局

CSS中正确理解浮动以及clear:both的关系
摘要：要注意以下几点： 1、 浮动元素会被自动设置成块级元素，相当于给元素设置了display:block（块级元素能设置宽和高，而行内元素则不可以）。 2、 浮动元素后边的非浮动元素显示问题。 3、 多个浮动方向一致的元素使用流式排列，此时要注意浮动元素的高度。 4、子元素全为浮动元素的元素高度自适应问 阅读全文
posted @ 2018-09-14 11:03 骏码信息 阅读(392) 评论(0) 推荐(0)
html5中的几种布局简单比较
摘要：html中的布局主要由静态布局、自适应布局、流式布局以及响应式布局几类，简单比较以下这几种布局的区别和特点。 一 静态布局（Static Layout） 表现：在传统web设计中，不管浏览器尺寸具体大小多少，网页的布局会一直按照最开始的布局来显示。 特点：固定死宽高。 二 自适应布局（Adaptive Layout） 表现：就是为了不同屏幕的分辨率来定义不同的布局，并且在每个布局中的页... 阅读全文
posted @ 2018-09-14 10:01 骏码信息 阅读(1425) 评论(0) 推荐(0)
网页开发常见问题总结
摘要：01.让背景图不滚动 IE浏览器支持一个 Body 属性 bgproperties，它可以让背景不滚动: 〈Body Background="图片文件" bgproperties="fixed"〉 02.让你的网页无法另存为 <noscript><iframe alt=网页制作技巧24条 src=* 阅读全文
posted @ 2017-11-29 21:31 骏码信息 阅读(604) 评论(0) 推荐(0)
Jquery实现特效滑动菜单栏
摘要：jquery实现导航滑动 首页 课程大厅 学习中心 个人中心 关于我们 主页 前端课程 手机开发 后台编程 Javascript CSS JQue... 阅读全文
posted @ 2016-10-13 14:03 骏码信息 阅读(2206) 评论(1) 推荐(0)
纯CSS3实现动态导航栏目
摘要：css3实现动画导航菜单尖角 阅读全文
posted @ 2016-10-13 10:40 骏码信息 阅读(263) 评论(0) 推荐(0)
兼容ie6及一下版本的自适应
摘要： 阅读全文
posted @ 2016-07-22 11:28 骏码信息 阅读(204) 评论(0) 推荐(0)
bootstrap从phpcmsv9中数据库中取出照片达到自适应的效果
摘要：<script type="text/javascript"> $(".col-xs-12 img").addClass("carousel-inner img-responsive img-rounded");</script> 阅读全文
posted @ 2016-06-09 11:02 骏码信息 阅读(273) 评论(0) 推荐(0)
CSS3自适配手机屏幕
摘要：根据屏幕大小（长宽）来调整css样式，达到手机屏幕适配的效果。 阅读全文
posted @ 2016-04-23 09:57 骏码信息 阅读(511) 评论(0) 推荐(0)
jquery控制滚动条改变上面固定(fixed)导航条或者搜索框的属性
摘要： 阅读全文
posted @ 2016-03-31 17:49 骏码信息 阅读(747) 评论(0) 推荐(0)
半透明状态栏（适用于搜索等）CSS样式
摘要：.search-1{ -webkit-box-flex: 1; -moz-box-flex:1; text-align: left; font-size:14px; line-height:22px; height: 22px; background-color:rgba(255,255,255,0.5); border-radius: 30px; ... 阅读全文
posted @ 2016-03-31 16:29 骏码信息 阅读(615) 评论(0) 推荐(0)
bootstrap标签引入地址
摘要：http://www.bootcdn.cn/bootstrap/ <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">百度静态资源库的Bootstrap引入地址 阅读全文
posted @ 2016-03-21 14:10 骏码信息 阅读(414) 评论(0) 推荐(0)
【网站图标的设置】适用于开发的网站打开时显示的小图标（多图）
摘要：<link rel="icon" href="" sizes="32x32" /> 阅读全文
posted @ 2016-03-17 11:23 骏码信息 阅读(242) 评论(0) 推荐(0)
【浅谈html5 响应式布局之自动适应屏幕宽度】
摘要：允许网页宽度自动调整 “自适应网页设计”到底是怎么做到的？其实并不难。 首先，在网页代码的头部，加入一行viewport元标签。 <meta name=”viewport” content=”width=device-width, initial-scale=1″ /> viewport是网页默认的 阅读全文
posted @ 2016-03-12 20:58 骏码信息 阅读(621) 评论(0) 推荐(0)
背景图片适配手机屏幕大小的设置方法。。。。。。。。。。。。
摘要：1 .bg{ 2 width:100%; 3 height:100%; 4 background-image: url(../image/splash.png); 5 background-size: 100% 100%; 6 background-size: cover; 7 positi... 阅读全文
posted @ 2015-12-31 10:24 骏码信息 阅读(1970) 评论(1) 推荐(0)