怎么实现简单html网页
短信预约 -IT技能 免费直播动态提醒
这篇文章主要介绍怎么实现简单html网页，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
html是什么
html的全称为超文本标记语言，它是一种标记语言，包含了一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体，html文本是由html命令组成的描述性文本，html命令可以说明文字，图形、动画、声音、表格、链接等，主要和css+js配合使用并构建优雅的前端网页。
网页的大致效果
html代码
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Design</title><script type="text/javascript" class="lazy" data-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 class="lazy" data-src="pic\logo.png" width="171px" height="50px" style="text-align: center;"><div ><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> </div> <!-- Our latest projects --><!-- bootstrap --><div><h3>Our latest projects</h3><div><div><div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"><div><div style=" width:244.5px height:160px "><img class="lazy" data-src="pic/news1.jpg" width="100%" height=auto ></div><div><p >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 href="#">more</a></div></div></div><div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"><div><div style=" width:244.5px height:160px "><img class="lazy" data-src="pic/news2.jpg" width="100%" height=auto ></div><div><p>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 href="#">more</a></div></div></div><div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"><div><div style=" width:244.5px height:160px "><img class="lazy" data-src="pic/news3.jpg" width="100%" height=auto ></div><div><p >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 href="#">more</a></div></div></div><div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"><div><div style=" width:244.5px height:160px "><img class="lazy" data-src="pic/news4.jpg" width="100%" height=auto ></div><div><p >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 href="#">more</a></div></div></div></div></div></div> <!-- footer --><!-- bootstrap --><div><div><div><div style="padding: 0 15px"><h3>About Us</h3><p>Perspiciatis unde omnis iste natus error sit voluptatem. Cum sociis natoque penatibus et magnis dis parturient montes ascetur ridiculus musull dui.</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="#" >read more</a></div></div><div><div style="padding: 0 15px"><h3>Projects</h3><div><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><div style="padding: 0 15px"><h3>Our Clients</h3><div style="width:349px height:153px"><img class="lazy" data-src="pic\text.png" width="100%" height=auto></div></div> </div></div></div> <!-- 最底部 --><!-- bootstrap --><div><div class="container footerText"><div><div class="col-md-6 panel"><div><p><a href="index.html">Home</a> | <a href="about.html">About</a> |<a href="services.html">Services</a> |<a href="price.html">Price</a> |<a href="projects.html">Projects</a> |<a 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;}.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);}}h3{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;}.h3_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;}以上是“怎么实现简单html网页”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网行业资讯频道！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341