html+css簡單網頁練習
阿新 • • 發佈：2019-01-31
網頁的大致效果
html程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Design</title> <script type="text/javascript" src="js/conPanel.js"></script> <link rel="stylesheet" type="text/css" href="css/onLoad.css"> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> </head> <body> <!-- 導航條 --> <div id="navbar"> <img src="pic\logo.png" width="171px" height="50px" style="text-align: center;"> <div class="navbar_L" > <ul class="navbar_Ul"> <li>CONTACT</li> <li>PAGES▼</li> <li>PROJECTS</li> <li>PRICE</li> <li>SERVICES</li> <li>ABOUT</li> <li style="color: #ae130c;">HOME</li> </ul> </div> </div> <!-- 幻燈圖 --> <div class="ppt"> </div> <!-- Our latest projects --> <!-- bootstrap --> <div class="container"> <h2>Our latest projects</h2> <div class="pic_S"> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> <div class="picBox"> <div style=" width:244.5px height:160px "> <img src="pic/news1.jpg" width="100%" height=auto > </div> <div> <p class="pic_p1" >Lorem ipsum</p> <p class="pic_p1 pic_p2" > Lorem ipsum dolor sit amet, conc tetu er adipi scing. Praesent ves tibuum molestie lacuiirhs. Aenean. </p> <a class="more" href="#">more</a> </div> </div> </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> <div class="picBox"> <div style=" width:244.5px height:160px "> <img src="pic/news2.jpg" width="100%" height=auto > </div> <div> <p class="pic_p1">Lorem ipsum</p> <p class="pic_p1 pic_p2"> Lorem ipsum dolor sit amet, conc tetu er adipi scing. Praesent ves tibuum molestie lacuiirhs. Aenean. </p> <a class="more" href="#">more</a> </div> </div> </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> <div class="picBox"> <div style=" width:244.5px height:160px "> <img src="pic/news3.jpg" width="100%" height=auto > </div> <div> <p class="pic_p1" >Lorem ipsum</p> <p class="pic_p1 pic_p2" > Lorem ipsum dolor sit amet, conc tetu er adipi scing. Praesent ves tibuum molestie lacuiirhs. Aenean. </p> <a class="more" href="#">more</a> </div> </div> </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> <div class="picBox"> <div style=" width:244.5px height:160px "> <img src="pic/news4.jpg" width="100%" height=auto > </div> <div> <p class="pic_p1" >Lorem ipsum</p> <p class="pic_p1 pic_p2"> Lorem ipsum dolor sit amet, conc tetu er adipi scing. Praesent ves tibuum molestie lacuiirhs. Aenean. </p> <a class="more" href="#">more</a> </div> </div> </div> </div> </div> </div> <!-- footer --> <!-- bootstrap --> <div class="container"> <div class="row"> <div class="col-md-4"> <div style="padding: 0 15px"> <h2 class="h2_Fond">About Us</h2> <p class="p_p">Perspiciatis unde omnis iste natus error sit voluptatem. Cum sociis natoque penatibus et magnis dis parturient montes ascetur ridiculus musull dui.</p> <p class="p_p">Lorem ipsumulum aenean noummy endrerit mauris. Cum sociis natoque penatibus et magnis dis parturient montes ascetur ridiculus mus. Null dui. Fusce feugiat malesuada odio.</p> <a href="#" class="more" >read more</a> </div> </div> <div class="col-md-4"> <div style="padding: 0 15px"> <h2 class="h2_Fond">Projects</h2> <div class="fUl"> <ul > <li>Singapore Township</li> <li>Mega luxury Villas</li> <li>RNT Commercial Shopping Mall</li> <li>SVN Independent & Duplex Houses</li> <li>World wide IT park</li> <li>North Arena SNT Township</li> </ul> </div> </div> </div> <div class="col-md-4"> <div style="padding: 0 15px"> <h2 class="h2_Fond">Our Clients</h2> <div style="width:349px height:153px"> <img src="pic\text.png" width="100%" height=auto> </div> </div> </div> </div> </div> <!-- 最底部 --> <!-- bootstrap --> <div class="big"> <div class="container footerText"> <div class="row"> <div class="col-md-6 panel"> <div> <p> <a class="footerP" href="index.html">Home</a> | <a class="footerP" href="about.html">About</a> | <a class="footerP" href="services.html">Services</a> | <a class="footerP" href="price.html">Price</a> | <a class="footerP" href="projects.html">Projects</a> | <a class="footerP" href="contact.html">Contact</a> </p> </div> </div> <div class="col-md-6 panel"> <div> <p> Copyright © 2016.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" style="color: #aaa;" >模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="網頁模板" target="_blank" style="color: #aaa;">網頁模板</a> </p> </div> </div> </div> </div> </div> </body> </html>
網頁的css程式碼
body{ font-family: 'Lato', sans-serif; font-size: 14px; margin: 0; padding: 0; } /*bootstrap基本樣式*/ .container{ width: 1140px; margin:15px auto; padding-left: 15px; padding-right: 15px; } /*導航條*/ #navbar{ width: 1140px; height: 75px; margin: 0 auto; padding-top:25px; padding-left:15px; padding-right:15px; } .navbar_L{ display: inline-block; float: right; } .navbar_Ul{ display: inline-block; padding-left: 0; margin-bottom: 0; } .navbar_L li{ font-family: Oswald,sans-serif; font-size: 14px; font-weight: 400; color: #8A8A8A; display: inline-block; text-align: center; margin: 0 10px; float: right; } /*幻燈圖片*/ .ppt{ width: 1024px; height: 720px; margin: 20px auto; background-image: url(../pic/twoimg1.jpg); background-size:1920px 1200px; background-position:center; background-repeat: no-repeat; animation:ppta 5s; -moz-animation:ppta 5s; -webkit-animation:ppta 5s; -o-animation:ppta 5s; animation-iteration-count:300; -moz-animation-iteration-count:300; -webkit-animation-iteration-count:300; -o-animation-iteration-count:300; } @keyframes ppta { 0% {background-image: url(../pic/twoimg1.jpg);} 50% {background-image: url(../pic/twoimg2.jpg);} } @-moz-keyframes ppta { 0% {background-image: url(../pic/twoimg1.jpg);} 50% {background-image: url(../pic/twoimg2.jpg);} } @-webkit-keyframes ppta { 0% {background-image: url(../pic/twoimg1.jpg);} 50% {background-image: url(../pic/twoimg2.jpg);} } @-o-keyframes ppta { 0% {background-image: url(../pic/twoimg1.jpg);} 50% {background-image: url(../pic/twoimg1.jpg);} } /*Our latest projects*/ h2{ margin: 30px 0; font-family: Oswald,sans-serif; font-size: 30px; color:inherit; } .picBox{ border: 1px solid #D5D5D5; padding: 4px; } .pic_p1{ font-family:'Lato',sans-serif; font-size:14px; font-weight:700; margin-top:16px; } .pic_p2{ font-weight:normal; line-height: 1.4;" } .more{ font-family: 'Lato', sans-serif; color: #ae130c;font-size: 16px; font-weight: 600; text-decoration: none; } /*3排那個位置*/ .h2_Fond{ margin:30px 0; } .p_p{ font-family:'Lato',sans-serif; font-size: 14px; line-height: 1.3; margin-bottom: 9px; } .fUl ul{ font: 14px/1.2em 'Roboto', sans-serif; color: #ae130c; padding-left: 0; } .fUl li{ border-top: 1px solid #f2f2f2; padding: 6px 0 7px 30px; } /*圖層*/ /*最底部*/ .big{ width: 100%; background-color: #ae130c; padding-top: 10px ; } .footerText{ background-color: #ae130c; color: #aaa; font-size: 12px; } .footerP{ color: #aaa; padding: 4px 8px; } .footerP:hover { color: #fff; }