本篇文章给大家介绍一下实现简单网页的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
网页的大致效果
html代码
Design Our latest projects
@@##@@Lorem ipsum
Lorem ipsum dolor sit amet, conc tetu er adipi scing. Praesent ves tibuum molestie lacuiirhs. Aenean.
more@@##@@Lorem ipsum
Lorem ipsum dolor sit amet, conc tetu er adipi scing. Praesent ves tibuum molestie lacuiirhs. Aenean.
more@@##@@Lorem ipsum
Lorem ipsum dolor sit amet, conc tetu er adipi scing. Praesent ves tibuum molestie lacuiirhs. Aenean.
more@@##@@Lorem ipsum
Lorem ipsum dolor sit amet, conc tetu er adipi scing. Praesent ves tibuum molestie lacuiirhs. Aenean.
moreAbout Us
Perspiciatis unde omnis iste natus error sit voluptatem. Cum sociis natoque penatibus et magnis dis parturient montes ascetur ridiculus musull dui.
Lorem ipsumulum aenean noummy endrerit mauris. Cum sociis natoque penatibus et magnis dis parturient montes ascetur ridiculus mus. Null dui. Fusce feugiat malesuada odio.
read moreProjects
- Singapore Township
- Mega luxury Villas
- RNT Commercial Shopping Mall
- SVN Independent & Duplex Houses
- World wide IT park
- North Arena SNT Township
Our Clients
@@##@@
网页的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;}
推荐学习：html视频教程
以上就是如何实现简单网页的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1549838.html
微信扫一扫 
支付宝扫一扫 
