Web前端常见问题解决方法

一、图片水平居中

img必须被一个容器包裹起来,div、p、span都可以,但是建议用p。

方法如下:

<p style=“text-align:center”><img src="……"></p>

二、图片垂直居中

外部容器设置:display:table,img标签外嵌套一个span标签,并设置span的显示模式为display:table-cell;vertical-align:middle。

三、用表格布局时,如何取消td之间的空隙

table{border:0;cellspacing:0;cellpadding:0;border-collapse:collapse;}

table tr td{border:1px solid #e8e8e8;}

四、表格跨列后设置列宽不起作用

<table style="table-layout:fixed">

<colgroup>

<col style="width:15%;"></col>

<col style="width:80%;"></col>

<col style="width:5%;"></col>

<col></col>

</colgroup>

然后接正常的跨列的行

五、解决页面中的两个window.onload冲突的问题

使用Jquery中的$().ready(function(){});方法

六、设置背景色透明,文字不透明

background-color:rgba(0,0,0,0.5)

七、背景图填充的几种方法

①background-size:auto

auto是默认值,不改变背景图片的原始高度和宽度;

②background-size:<长度值>

成对出现如200px 50px,将背景图宽高依次设置为前面两个值,当设置一个值时,将其作为图片宽度值来等比缩放;

③background-size:<百分比>

当出现0%~100%之间的任何值,将背景图宽高依次设置为所在元素宽高乘以前面百分比得出的数值,当设置一个值时同上;

④background-size:cover

覆盖的意思,即将背景图等比缩放以填满整个容易;

⑤background-size:contain

容纳的意思,即将背景图等比缩放至某一边紧贴容器边缘为止。

八、竖版一屏按百分比布局

html,body{height:100%;}

#container{min-height:100%;}

*html #container{height:100%;}

.box{width:100%;height:100%;}

九、手机网页调整大小

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />

width=device-width :表示宽度是设备屏幕的宽度

initial-scale=1.0:表示初始的缩放比例

minimum-scale=0.5:表示最小的缩放比例

maximum-scale=2.0:表示最大的缩放比例

user-scalable=yes:表示用户是否可以调整缩放比例

猜你喜欢

转载自blog.csdn.net/weixin_33850890/article/details/87409487
今日推荐