15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > 制作静态网页总结

制作静态网页总结

时间:2023-10-12 11:48:01 | 来源:网站运营

时间:2023-10-12 11:48:01 来源:网站运营

制作静态网页总结:1.居中问题,一是水平居中,二是垂直居中。

(一)水平居中 :

1.行内居中:text-align:center

.header .header-center .header-nav ul li{ float: left; width: 98px; text-align: center; height: 50px; /*垂直居中*/ line-height: 50px;2.块元素居中:margin:auto

(二)垂直居中:

1.用line-height

.center .boss .center2 .center-top{ height: 57px; width: 291px;二,间隙问题

display:inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。

.header .header-center .header-logo .logo-right .right2 ul li{ display: inline-block; width: 70px; color: #ff8842; border-right: 2px solid #A7AFC5; margin-right: 10px; cursor: pointer;三、背景图片自适应属性

1,背景图片取消重复

background-image: url(image.jpg);background-repeat:no-repeat;
2,背景图片固定(不会随着内容滚动而改变位置)

background-image: url(image.jpg);background-attachment:fixed;3,背景图片居中显示

background-image: url(image.jpg);background-repeat:no-repeat;background-position:center;4,背景图片等比例拉伸

background-image: url(image.jpg);background-repeat:no-repeat;background-size: auto 100%;/* background-size: 100% auto; */5,使用 cover 自动等比例拉伸图片

background-image: url(image.jpg);background-repeat:no-repeat;background-size: cover;6,背景图片拉伸(会扭曲图片)

background-image: url(image.jpg);background-repeat:no-repeat;background-size: 100% 100%;

关键词:总结,静态

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭