用Bootstrap制作响应式蛋糕网站：HTML、CSS、JavaScript、jQuery和Bootstrap的期末项目

/*通用类*/
* {
margin: 0;
padding: 0;
}
body {
margin: 0 auto;
line-height: 21px
}
img {
border: none;
max-width: 100%;
}
a {
cursor: pointer;
color: #333;
text-decoration: none;
outline: none;
}
em {
font-style: normal;
}
.lt {
float: left;
}
.rt {
float: right;
}
ul, li, h1, h2, h3, p {
padding: 0;
margin: 0;
list-style: none
}
ul {
list-style-type: none;
}
.clear {
clear: both
}
/*header 开始*/
header {
background: #e8d2ad;
border-bottom: 2px solid #f1f1f1;
}
header .logo {

height: 120px;
width: auto;
text-align:center;
margin: 0 auto;
}
header .logo img {
width: auto;
height: 100%;
}
header .nav {
float: left;
width: 100%;
text-align: center;
height: 40px;
line-height: 40px;
background:#d4ba8d;
}
header .nav a {
float: left;
width: 20%;
display: inline-block;
text-align: center;
color: #000; float:left;
font-size: 16px;
text-decoration:none
}
header .nav a:hover{ background:#996633}
.banner {
background-size: cover;
}
.banner img {
width: 100%;
display: block;
}
footer {
text-align: center;

background: #e8d2ad;
}
footer p {
height: 70px;
line-height: 70px;
}

.Title {
font-size: 32px;
color: #333;
text-align:center;

line-height: 50px;
margin: 20px 10px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.Title strong{ display:block; position:relative; top:20px; color:#ddd; font-size:44px}
.Title span{ position:relative; top:-10px; display:block}
.con .text {
font-size: 18px;
color: #333;
line-height: 26px;
}
.csf li h3{ margin:20px 0}
.csf{ padding-bottom:40px}
.csf p{ line-height:24px}
.con .text p {
margin: 0 0 10px 0;
}
.Part1{ padding-bottom:40px}
.Part1 .text{ margin:0 auto; max-width:800px; text-align:center; font-size:16px; line-height:30px;}
.part2 {
margin-bottom:0px;
}
.part2 li {
text-align: center;
margin-bottom: 30px;
}
.part2 li p {
font-size: 16px;
padding: 10px 0;
display: block;

}
.part2 li img {

}
.container {

}
.bj {
display: block;
width: 100%;
background: url(../images/bj.gif);
height: 40px;
margin-bottom: 20px;
}
.part3 li {
text-align: left;
}
.part3 li h3 {
font-size: 20px;
line-height: 40px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.part3 li p {
height: 420px;
padding: 10px;
line-height: 26px;
color: #333;
overflow: hidden;
font-size: 14px;
}
.part4 li {

margin-bottom: 20px;
text-align:center;
}
.text2{ max-width:500px; margin:0 auto}
.part4 { padding-bottom:40px}
.part4 li p{ margin:15px 0; margin-bottom:0}
.part4 li img {
width: 100%;
height: 100%;
object-fit: cover;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.tx h1{ padding-bottom:30px;}
.tx{ font-size:16px; line-height:30px}
.part4 li img:hover {
box-shadow: 0px 0px 15px #888888;
}
.form_con {
margin: 30px 0;
font-size: 16px;
}
.form_con .phone {
width:100%;
height: 36px;
padding: 0 15px;
box-sizing: border-box;
font-size: 14xp;
margin-bottom: 10px;
display: block;
}
.form_con .phone.oi {
height: 120px;
}
.form_con button {
width: 140px;
height: 36px;
background: #666;
border: none;
color: #fff;
}
@keyframes my1 {
0% {
transform:translate(0px, 0px)
}
50% {
transform:translate(0px, -20px)
}
100% {
transform:translate(0px, 0px)
}
}
.ditu {
position: relative;
}
.xiaoqi {
position: absolute;
width: 50px;
top: 30px;
left: 20%;
}
.xiaoqi img {
width: 100%;
}
.xiaoqi1 {
animation: my1 2s ease-in-out infinite;
-webkit-animation: my1 ease-in-out 2s infinite;
}
.xiaoqi2 {
position: absolute;
width: 50px;
top: 30%;
left: 30%;
animation: my1 2s ease-in-out infinite;
-webkit-animation: my1 ease-in-out 2s infinite;
}
.xiaoqi3 {
position: absolute;
width: 50px;
top: 60%;
left: 80%;
animation: my1 2s ease-in-out infinite;
-webkit-animation: my1 ease-in-out 2s infinite;
}
@media only screen and (max-width:1200px) {
}
@media only screen and (max-width:1000px) {
header .nav a {
font-size: 20px;
}
}
@media only screen and (max-width:746px) {
.row,.Title{ margin:0}.Part1 .text{ font-size:14px; line-height:22px}
.text2,.Part1 .text{ margin:10px}.Title strong{ font-size:30px}
header .nav {
width:100%;
height: 50px; display:flex;
line-height: 50px; text-align:center; justify-content:center;
}
header .logo {
height: 50px;
}
header .nav a {
font-size: 14px; float:none;
width:auto;
margin:0 5px;
}
.part2 li img {
height: auto;
}
.part4 li {
height: auto;
}
.Title{ font-size:20px;}
.text{ font-size:14px; line-height:26px;}
}