整体效果
html部分代码
CSS部分代码
* { margin: 0; padding: 0; } body { margin: 0 auto; font-size: 14px; background: url(../images/13.jpg) no-repeat fixed; background-size: 100% 100%; color: #333; position: relative; padding-top: 50px; padding-bottom: 50px; } img { border: none; } a { cursor: pointer; color: #333; text-decoration: none; outline: none; } ul { list-style-type: none; } div.clear { font: 0px Arial; line-height: 0; height: 0; overflow: hidden; clear: both; } .clearfix::after { content: ""; display: block; clear: both; } /*wrapin 主体容器宽度*/ .wrapin { width: 1000px; margin-left: auto; margin-right: auto; margin-top: -49px; margin-bottom: 110px; } header { height: 50px; background: #fff; } .nav li { background: #336699; line-height: 50px; float: left; width: 25%; text-align: center; font-size: 19px; } .nav li a { color: #fff; } .con { padding: 15px; background: rgb(233, 249, 250); } .top .text { float: left; width: 60%; line-height: 26px; } .top .pic { float: right; width: 38%; margin-top: 20px; } .top .texts { float: left; width: 38%; line-height: 26px; } .top .pics { float: right; width: 60%; margin-top: 20px; } .top .pic img { width: 100%; } footer { background: #282828; text-align: center; color: #fff; line-height: 50px; }