html+css 小案例（一）
生活随笔
收集整理的這篇文章主要介紹了
html+css 小案例（一）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 點擊下載
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; }效果圖：
點擊下載
點擊下載
總結
以上是生活随笔為你收集整理的html+css 小案例（一）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 绿本上的功率和车的功率不符怎么回事？
- 下一篇： 软中断和硬中断的区别