1.bootstrap图片img-responsive声明响应式图片2.bootstrap字体图标通过字体代替图标,font文件夹需要和css文件夹在同一目录3.bootst导航条(1)navbar声明导航条(2)navbar-default声明默认的导航条样式(3)navbar-inverse声明反白的导航条样式(4)navbar-static-top去掉导航条的圆角(5)navbar-fixe
分类:
其他好文 时间:
2019-01-15 20:32:12
阅读次数:
175
图片 响应式图片 在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性,从而让图片在其父元素中更好的缩放。 如果 ...
分类:
其他好文 时间:
2018-12-13 19:14:15
阅读次数:
166
html的代码如下: 然后有下面这样的css代码: 现在的方式是流式布局,但是响应式的图像效果并没有出来,下面还出现了滚动条: 为了让我们的图片变成响应式的,我们还需要添加如下的css代码: 这样我们的效果就变成这样啦: ...
分类:
其他好文 时间:
2018-06-19 14:49:02
阅读次数:
158
响应式是指一个网站能兼容多个终端,响应式图片即是,图片大小能自适应屏幕(比例不变) ...
分类:
其他好文 时间:
2018-05-20 16:46:33
阅读次数:
189
viewport 响应式图片 大图随容器自动缩放,保持宽高比 背景图片 保持宽高比 margin\padding的值是百分比的时候是相对父元素的width 导航栏布局 网格布局 inline-block+justify:每行放下的数目固定 flex:宽高度固定,能放几个就放几个 media quer ...
分类:
其他好文 时间:
2018-05-01 14:07:15
阅读次数:
162
一、图片 1、响应式图片:<img src=" " class="responsive"> 2、圆角图片:<img src=" " class="rounded"> 3、圆形图片:<img src=" " class="circle"> 4、缩略图片:<img src=" " class="thum ...
分类:
其他好文 时间:
2018-04-20 13:23:26
阅读次数:
191
本书将当前Web 设计中热门的响应式设计技术与HTML5 和CSS3 结合起来,为读者全面深入地讲解了针对各种屏幕大小设计和开发现代网站的各种技术。书中不仅讨论了媒体查询、弹性布局、响应式图片,更将新的和有用的HTML5 和CSS3 技术一并讲解,是学习新Web 设计技术不可多得的佳作。 - 理解响 ...
分类:
Web程序 时间:
2018-03-30 23:14:27
阅读次数:
398
响应式图片布局 picture source media srcset设置响应式图片 ... ...
分类:
其他好文 时间:
2018-01-20 17:49:48
阅读次数:
140