网页布局模板代码,网页设计模板-如何制作网页模板

网页布局模板代码,网页设计模板-如何制作网页模板详细介绍

*{margin: 0;padding: 0;font-size: 14px;} body{background: #fafafa;} .demo{width: 1000px;margin: auto;background: #fff;min-height: 100vh;} .banner{height: 200px;background: #4c9cef;} .nav{height: 40px;background: #42b983;text-align: right;} .nav-list{list-style: none;} .nav-list li{display: inline-block;line-height: 40px;padding: 0 20px;position: relative;color: #fff;font-weight: bold;} .nav-list li:after{content: "";width: 1px;height: 16px;display: block;background: rgba(255,255,255,.5);position: absolute;left: 0;top: 12px;overflow: hidden;} .nav-list li:first-child:after{content: none;} .left{width: 760px;height: 300px;float: left;background: #f7dfbe;padding: 20px;} .right{width: 160px;height: 300px;float: right;background: #ff9900;padding: 20px 20px 20px 20px;} .box{margin-bottom: 20px;background: rgba(255,255,255,.5);padding: 10px;} .box:last-child{margin-bottom: 0;} .box h4{margin-bottom: 10px;} .box ul{list-style: none;} .clear{clear: both;}