文章目录
- 点击下载
index.html
<!DOCTYPE html>
<html lang="ch">
<head><meta charset="UTF-8"><title>Demo_Test</title><link rel="stylesheet" href="css/Dec.css">
</head>
<body><div class="header" ><div class="logo" ><img src="Photo/01-M1.jpg" height="50" width="142" /></div><nav class="nav"><ul><li><a href="#">Home</a></li><li><a href="#">Why Actority?</a></li><li><a href="#">About us</a></li><li><a href="#">Blog</a></li><li><a href="#">Contact</a></li></ul></nav><nav class="But"><ul><li><a href="#">FOR ACTORS</a> </li></ul></nav>
</div><div class="bodyone"><div class="logo1"><img src="Photo/01-p1.jpg" height="82" width="571"/><div class="content1" id="content1" style="background-color:#1e2831;height:116px;width:300px;"><p class="title1">Best talents in one place</p><p class="character1">Suspendisse potenti Morbi sed maurs dui.<br>Duis sedligula odio,ac sollicitudin leo.<br>Etiam eget erat nisl,nec rhoncus risus.</p></div></div><div class="content2" id="content2" style="background-color:#1e2831;height:116px;width:300px;"><p class="title2">High-quality services</p><p class="character2">Nulla quis massa eros,placerat<br>condimentum leo.Curabitur semper lectus<br>eu nisi lacinia pretium.</p></div><div class="content3" id="content3" style="background-color:#1e2831;height:116px;width:300px;"><p class="title3">Lowest prices</p><p class="character3">Sed dui mauris,semper non sodales sed,<br>dignissim ac magna,In non viverra turpis.<br>Donecturpis est,iaculis in varius nec.</p></div>
</div><div class="bodytwo"><div class="logo2"><img src="Photo/01-home.jpg" height="40" width="448"/></div ><nav><a class="button1" href="#1">SEND THE SPEC</a></nav><div><p class="S">OR</p></div><nav><a class="button2" href="#2">CONTACT US</a></nav></div><div class="bodythree"><div><p class="T">Casting Actority:IMG Group</p></div><div class="logo3"><img src="Photo/01-p2.jpg" height="190" width="299"/></div><div><p class="R">Excepteur sin:occaecat cupidatat non proident,<br>sunt in culpa qui officia.</p></div><div><p class="P">Featured Casting Work</p><p class="L">View more</p></div><div class="Adobe"><div class="a1" ><img src="Photo/01-p3%20.jpg" height="90" width="140"/></div><div class="a2"><img src="Photo/01-pS.jpg" height="91" width="140"/></div><div class="a3"><img src="Photo/01-p4.jpg" height="90" width="140"/></div><div class="a4"><img src="Photo/01-p5.jpg" height="90" width="140"/></div><div class="a5"><img src="Photo/01-p5%206.jpg" height="90" width="140"/></div><div class="a6"><img src="Photo/01-p7.jpg" height="90" width="140"/></div><div class="a7"><img src="Photo/01-p8.jpg" height="90" width="140"/></div><div class="a8"><img src="Photo/01-p9.jpg" height="90" width="140"/></div></div></div><div class="bodyfour"><div ><p class="W" >What People Are Saying</p></div><div class="TF"><img src="Photo/01-t1.jpg" height="200" width="159"/></div><div><p class="J">Lorem ipsum dolor sit amet,<br>consectetur adipisicing elit,sed do<br>eiusmod tempor incididunt!</p></div><div><p class="Q">//Joe Doe，Actor</p></div><div class="logo4"><img src="Photo/F1.jpg" height="60" width="60"/></div><div><p class="B"> // Garry Doe,Producer</p></div><div><p class="A">Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do<br>eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut<br>enim ad minim veniam,quis nostrud.</p></div><div class="logo5"><img src="Photo/F2.jpg" height="60" width="60"/></div><div><p class="C">Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do<br>eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut<br>enim ad minim veniam,quis nostrud.</p></div><div><p class="D"> // Garry Doe,Producer</p></div>
</div><div class="bodyfive"><div><p class="K">Recent Posts</p></div><div class="logo6"><img src="Photo/01-s3.jpg" height="240" width="399"/></div><div><p class="acm">Post Title Example</p></div><p class="adb">posted on <span style="color:#dc4545">April,15</span> by <span style="color:#dc4545">admin</span></p><p class="RNG">Mauris lobritis vehicula ultricies.Cum sociisnatoque penaatibus et<br>magnis dis parturientmontes,nascetur ridiculus mus.Nunc tellus<br>nisi,pharetra id elementum non,aliquam vel tellus.</p><p class="TL">25 comments //397 views</p><nav><a class="button3" href="#1">READ MORE</a></nav><p class="FPX">Post Title Example</p><div class="logo7"><img src="Photo/01-s2.jpg" height="100" width="160"/></div><p class="flash">posted on <span style="color:#dc4545">April,15</span> by <span style="color:#dc4545">admin</span></p><p class="IG">Mauris lobritis vehicula ultricies.Cum sociis<br>natoque penaatibus et magnis dis parturient<br>montes,nascetur ridiculus mus.</p><p class="OK">25 comments //397 views</p><P CLASS="JDG">- - - - - - - - - - - - - - - - - - - - - - - - - - - -- - - - - - - - - - - - - - - - - - - - - - - - -</P><div class="logo8"><img src="Photo/s4.jpg" height="100" width="160"/></div><div><p class="CTF">Post Title Example</p></div><p class="player">posted on <span style="color:#dc4545">April,15</span> by <span style="color:#dc4545">admin</span></p><p class="LPL">Mauris lobritis vehicula ultricies.Cum sociis<br>natoque penaatibus et magnis dis parturient<br>montes,nascetur ridiculus mus.</p><p class="LCK">25 comments //397 views</p><p class="JK">View all posts</p></div><div class="bodysix"><div class="end"><input type="text" value="Enter Your Email Address" style=" font-size:15px;color:#5a6066;border-radius:3px;width: 300px ;height: 40px"></div><p class="CF">About</p><p class="NZ">Recent tweets</p><p class="JS">Etiam cursus libero in libero consequat<br>consequat,Nullam fringilla sapien massa.Nam<br>velit nisl,bibendum at placerat at,pretium sed<br>magna.</p><nav><a class="button4" href="#1">SEND THE SPEC</a></nav><p class="LJ"><span style="color: #dc4545">@bestwebsoft</span>velit,vitae tincidunt orci.Proin<br>vitae auctor lectus.<span style="color: #dc4545">http://bestwebsoft.com/</span></p><p class="NS">posted 2 days ago</p><p class="SF"><span style="color: #dc4545">@bestwebsoft</span>velit,vitae tincidunt orci.Proin<br>vitae auctor lectus.<span style="color: #dc4545">http://bestwebsoft.com/</span></p><p class="COOL">posted 2 days ago</p><p class="beg" >Newsletter Signup</p><p class="last">Etiam cursus libero in libero consequat<br>consequat.</p><nav><a class="button5" href="#1">SUBMIT</a></nav>
</div><div class="bodyseven"><div class="logo12"><img src="Photo/01-e1.jpg" height="86" width="146"/></div><div class="logo13"><img src="Photo/01-e2.jpg" height="48" width="301"/></div><div ><p class="Z"> <span style="color:#999999 ">Design with love by</span> <span style="color: #1e2831">BestWebSoft</span></p></div>
</div>
</body>
</html>
Dec.css
*{margin:0;padding: 0;/*边缘消失*/
}
body{background-color: #f8f8f8;width: 1200px;height: 2250px;margin: 0 auto;/*上下间距设计*/
}
.header{width: 100%;height: 88px;background-color: #2a3743;
}
/*！！！第一部分*/
/*图片*/
.logo{position: relative;top:20px;float: left;margin-left: 120px;
}
.nav ul{margin:0 auto;width: 1000px;height: 50px;
}
/*菜单四个标签栏*/
.nav ul li{list-style: none;float: left;
}
.nav ul li a:link,.nav ul li a:visited{display: block;text-decoration: none;text-align:center;line-height: 92px;width: 110px;height: 70px;font-size:18px;color:#FFFFFF;}
.nav ul li a:hover,.nav ul li a:active{background-color: #404b56;
}
/*菜单第五个标签栏*/
.But ul li{list-style: none;float: right;
}
.But ul li a:link,.But ul li a:visited{display:block;font-size:18px;text-decoration: none;margin-right: 96.5px;color:#FFFFFF;width: 115px;height: 25px;position: relative;top: -18px;
}
.But ul li a:hover,.But ul li a:active{background-color: #404b56;
}
/*！！！第二部分*/
.bodyone{margin: 0 auto;width: 1200px;height: 361px;background-color:#3b4e5f;
}
/*图片*/
.logo1{position: relative;top:54px;float: left;margin-left: 120px;
}
.content1{position: absolute;top:130px;left: -1px;
}
.content2{position: absolute;top:271.8px;right:600px;
}
.content3{position: absolute;top:271.5px;right:260px;
}
/*第一个框中字体和标题*/
.title1{font-size:15px;color:white;position:relative;top: 16px;float:left;margin-left: 43px;
}
.character1{font-size: 15px;color:#999999;position: relative;top:25px;float:left;margin-left:19px;
}
/*第二个框中字体和标题*/
.title2{color:#FFFFFF;font-size: 15px;position:relative;top:16px;float:left;margin-left: 43px;}
.character2{font-size: 15px;color:#999999;position: relative;top:25px;float:left;margin-left:19px;
}
/*第三个框中字体和标题*/
.title3{color:#FFFFFF;font-size: 15px;position:relative;top:16px;float:left;margin-left: 43px;}
.character3{font-size: 15px;color:#999999;position: relative;top:25px;float:left;margin-left:19px;
}/*！！！第三部分*/
.bodytwo{margin: 0 auto;width: 1200px;height: 80px;background-color: #fdfdfd;
}
.logo2{position:relative;top:20px;float:left;margin-left:119px;
}
.button1:link,.button1:visited{position: absolute;text-decoration: none;margin-left: 225px;margin-top: 20px;padding: 10px 18px;font-weight: bold;font-size: 13px;color:white;background-color: #dd4747;border-radius:5px; /*设置圆弧*/box-shadow: 0px 2px 2px #888888;border-style: solid;border-color:#bf3c3c;border-top-color: #e77c7c;
}
.S{color:#dddddd;font-weight: bold;font-size: 15px;position: relative;top:30px;right:-377px;
}
.button2:link,.button2:visited{position:absolute;text-decoration: none;margin-left: 409.5px;margin-top: 2.0px;padding: 10px 18px ;/*内置文字到边框的距离*/font-weight: bold;font-size: 13px;color:white;background-color: #4398db;border-radius:5px; /*设置圆弧*/box-shadow: 0px 2px 2px #888888;/*设置阴影*/border-style: solid;border-color:#4398db;border-top-color: #59a8e1;
}/*！！！第四部分*/
.bodythree{margin:0 auto;width:1200px;height:370px;background-color: #e7e9eb;
}
.T{font-weight: bold;font-size: 15px;color:#5a6066;postion:relative;float:left;line-height: 120px;margin-left: 120px;
}
.logo3{position:absolute;top:18px;float:left;line-height: 1560px;margin-left:120px;
}
.R{font-size: 14px;font-weight: bold;color:#999999;position:absolute;margin-top: 292px;margin-left: 120px;
}
.P{font-size: 15px;font-weight: bold;color:#5a6066;position: relative;float:right;line-height: 124px;margin-right: 570px;
}
.L{font-size: 15px;font-weight: bold;color:#999999;position:relative;float: right;line-height: 126px;margin-right: -623px;
}
.a1{width:400px;height:200px;overflow-y:hidden; /*只出现水平滚动条*/position: relative;margin-top:-34px;float:right;margin-right: 320px;
}
.a2{width:400px;height:200px;position: relative;margin-top:-200px;float:right;margin-right: 159px;
}
.a3{width:400px;height:200px;position: relative;margin-top:-200px;float:right;margin-right: -2px;
}
.a4{width:400px;height:200px;position: relative;margin-top:-200.5px;float:right;margin-right: -162px;
}
.a5{width:400px;height:200px;position: relative;margin-top:-100.25px;float:right;margin-right: -162px;
}
.a6{width:400px;height:200px;position: relative;margin-top:-100px;float:right;margin-right: -240px;
}
.a7{width:400px;height:200px;position: relative;margin-top:-100px;float:right;margin-right: -240px;
}
.a8{width:400px;height:200px;position: relative;margin-top:-100px;float:right;margin-right: -238px;
}/*第五部分*/
.bodyfour{margin:0 auto;width:1200px;height:358px;background-color: #fdfdfd;
}
.W{font-size: 15px;font-weight: bold;color:#6f7479;line-height: 135px;position: relative;left: 120px;
}
.TF{position:relative;top:-44px;float:left;margin-left:120px;
}
.J{font-weight: bold;font-size: 15px;color:#5a6066;postion:relative;float:left;margin-left: 30px;margin-top: -46px;
}
.Q{font-weight: bold;font-size: 15px;color:#999999;postion:relative;float:right;margin-right: 780px;line-height: 150px;margin-top: -52.5px;
}
.logo4{position:absolute;top:980px;margin-left: 590px;
}
.B{position: absolute;font-size:15px;font-weight: bold;top:1056px;margin-left: 668px;color:#999999;
}
.A{position:absolute;top:980px;margin-left: 668px;color:#5a6066;font-size: 15px;font-weight: bold;
}
.logo5{position:absolute;top:1124px;margin-left: 590px;
}
.C{position: absolute;font-size:15px;font-weight: bold;top:1125px;color:#5a6066;margin-left: 668px;
}
.D{position: absolute;font-size:15px;font-weight: bold;top:1200px;color:#999999;margin-left: 668px;
}
/*第六部分*/
.bodyfive{margin: 0 auto;width:1200px;height:612px;background-color: #e5e7e9;
}
.K{position: absolute;font-size:15px;font-weight: bold;top:1320px;color:#a2a6a9;margin-left: 120px;
}
.logo6{position:absolute;top:1350px;margin-left: 120px;
}
.acm{position: absolute;font-size:15px;font-weight: bold;top:1610px;color:#373f47;margin-left: 120px;
}
.adb{position: absolute;font-size:15px;font-weight: bold;top:1635px;color:#5a6066;margin-left: 120px;
}
.RNG{position: absolute;font-size:15px;font-weight: bold;top:1665px;color:#454c52;margin-left: 120px;
}
.TL{position: absolute;font-size:15px;font-weight: bold;top:1750px;color:#5a6066;margin-left: 120px;
}
.button3:link,.button3:visited{position:absolute;text-decoration: none;margin-left: 405px;top: 1735px;padding: 12px 18px ;/*内置文字到边框的距离*/font-weight: bold;font-size: 15px;color:white;background-color: #db4343;border-radius:5px; /*设置圆弧*/box-shadow: 0px 2px 2px #888888;/*设置阴影*/border-style: solid;border-color:#bf3c3c;border-top-color: #e77c7c;
}
.FPX{position: absolute;font-size:15px;font-weight: bold;top:1350px;color:#373f47;margin-left: 770px;
}
.logo7{position:absolute;top:1350px;margin-left: 590px;
}
.flash{position: absolute;font-size:15px;font-weight: bold;top:1370px;color:#5a6066;margin-left: 770px;
}
.IG{position: absolute;font-size:15px;font-weight: bold;top:1405px;color:#454c52;margin-left: 770px;
}
.OK{position: absolute;font-size:15px;font-weight: bold;top:1480px;color:#5a6066;margin-left: 770px;
}
.JDG{color:#5a6066 ;position: absolute;top:1540px;margin-left: 590px;
}
.logo8{position:absolute;top:1585px;margin-left: 590px;
}
.CTF{position: absolute;font-size:15px;font-weight: bold;top:1585px;color:#373f47;margin-left: 770px;
}
.player{position: absolute;font-size:15px;font-weight: bold;top:1610px;color:#5a6066;margin-left: 770px;
}
.LPL{position: absolute;font-size:15px;font-weight: bold;top:1645px;color:#454c52;margin-left: 770px;
}
.LCK{position: absolute;font-size:15px;font-weight: bold;top:1715px;color:#5a6066;margin-left: 770px;
}
.JK{position: absolute;font-size:15px;font-weight: bold;top:1320px;color:#5a6066;margin-left: 990px;
}/*第七部分*/
.bodysix{margin: 0 auto;width:1200px;height:287px;background-color:#fbfbfb;
}
.end{position: absolute;font-weight: bold;top:2005px;margin-left: 775px;
}
.CF{position: absolute;font-size:18px;font-weight: bold;top:1925px;color:#373f47;margin-left: 120px;
}
.NZ{position: absolute;font-size:18px;font-weight: bold;top:1925px;color:#373f47;margin-left: 450px;
}
.JS{position: absolute;font-size:15px;font-weight: bold;top:1950px;color:#454c52;margin-left: 120px;
}
.button4:link,.button4:visited{position: absolute;text-decoration: none;margin-left: 120px;top: 2050px;padding: 11px 18px;font-weight: bold;font-size: 13px;color:white;background-color: #dd4747;border-radius:5px; /*设置圆弧*/box-shadow: 0px 2px 2px #888888;border-style: solid;border-color:#bf3c3c;border-top-color: #e77c7c;
}
.LJ{position: absolute;font-size:15px;font-weight: bold;top:1950px;color:#454c52;margin-left: 450px;
}
.NS{position: absolute;font-size:15px;font-weight: bold;top:2010px;color:#454c52;margin-left: 450px;
}
.SF{position: absolute;font-size:15px;font-weight: bold;top:2055px;color:#454c52;margin-left: 450px;
}
.COOL{position: absolute;font-size:15px;font-weight: bold;top:2105px;color:#454c52;margin-left: 450px;
}
.beg{position: absolute;font-size:18px;font-weight: bold;top:1925px;color:#454c52;margin-left: 770px;
}
.last{position: absolute;font-size:15px;font-weight: bold;top:1956px;color:#454c52;margin-left: 770px;
}
.button5:link,.button5:visited{position:absolute;text-decoration: none;margin-left: 770px;top: 2058px;padding: 10px 20.5px ;/*内置文字到边框的距离*/font-weight: bold;font-size: 13px;color:white;background-color: #4398db;border-radius:4px; /*设置圆弧*/box-shadow: 0px 2px 2px #888888;/*设置阴影*/border-style: solid;border-color:#4398db;border-top-color: #59a8e1;
}/*第八部分*/
.bodyseven{margin:0 auto;width: 1200px;height: 86px;background-color:#f5f5f5;
}
.logo12{position:absolute;top:2175px;margin-left: 130px;
}
.logo13{position:absolute;top:2193px;margin-left: 768px;
}
.Z{position: absolute;font-size:15px;font-weight: bold;top:2208px;margin-left: 495px;
}
效果图：
点击下载
点击下载
