1.网页效果图2，网站首页代码：<!

1.网页效果图

2，网站首页代码：

开心营业♡

.banner_slide {width: 100%;height: 300px;}#audio {position: fixed;left: 0;top: 0;z-index: 888}

var swiper = new Swiper(.swiper-container, {pagination: {el: .swiper-pagination,

},autoplay: {delay: 2500,disableOnInteraction: false,}});

3.网站css代码： .dl_block{ line-height: 40px; } .dl_block dd{ width: 120px; margin-right: 20px; float: left; font-size: 15px; text-align: right; } .dl_block dt{ width: 240px; float: left; text-align: left; font-size: 14px; } .dl_block dt .block_input{ border: 1px solid #ddd; min-width: 100px; height: 30px; line-height: 30px; padding:0 5px; } .login_box h2{ padding: 0px 0 10px 170px; text-align:left } .dl_block{ padding: 10px 0; } .dl_block dt .sex{ padding-right: 10px; } .school_p{ text-align:center } .btn_submit{ padding: 5px 20px; background: #FFEA6F; color: #372412; } body { margin: 0; padding: 0; background: #372412 url(../images/img01.gif) repeat-x; font-size: 13px; color: #FFFFFF; } body, th, td, input, textarea, select, option { font-family: Arial, Helvetica, sans-serif; } h1, h2, h3 { text-transform: lowercase; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: normal; color: #FFFFFF; } h1 { letter-spacing: -2px; font-size: 3em; } h2 { letter-spacing: -1px; font-size: 2em; } h3 { font-size: 1em; } p, ul, ol { } blockquote { padding-left: 1em; } blockquote p, blockquote ul, blockquote ol { line-height: normal; font-style: italic; } a { color: #FFEA6F; } a:hover { text-decoration: none; } img { border: none; } .page_p{ text-align:left; text-indent:2em; } /* Header */ #header { width: 830px; height: 280px; margin: 0 auto; background: url no-repeat; } /* Logo */ #logo { height: 130px; background: url(../images/img07.gif) no-repeat top 20px left 0; } #logo h1 { padding: 40px 40px 0 50px; letter-spacing: -2px; font-size: 38px; } #logo h2 { float: right; padding: 68px 0 0 0; font-size: 24px; } #logo a { text-decoration: none; color: #372412; } /* Gallery */ #gallery { clear: both; width: 830px; height: 300px; margin: 0 auto; } #top-photo h2 { height: 1.4em; font-size: 1em; } #top-photo p { margin: 0; padding: 0 0 10px 0; } /* Menu */ #menu { width: 830px; height: 70px; background: url(../images/img03.jpg) no-repeat; } #menu ul { margin: 0; padding: 0; list-style: none; } #menu li { display: inline; } #menu a { display: block; float: left; width: 138px; height: 73px; padding-top: 35px; text-transform: lowercase; text-decoration: none; text-align: center; letter-spacing: -1px; font-size: 24px; color: #FFFFFF; } #menu a:hover { background: url(../images/img09.jpg) no-repeat; background-size:100% 80px; color: #FFFFFF; } #menu .active a { background: url(../images/img09.jpg) no-repeat; background-size:100% 80px; color: #372412; } /* Page */ #page { width: 830px; margin: 0 auto; padding: 20px 0; } /* Content */ #content { float: left; width: 532px; } .post { padding: 0 0 20px 0; } .title { margin: 0; border-bottom: 2px solid #4A3903; margin-bottom:20px } .byline { margin: 10px 0; } .meta { border-top: 1px solid #4A3903; text-align: right; color: #646464; } .meta a { padding-left: 15px; background: url(../images/img06.gif) no-repeat left center; font-weight: bold; } /* Sidebar */ #sidebar { float: right; width: 240px; } #sidebar ul { margin: 0; padding: 0; list-style: none; } #sidebar li { } #sidebar li ul { padding: 15px 0; } #sidebar li li { padding-left: 30px; border-bottom: 1px dotted #4A3903; background: url(../images/img06.gif) no-repeat 15px 50%; } #sidebar h2 { margin: 0; padding: 20px 0 2px 30px; background: url(../images/img05.gif) no-repeat left bottom; border-bottom: 2px solid #4A3903; } #sidebar a { text-decoration: none; } #sidebar a:hover { text-decoration: underline; } /* Footer */ #footer { clear: both; padding: 20px 0; background: #FFEA6F; border-top: 3px solid #E8AD35; text-align: center; font-size: smaller; color: #E8AD35; } #footer a { color: #C28C21; } .fl{ float:left; } .fr{ float:right } .clear{ clear:both; } .about_imgfl{ width: 255px;} .about_txt{ width: 400px; margin-left:40px; text-align: left; line-height: 20px; font-size: 16px; } .about_fr{ width: 275px; background: #fff; padding: 10px; box-sizing: border-box; } .about_fr h2{ padding-bottom: 10px;} .about_fr p{ text-align: left; line-height:20px } .ul_dy{ margin: 40px auto 0 0; -webkit-padding-start:0 } .ul_dy li{ width: 250px; float: left; margin-bottom: 20px; margin-right:40px; } .ul_dy li:nth-child(3n){ margin-right:0 } .ul_dy li a{ color:#fff; text-decoration:none } .ul_dy li .dy_img{ width: 250px; height: 230px; background:#fff;} .ul_dy li .dy_img:hover{ opacity: 0.8; } .ul_dy li .til{ padding: 10px 0; } .ul_dy li .til .fl{ color: #F40; font-size: 16px; font-weight: bold; } .ul_dy li .til .fr{ color: #999; font-size: 12px; } .ul_dy li .til:hover{ color: #2B7ACD; } .ul_dy li .p_txt{ text-align: left; overflow: hidden; padding-bottom: 10px; } .dl_contact{ text-align: left; } .dl_contact dd{ font-size: 18px; line-height: 40px; font-weight: bold; padding-left:0; -webkit-margin-start: 0px; padding-top:20px; } .dl_contact dt{ font-size: 16px; line-height: 30px; } .compay_services_block{ position: relative; padding: 25px 0; border-bottom: 1px solid #eee;} .compay_services_block .compay_services_blockImg{ position: absolute; left:0; top:30px; display: table-cell; text-align:center; vertical-align: middle;} .compay_services_block .compay_services_blockImg img{ overflow: hidden; } .compay_services_block .compay_services_blockImg img:hover{ -webkit-transform:scale(1.2); -moz-transform:scale(1.2); transform:scale(1.2); transition: all 0.6s ease; } .dl_compay_services dt.dl_compay_services_til{ font-size: 18px; line-height: 40px; font-size: 16px; color: #1F1F1F;} .dl_compay_services dt.dl_compay_services_til a:hover{ } .dl_compay_services dd{ color:#fff; margin-top: 10px; -webkit-margin-start: 0px;} .dl_compay_services dd.dd1{ word-break:break-all; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .dl_compay_services dd.dd2{ line-height: 30px; } .compay_services_block .dl_compay_services{ padding-left: 330px; text-align: left;} .dl_compay_services dd.dd2 a:nth-child(1){ margin-left: 0;} .dl_compay_services dd.dd2 span,.dl_compay_services dd.dd2 a{ color: #fff; margin: 0 10px; } .dl_compay_services dd.dd2 span.zeng_color{ color:#fff;} /*.compay_servicesBox{ padding: 20px 0;}*/ .compay_services_block .compay_services_blockImg{ width: 240px; height: 160px; overflow: hidden;} .compay_services_block .compay_services_blockImg img{ max-width: 240px; max-height: 160px; } .compay_services_block .dl_compay_services{ padding-left: 270px;} .compay_services_block{ min-height: 160px; }