广告图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>广告页面</title>
<link rel="stylesheet" type="text/css" href="../css/c1.css" />
</head>
<body>
<div id="adv">
<div id="close">
<img id="clos1" src="../img/x.png" />
</div>
<div id="pic">
<img id="pic1" src="../img/OIP-C%20(1).jpg" >
</div>
</div>
<script src="../js/j1.js" type="text/javascript"></script>
</body>
</html>
*{
margin: 0px;
padding: 0px;
}
#adv{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
img{
max-width: 100%;
height: auto;
}
#clos1{
width: 15px;
height: 15px;
float: right;
}
/**
* Created by fu1zhi1xing8 on 2021/8/7.
*/
var close = document.getElementById("clos1");
var adv = document.getElementById("adv")
//关闭广告
close.onclick=function(){
adv.style.display = "none";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>广告页面</title>
<link rel="stylesheet" type="text/css" href="../css/c2.css" />
</head>
<body>
<div class="main">
<div class="row">
<div><img src="../img/OIP-C%20(1).jpg"/></div>
</div>
<div class="row">
<div><img src="../img/OIP-C%20(2).jpg"/></div>
</div>
<div class="row">
<div><img src="../img/OIP-C%20(3).jpg"/></div>
</div><div class="row">
<div><img src="../img/OIP-C.jpg"/></div>
</div>
<div class="row">
<div >
<img src="../img/下载%20(1).jpg" />
</div>
</div>
</div>
<script src="../js/j2.js" type="text/javascript"></script>
</body>
</html>
.main{
width: 100%;
height:auto;
}
.row{
float: left;
width: 200px;
height: 100px;
}
img{
width: 200px;
height: 100px;
}
/**
* Created by fu1zhi1xing8 on 2021/8/7.
*/
window.onresize = function()//窗口加载时获取
{
var x = document.getElementsByClassName("row");//通过class来获取数组
var i;
var wiw = window.innerWidth;//获取窗口内宽
var spw = wiw % 220;//取余
var count = parseInt(wiw/220);//整除后看能放几个
if (spw<200) {
var pa = parseInt(wiw-count*200)/(count);//计算间距
} else{
var pa = parseInt(wiw-(count+1)*200)/(count+1);
count = count+1;
}
for (i = 0;i < x.length ; i++){
if (i % count == 0) {
x[i].style.margin = pa + "px";//改变padding
} else{
x[i].style.margin = pa + "px";
}
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>广告页面</title>
<link rel="stylesheet" type="text/css" href="../css/c3.css" />
</head>
<body>
<div class="picture">
<img src="../img/OIP-C%20(1).jpg"/>
</div>
<script src="../js/j3.js" type="text/javascript"></script>
</body>
</html>
.picture{
position: fixed;
width: 31.25rem;
height: 20.875rem;
margin: 0 auto;
border: 2px solid red;
overflow: hidden;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
}
.pst{
position: absolute;
margin: 0rem;
width: 100%;
height: 0rem;
background-color: azure;
}
img{
width: 100%;
height: 100%;
}
/**
* Created by fu1zhi1xing8 on 2021/8/7.
*/
var address = ["../img/OIP-C (1).jpg","../img/OIP-C (2).jpg","../img/OIP-C (3).jpg","../img/OIP-C.jpg","../img/x (1).jpg","../img/x (2).jpg"];
var imgs = document.querySelector("img");//轮播图
var len = address.length;//把地址的数量为len
var x = 0;
str = function(){
x++;
if(x>5){
x=0;
}
imgs.src=address[x];
}
setInterval(str,3000)//间隔指定的毫秒数不停地执行指定的代码
程序逻辑
多联级
/**
* Created by fu1zhi1xing8 on 2021/8/7.
*/
var address = ["../img/OIP-C (1).jpg","../img/OIP-C (2).jpg","../img/OIP-C (3).jpg","../img/OIP-C.jpg","../img/x (1).jpg","../img/x (2).jpg"];
var imgs = document.querySelector("img");//轮播图
var len = address.length;//把地址的数量为len
var x = 0;
str = function(){
x++;
if(x>5){
x=0;
}
imgs.src=address[x];
}
setInterval(str,3000)//间隔指定的毫秒数不停地执行指定的代码
.clearfix:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfix{zoom:1}
ul,li{
list-style:none;
}
.qrm-input{
outline: none;
border:none;
height: 38px;
position: absolute;
left: 4px;
top: 0;
padding: 0 10px;
}
.qrm-input-border{
position: relative;
}
.qrm-pinming{
height: 38px;
line-height: 40px;
border:1px solid #dddddd;
border-radius: 5px;
position: relative;
width: 300px;
background-image: url("../img/qrm-arrow-down.png");
background-repeat: no-repeat;
background-position: 275px;
}
.qrm-pinming:hover{
cursor: pointer;
}
.qrm-pinming input:hover{
cursor: pointer;
}
.qrm-pinming-panel{
position: absolute;
top: 52px;
left: -1px;
z-index: 99999;
width: 350px;
height: 210px;
/*border: 1px solid #409EFF;*/
background: #ffffff;
}
.qrm-border1{
float: left;
width: 33%;
height: 208px;
/*overflow-y: scroll;*/
border-right: 1px solid #f1f1f1;
box-shadow: 0 0px 5px #f1f1f1;
position: absolute;
top: 50px;
/*margin-left: 5px;*/
}
.qrm-border2{
float: left;
width: 33%;
height: 208px;
/*overflow-y: scroll;*/
border-right: 1px solid #f1f1f1;
box-shadow: 0 0px 5px #f1f1f1;
position: absolute;
top: 50px;
left: 100px;
/*margin-left: 5px;*/
}
.qrm-border3{
float: left;
width: 33%;
height: 208px;
/*overflow-y: scroll;*/
border-right: 1px solid #f1f1f1;
box-shadow: 0 0px 5px #f1f1f1;
position: absolute;
top: 50px;
left: 200px;
/*margin-left: 5px;*/
}
.qrm-lev{
float: left;
width: 96.5%;
margin:0;
padding:0;
font-size: 12px;
}
.qrm-lev>li{
width: 95%;
position: relative;
display: block;
padding-left: 10px;
height: 35px;
line-height: 35px;
}
.qrm-lev>li:hover{
background: #F5F7FA;
/*color: #409EFF;*/
}
.qrm-arrow-right{
display: inline-block;
width: 4px;
height: 7px;
background: url("../img/qrm-arrow-right.png") no-repeat;
position: absolute;
right: 7px;
top: 14px;
}
.qrm-lev-1>li.active{
background: #F5F7FA;
color: #409EFF;
}
.qrm-lev-2>li.active{
background: #F5F7FA;
color: #409EFF;
}
.qrm-lev-3>li.active{
background: #F5F7FA;
color: #409EFF;
}
.qrm-lev-4>li.active{
background: #F5F7FA;
color: #409EFF;
}
.box{
width: 350px;
height: 300px;
margin: 0 auto;
}
143
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
