<! DOCTYPE html> <!--declaration Document type:html-->
<meta charset= "UTF-8" > <!--Character set: UTF-8 encode-
<meta name= "Generator" content= "EditPlus" >
<meta name= "Author" content= "Chihiro" > <!--Author--
<meta name= "Keywords" content= "Chihiro Blog, blog" > <!--keywords--
<meta name= "Description" content= "> <!--description--
<title>ur official website Effects </title> <!--page title---
<!--CSS cascading styles-
<style>
*{/* wildcard characters */
margin:0; /* Outer margin */
padding:0; /* Inner margin */
}
#box {
width:1017x; /* Width: 1018 megapixels */
height:523px; /* High: 523 megapixels */
BORDER:1PX solid Red/* border: Border size Line Color */
margin:100px Auto; /* margin: Top distance */
position:relative; /* Positioning: relative positioning */
}
/* In the page there is an ID named box tag, below ul*/
#box ul{
width:100%
height:100%;
border:1px solid red;
Position:absolute; /* Positioning: Absolute Positioning Reference Location Parent */
top:0;
}
#box ul li{
list-style:none;/* List Style: none */
float:left;/* Left float */
width:337px;
height:113px;
border:1px solid white;
position:relative;/**/
}
#box ul Li p{
/*
Top and so on, the locality should be with the positioning
*/
Position:absolute;
top:10px;
left:10px;
color:white;/* text color */
}
#box ul Li logo{
width:80px;
height:60px;
position:relative;
left:-40px;
Opacity:1;
}
#box ul Li img{
Opacity:0;/*0 fully transparent 1 completely opaque */
}
</style>
<body> <!--Web body: Structure visualization Area double label--
<div id= "box" > <!--Parent--
<!--img Picture label src= "Path"--
<ul id= "Oul" > <!--UL unordered List tab--
<li>
<>
</li>
<li>
<p> Youth Youth</p>
</li>
<li>
<p> Youth Youth</p>
</li>
<li>
<p> Youth Youth</p>
</li>
<li>
<p> Youth Youth</p>
</li>
<li>
<p> Youth Youth</p>
</li>
<li>
<p> Youth Youth</p>
</li>
<li>
<p> Youth Youth</p>
</li>
<li>
<p> Youth Youth</p>
</li>
</div>
<script>
/Gets the element in the document, through the ID name ("")/
var Obox=document.getelementbyid (' box ');
Gets the element in the document, through the label
var a=document.getelementsbytagname (' img ');
var arr=[' images/bg1 ', ' images/bg2.jpg '];//array
num=0;
Aimg[0].src=arr[num];
SetInterval (function () {
num=num++;
if (num==2) {
num=0;
}
Aimg[0].src=arr[num];
},2000);//timer executes every 1000 milliseconds
for (var i) {
Ali[i.onmouseover=function () {//mouse slide in
Ali[0].style.opacity=1;ali
}
</script>
</body>
UR website special effects
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
