盒子模型 通过改变元素内外边距来实现元素的移动
定位 通过元素位置移动改变出现在网页的位置
center top 居中置顶 url 半透明
no-repeat 不平铺
图片居中
left:50%
top:50%
margin-left:-180px
margin-top:-180px
盒子模型:通过改变盒子的外边或者内边来实现元素的移动
定位:通过元素的位置移动来改变出现在网页的相对位置中
.login{
width:360px;
height:360px;
background:url("tupian") no-repeat;
position:fixed;
left:50%;
top:50%;
margin-left:-180;
margin-top:-180;
登录设计:半透明遮罩和登录的固定定位方式
登录页面水平和垂直居中的原理:div先相对于网页left和top50%fixed定位,然后使用margin-left和margin-top负div宽和高的一半,可以得到居中的登录页面
登录设计:半透明遮罩和登录的固定定位方式
登录页面水平和垂直居中的原理:div先相对于网页left和top50%fixed定位,然后使用margin-left和margin-top负div宽和高的一半,可以得到居中的登录页面
盒子模型:通过盒子的内边距和外边距来来实现元素的移动
定位:是通过元素的位置移动来改变出现在网页的相对位置中
background:url("图片路径") center(居中) top(置顶) no-repeat(不平铺)
背景图片设置
现在网站为了让游客先注册登录,使用这个方法:
1、搞一个遮罩层(多数是半透明灰)为固定定位,置于网页界面上方
2、再一个登录界面小窗口,设置固定定位,置于遮罩层上方,且居中。
3、这样用户就一定会点击这个登录窗口了,不论他怎样调整这个浏览器窗口的大小,登录界面一直位于你的视窗的最中间。
登录模块的居中显示
登录设计:半透明遮罩和登录的固定定位方式
登录页面水平和垂直居中的原理:div先相对于网页left和top50%fixed定位,然后使用margin-left和margin-top负div宽和高的一半,可以得到居中的登录页面
登录设计:半透明遮罩和登录的固定定位方式