
2 解释原因:CSS样式中的background-attachment属性可以将背景设置为固定不动的。
3 内容延伸:具体的CSS代码如下:
body {
background-image: url("你的图片链接")
background-attachment: fixed
}
将"你的图片链接"替换为你想要设置成背景的图片链接即可。
同时,大部分主流浏览器都支持该属性的设置,可以保证兼容性。
对于正确使用阿里巴巴iconfont想必大家都有一定的了解,但是详细的使用方式我想大家都是大同小异的吧,那么我就把它告诉大家,以便大家方便使用。
具体使用方法如下:
1.首先在I阿里巴巴iconfont矢量图标库这个页面上把你需要的相应图标随后就会点击购物车按钮加入暂存架;
2.其次就是选择完你所需要所有要用的图标后,这时你就需要给它命名。然后你还要在图标管理所对应的图标应用项目中,最后找到这个项目,获取在线链接,把里面的代码复制到CSS中;
3.完成以上步骤后在HTML中需要使用到图标时,使用iconfont类名。
4.最后就是你可以通过控制iconfont类的属性改变图标的样式。
这样你就完成了你所需的相关需求,通过以上 *** 作,你可以轻松完成。那为什么我们要使用阿里巴巴iconfont,其实也不难发现,顾名思义iconfont也就是把图标用字体的方式呈现,其优点在于以下几个方面:首先可以通过css的样式改变其颜色,其实不是专业人士是很难搞定的,其次就是相对于图片来说,具有更高的分辨率,最后就是它拥有更小的存储,对于我们来说非常方便,所以这就是它的优点所在。任何东西的使用都有它的两面性,它的缺点就是浏览器兼容性不够普及,所幸目前大部分主流浏览器都支持。
但是只要你学会了使用的方法就会很快上手,所以说现在的科技也是有它的好处,使用它的方法其实就是你根据方法进行 *** 作,那么你就会很快,学习这些并不是一成不变的,所以祝你早日学会。
无论是电脑还是手机,要做到自适应屏幕,其实都是一样的。
首先,在网页代码的头部,加入一行viewport标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。即让viewport的宽度等于物理设备上的真实分辨率,不允许用户缩放。
其次:网页宽度css一定要使用百分比width: xx%,不能用绝对像素。当然可以用width:auto
第三,流动布局
.left{
float: left
width: ***%
}
第四,选择加载css
这是自适应的关键部分
.abc{ height:300pxborder:1px solid #000margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
/* 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
@media screen and (max-width: 901px) {
.abc {width: 200px}
}
/* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */
@media screen and (max-width: 500px) {
.abc {width: 100px}
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */
需要注意是CSS代码顺序,由大到小排版CSS(判断浏览器宽度越大越放前),这样是因为逻辑关系,@media 判断CSS排错将导致判断失效。
第四,图片自适应
img { max-width: 100%}
老版本的IE不支持max-width,所以只好写成:img { width: 100%}
筚五、采用相对字体大小
字体也不能使用绝对大小(px),而只能使用相对大小(em)。
这里最重要的,是第三条和第四条,也就是采用流动布局和css选择加载。祝你好运!
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)