HTMl教程:实现网页左右两侧居中的对联广告代码

HTMl教程:实现网页左右两侧居中的对联广告代码,第1张

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

*{margin: 0padding: 0}

.Ad{

position: fixed

width: 140px

height: 500px

background: #db3e52

top: -moz-calc(50% - 250px)

top: -webkit-calc(50% - 250px)

top: calc(50% - 250px)

}

div.Ad:nth-child(1){

left: 2%

}

div.Ad:nth-child(2){

right:2%

}

</style>

</head>

<body>

<div class="Ad"></div>

<div class="Ad"></div>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>浮动对联</title>

<style>

#QQFloat{

right: 2px

}

#QQFloat2{

left: 2px

}

.QQFloat2{

background-color:#f61

top: 20px

overflow: hidden

position: absolute

height: 400px

width: 50px

padding:25px

text-align:center

font-size:45px

}

</style>

<script type="text/javascript">

window.onscroll = function MoveQQ(){

document.getElementById("QQFloat").style.top=eval(document.documentElement.scrollTop) + "px"

document.getElementById("QQFloat2").style.top=eval(document.documentElement.scrollTop) + "px"

}

</script>

</head>

<body>

<div style="height:2500pxwidth:749pxmargin:0 auto">为了让网页出现滚动条以便测试加了这个层<br />为了让网页出现滚动条以便测试加了这个层

<br />

为了让网页出现滚动条以便测试加了这个层

</div>

<div class="QQFloat2" id="QQFloat">天增岁月人增寿</div>

<div class="QQFloat2" id="QQFloat2">春满乾坤福满门</div>

</body>

</html>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6112728.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-15
下一篇 2023-03-15

发表评论

登录后才能评论

评论列表(0条)

保存