1,图片完成效果
2,代码区
<html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .daohang{ background-color: #F4F4F4; height: 35px; font-size: 14px; position: relative; color: gray; } .daohang li{ position: relative; float: left; } .daohang ul{ float: right; position: absolute; right: 40px; top: -7px; } .daohang02{ position: absolute; left: 40px; top: 7px; float: left; } .daohang01{ height: 5px; width: 9px; display: inline-block; background-image: url("images/t_arrow.gif"); } .daohang01,.daohang li,.daohang ul li:last-child img{ vertical-align: middle; } #kk a{ color: #000000; text-decoration: none; } .daohang031{ background-color: #FFFFFF; border: 1px solid #eaeaea; margin-top:12px; width: 100px; } .daohang a{ text-decoration: none;/* 去除下划线 */ color: gray; } .daohang ul li:nth-of-type(1) a:nth-of-type(2){ color: orangered; } li{ list-style-type: none; /* 去除列表样式 */ } .sousuo{ content: ''; display: block; clear: both; width: 1500px; height: 100px; margin: 0px auto; margin-top: 30px; } .sousuo01{ margin-left: 60px; float: left; } .sousuo011{ width: 500px; height: 60px; margin: 0px auto; position: relative; top: 10px; } .sousuo02 input:nth-of-type(1){ height: 35px; width: 400px; border: 2.5px solid red; vertical-align: middle;/* 样式垂直居中的用法 */ } .sousuo02 input:nth-of-type(2){ height: 42px; width: 90px; vertical-align: middle;/* 样式垂直居中的用法 */ border: 0px; background-color: red; color: #FFF; font-size: 16px; } .sousuo021 li{ font-size: 12px; float: left; margin-left: 20px; } .sousuo021 ul{ position: absolute; top: 25px; left: -55px; } .sousuo021 a{ text-decoration: none; /* 去除下划线 */ color: black; } .sousuo03{ border: 1px solid gainsboro; width: 120px; height: 45px; margin-top: -50px; margin-right: 70px; text-align: center; background: #f6f6f6 url("images/car.png") no-repeat 10px center; float: right; } .sousuo031{ margin-top: 10px; margin-left: 5px; } .sousuo031 a{ text-decoration: none; /* 去除下划线 */ color: black; } section{ width: 1200px; margin: 0px auto; } .section01{ height: 40px; width: 100%; position: relative; border-bottom: 2px solid orangered; } .section01 span:nth-of-type(1){ height:80%; display: block; width:220px; padding-top: 10px; color: #FFFFFF; background-color: orangered; } .section01 ul{ position: absolute; top: -6px; left: 200px; } .section01 li{ font-weight: bold; float: left; margin-right: 30px; } .section01 a{ text-decoration: none; /* 去除下划线 */ color: black; } .section01 li:nth-of-type(1) a{ color: orangered; } .section01 li:nth-of-type(2) a{ color: orangered; } .section01 img{ position: absolute; top: 7px;; right:0px; } .section02{ height: 410px; width: 100%; } .section021 ul{ float: left; margin-top: 0px; width: 180px; background-color: #a60518; } .section021 li{ font-size: 14px; color: #FFFFFF; line-height:40px; margin-left: -30px; position: relative; } .section021 .nav02{ width: 20px; height: 35px; text-align: center; vertical-align: middle; /* 样式垂直居中的用法 */ display: inline-block; margin-right: 8px; } .section021 .nav01{ position: absolute; right: 5px; top: 16px; } .section021 a{ text-decoration: none; /* 去除下划线 */ color: #FFFFFF; } .section022{ margin-left: 10px; float: left; width: 700px; height: 400px; position: relative; } .section022 .datu{ width: 100%; height: 100%; } .jiantou{ position: absolute; top: 170px; } .jiantou2{ position: absolute; top: 170px; left: 668px; } .section022 li{ width: 20px; height: 20px; border-radius: 50%; background-color: #919190; text-align: center; float: left; margin-left: 10px; } .section022 ul{ position: absolute; left: 250px; bottom: 0px; } .section023{ float: right; width: 200px; height: 97%; border: 1px solid #eaeaea; } .section0231{ height: 40px; border-bottom: 1px dotted #eaeaea; } .section0231 span:nth-of-type(1){ font-size: 17px; float: left; margin-top: 7px; margin-left: 7px; font-weight: bold; } .section0231 span:nth-of-type(2){ margin-top: 10px; margin-right: 6px; font-size: 13px; float: right; } .section0231 a{ color: gray; text-decoration: none; /* 去除下划线 */ } .section0232 li{ line-height: 30px; margin-left: -35px; } .section0232{ font-size: 12px; padding-bottom: 10px; border-bottom: 1px solid #eaeaea; } .section0232 a{ text-decoration: none; /* 去除下划线 */ color: gray; } .section0233{ height: 35px; border-bottom: 1px dotted #eaeaea; } .section0233 span{ font-size: 17px; font-weight: bold; display: block; margin-left: 8px; padding-top: 6px; } .section0234 p{ color: #747473; font-size: 12px; margin-left: 10px; margin-top: 4px; } .section0234 img{ height: 95%; width: 90%; margin-top: -8px; margin-left: 10px; } .section03{ margin-top: 10px; margin-bottom:20px; width: 100%; height: 220px; } .section031{ position: relative; display: inline-block; height: 100%; width: 220px; background-color:#d8eefc; text-align: center; overflow: hidden; } .section031 span:nth-of-type(1){ background-color: red; color: #FFFFFF; } .section031 span:nth-of-type(2){ font-size: 12px; color: red; } .section031 div:nth-of-type(1){ width: 100%; overflow: hidden; } .section032{ position: relative; float: right; height: 100%; } .section032>div{ position: relative; display: block; height: 100%; width: 240px; float: left; border: 1px solid #eaeaea; text-align: center; } .section032>div:nth-of-type(1){ border-right: none; } .section032>div:nth-of-type(2){ border-right: none; } .section032>div:nth-of-type(3){ border-right: none; } .section032>div div:nth-of-type(1){ width: 100%; height: 65%; overflow: hidden; } .section032 img{ margin-top: 5px; } .section032 p{ line-height: 4px; } .section032 a{ color: gray; text-decoration: none; /* 去除下划线 */ } .section0321{ color: rgba(21, 21, 20, 0.95); font-weight: bold; } .section0322{ color: gray; font-size: 12px; } .section0323{
