网站网页策略,手机windows wordpress,音乐网站如何做,做网站推广员需要1. 想要实现#xff0c;”返回顶部”永远位于页面的右下角。需要用到position函数。CSS:层叠样式表。用到了分层的功能。 position:fixed; 永远固定在一个地方。 !DOCTYPE html
html langen
headmeta charsetUTF-8”返回顶部”永远位于页面的右下角。需要用到position函数。CSS:层叠样式表。用到了分层的功能。 position:fixed; 永远固定在一个地方。 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodydiv stylewidth:50px;height:50px;background-color:black;color:white;position:fixed;bottom:20px;right:20px;返回顶部/divdiv styleheight:5000px;background-color:#dddddd;/div
/body
/html运行结果总是位于页面的右下角 2. margin-top:52px; 让它离上面是52px这样两层就没有重叠的部分了有了2px的间距文字就能正常显示了。 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.pg-header{background-color:#FF83FA;height:50px;position:fixed;top:0px;left:0px;right:0px;}.pg-body{background-color:#dddddd;height:5000px;margin-top:52px;}/style
/head
bodydiv classpg-header头部/divdiv classpg-body内容/div
/body
/html运行效果 3. 插播 margin:0 auto; 是设置对象四边的外延边距被称为外补丁或外边距。指的是上下0 左右自动居中。 text-align:center 是规定元素中的文本的水平对齐方式。 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodydiv styleposition:relative;width:500px;height:400px;border:1px solid red;margin:0 auto;/div
/body
/html运行结果 关于height与line-height的说明 line-height是行高height就是高通常height是对于某个框架或者图片来弄的line-height用于文字。如果要实际效果你可以写一段文字分好几行然后对它做line-height属性就会注意到变化了。比如div abcbr/abcbr/abcbr/abcbr/abcbr//div调整20px这个值行间距就会发生变化另外line-height和height组合到一块儿还有一种效果就是如果把它们的值设置的一样了文字就会在垂直方向居中。 !DOCTYPE html
html langenheadmeta charsetutf-8/
/headbodydiv styleheight:200px;width:200px;line-height:100px;background-color:#dddddd;abcbr/abcbr//div
/body
/html运行结果所以如果设置行间距height的话就把屏幕一劈两半达到了垂直居中的效果了。 最终总结 height:100px; line-height:100px;-----------实现了垂直居中。 text-align:center;-----------实现了文字的水平居中。 !DOCTYPE html
html langen
headmeta charsetutf-8
/head
bodydiv stylewidth:200px;height:200px;background-color:#dddddd;position:relative;div stylewidth:100px;background-color:red;position:absolute;left:50px;right:50px;top:50px;bottom:50px;height:100px;line-height:100px;text-align:center;中中中/div/div
/body
/html效果图 4. relativeabsolute relative单独存在的时候没有任何意义。 div styleposition:absolute; top:0; left:0;/div 放在父类标签的某个位置。 left:0可以改成left:-15px; 这样就会位于父类的左边的外面。不一定非要位于父类的里面。只不过是以父类作为参照位置罢了。 定义了position:absolute以后就可以定义 left:0; right:0; bottom:0; top:0 这四个属性了。 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodydiv styleposition:relative;width:500px;height:150px;border:1px solid red;margin:0 auto;div styleposition:absolute;left:0;bottom:0;width:50px;height:50px;background-color:black;/div/divdiv styleposition:relative;width:500px;height:150px;border:1px solid red;margin:0 auto;div styleposition:absolute;right:0;bottom:0;width:50px;height:50px;background-color:black;/div/divdiv styleposition:relative;width:500px;height:150px;border:1px solid red;margin:0 auto;div styleposition:absolute;right:0;top:0;width:50px;height:50px;background-color:black;/div/div
/body
/html运行结果 5. 用三层实现弹窗的效果 可以说3层是并列关系 第1层正常设置就可以了。 第2层和第3层是漂层所以需要设置positionfixed为了控制哪一层在最上面还需要设置Z-index。为了能看到效果第2层还需要设置opacity否则会把第1层档得严严实实。 opacity:0.3; 0.3----1直接设置当前的透明度。opacity是不透明暧昧的意思。Z-index: 谁的这个值大谁就在上面。fixed之后相当于漂起来了就无法通过margin0 auto 设置居中了。定义了 positionfixed 以后必须定义上下左右中的至少两项否则不知道漂在哪个位置。 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodydiv stylez-index:10;position:fixed;top:50%;left:50%;background-color:white;height:400px;width:500px;/divdiv styleposition:fixed;z-index:9;background-color:black;top:0;bottom:0;left:0;right:0;opacity:0.5;/divdiv styleheight:5000px;background-color:green;sss/div
/body
/html运行结果以左上角为参考点50%-50%居中了。 6. 加上 margin-left:-250px; margin-top:-200px; 回到中间了。 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodydiv stylez-index:10;position:fixed;top:50%;left:50%;margin-left:-250px;margin-top:-200px;background-color:white;height:400px;width:500px;/divdiv styleposition:fixed;z-index:9;background-color:black;top:0;bottom:0;left:0;right:0;opacity:0.5;/div div styleheight:5000px;background-color:green;sss/div
/body
/html运行结果 7. display:none 的勾选和不勾选就能实现折层的出现和不出现。 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodydiv styledisplay:none;z-index:10;position:fixed;top:50%;left:50%;margin-left:-250px;margin-top:-200px;background-color:white;height:400px;width:500px;input typetext/input typetext//divdiv styleposition:fixed;z-index:9;background-color:black;top:0;bottom:0;left:0;right:0;opacity:0.5;/divdiv styleheight:5000px;background-color:green;sss/div
/body
/html运行结果 转载于:https://www.cnblogs.com/momo8238/p/7421818.html
