HTML5+CSS3移动端响应式网页制作

本文介绍响应式设计的基本概念及其在不同设备上的应用,包括H5的语义化增强、Box-sizing属性的使用、固比布局技巧、阴影属性设置、视网膜屏幕适配方法及SuperSlide插件的应用步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.响应式可以简单理解为:能够适应所有的设备屏幕

2.H5相较于XHTML增强了语义化。

3.Box-sizing:border-box;(内减模式)

4.固比的布局,固定的模块要用绝对定位的方式将其固定住。

5.阴影属性:box-shadow:水平阴影的位置   垂直阴影的位置   模糊羽化    阴影的尺寸    阴影的颜色     内外阴影;

默认是外阴影

6.视网膜屏幕

用background-size等比缩小一半的方式解决。




              (以上接图片来自传智播客公开课《火爆响应式HTML5+CSS3移动端网页制作video》视频截图)

7.http://www.superslide2.com/             (做网页常见特效的网站、免费)

superSlider :PC端常见特效

TouchSlide: 手机端

插件的引用方式:

http://www.superslide2.com/  链接中找到相应的插件效果——》下载插件——》解压插件——》找到我们想要的效果的css和HTML页面,并根据里面的注释找到我们需要的代码的开始与结束位置——》拷贝到自己对应 的文件里面——》修改涉及到的图片的宽高(因为我们要做的是响应式,宽度调整为100%,高度auto)——》拷贝插件中引用的js到自己对应的文件夹中——》在自己的HTML页面中引用该js文件



另外,在SuperSlide网站中也有插件的使用步骤





评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值