然后再说下弹出效果,这个广告本身是display:none;隐藏的,然后通过js或者jq控制当打开该网页的时候添加display:block就弹出了(显示);复杂点的,有时候弹出来之后别人把他关闭了(或者直接没有关闭按钮,那么这里直接忽略),但是你又想广告过一会又弹出来,这个怎么实现呢?
这里就用到了定时器setInterval,里面加个判断 当该广告的display是none的时候把他改为block,再设置个时间多久循环一次,比如两秒,当广告被关闭,两秒之后会判断一次,因为广告广告是关闭的(display:none)所以他会给广告更改样式(改为display:block),这样广告又出来了
怎么样这样说能够理解吧?剩下的代码就需要你来写了,只把大概思路和你说下
将DIV添加进CSS里面,首先我们需要给这个div一个id或者是class,然后获取这个元素的id或者是class,css中书写样式就行了,如果是通用样式的话,我们就可以直接写div,然后加样式就行,请看代码:<html>
<head>
<style>
#div1{ //Id的写法
width:300px
height:30px
font-size:13px
}
.div1{//class写法
width:300px
height:30px
font-size:13px
}
div{ //通用样式写法
width:300px
height:30px
}
</head>
<body>
<div id='div1' class='div1'>
<p>我是测试文字</p>
</div>
</body>
</html>
这个可以通过布局和样式解决:方法一:所有布局用百分比布局,这种方法是比较传统的。
方法二:百分比和em(一个字符的单位)相结合的;
方法三:rem为单位来写样式,需要借助JS来根据分辨率的大小调整rem
方法四:布局用rem单位,而字体用em.
第1、2两种方法是比较传统,网上随便搜搜就找得到了;第3种开始用到的rem,rem是css3新出的一种样式属性单位,类似PX;但是rem是可以人为设置大小的,也就是说rem这个单位的大小是可以设置,基于这个特性,再通过JS来根据分辨率控制这个rem的单位大小;
JS代码:
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth
if (!clientWidth) return
docEl.style.fontSize = 40 * (clientWidth / 1080) + 'px'
console.log(40 * (clientWidth / 1080))
}
if (!doc.addEventListener) return
win.addEventListener(resizeEvt, recalc, false)
doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window)
这边的40是rem的自己需要单位大小(自己根据需求设置的,如果需要甚至可以改成10);
这边的1080是设计效果图的大小,如果设计图是以宽度为2000的话,那么这边的1080就改成2000;
而em用来做字体单位的话,就可以根据不同的显示器(手机自身的设定)来显示字体,不会出现字体大的离谱,或者小的看不见的状况;
不过rem因为是CSS3的属性,在PC端的兼容性很差,不建议使用,但是移动端是非常适合的,总结就是PC端:方法一、方法二,移动端:方法三、方法四