用css怎么写弹出广告代码,JS也可以,求大神

html-css012

用css怎么写弹出广告代码,JS也可以,求大神,第1张

其实蛮简单的,你理解了他的原理就会了,简单说一下吧,首先这个广告正常显示同样不影响网页其他的内容的布局,那么他应该是突出来的对吧?这个可以用相对文档的绝对定位或者相对浏览窗口的固定定位,这个会把?

然后再说下弹出效果,这个广告本身是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端:方法一、方法二,移动端:方法三、方法四