/*为页面中以下元素设置字体为Microsoft YaHei*/
body,button, input, select, h3, h6 { font-family: Microsoft YaHei}
/*header部分*/
.head-top{
background: #5fa022;
padding: 0.8em 0;
}
.navbar-brand{
padding: 0 0;
}
/*设置图片logo的大小和位置*/
.navbar-brand>img{
height: auto;
margin-right: 5px;
margin-top: 5px;
width: 250px;
}
/*设置整个导航菜单的内边距、背景色和阴影*/
.navbar-default{
padding: 1.5em 0;
background-color: #f2f0f1;
box-shadow: 12px -5px 39px -12px;
}
/*设置导航栏中菜单a链接的样式*/
.navbar-default .navbar-nav>li a {
top: 10px;
padding: 0.5em 3em;
text-decoration: none;
font-weight: 600;
font-size: 1.2em;
color:#919191;
}
/*设置导航栏菜单的鼠标悬停和获取焦点时的状态*/
.navbar-default .navbar-nav> li >a:hover,
.navbar-default .navbar-nav> li >a:focus {
background:#D96B66;
color: white;
border-radius: 3px;
-webkit-border-radius: 3px;
}
/*设置导航栏右侧a链接(0.00)的颜色*/
.navbar-right>a{
color:#D96B66;
}
/*媒体查询:当视口小于970px时,导航菜单字体变小,避免了换行的问题*/
@media (max-width: 970px) {
.navbar-default .navbar-nav>li a {
font-size: 1.1em;
}
}
/*header部分结束*/
/*搜索模块*/
/*设置搜索按钮前面的搜索图标*/
.search{
background-image: url(../images/banner.jpg);
background-size: cover;
-webkit-background-size: cover;
min-height: 600px;
margin-top: -20px;
}
/*设置搜索框外层div样式,形成白色透明背景*/
.reservation {
padding: 60px 60px;
width:50%;
background: rgba(255, 255, 255, 0.7);
margin: 0 auto;
margin-top:15%;
font-weight: 500;
color: #f2f0f1;
font-size: 1.2em;
outline: none;
}
/*设置搜索按钮的样式*/
.btn{
width: 50% ;
background: #D96B66;
color: #fff;
padding: 5px;
border: none;
border-radius: 4px;
-webkit-border-radius: 4px;
}
.form-control{
color: #8e908d;
}
.searchbtn{
text-align: center;
}
/*媒体查询:当屏幕小于768像素时搜索表单白色背景大小发生变化*/
@media (max-width: 768px){
.reservation {
padding: 20px 20px;
width: 90%;
}
}
/*搜索模块结束*/
/*热卖商品*/
.hot h3 {
margin-top: -20px;
color: #1A1A1A;
font-size: 1.5em;
font-weight: 600;
margin: 0 0 1em;
padding: 0 0 0.5em;
border-bottom: 2px solid #eee;
}
.hot p {
color: #5fa022;;
font-size: 1em;
font-weight: 400;
line-height: 1.8em;
margin: 1em 0;
}
.hot {
padding: 3em 0;
border: 1px solid #eee;
margin: 0 0;
}
.hot h6 {
color: #C15162;
font-size: 1.5em;
font-weight: 400;
margin: 0.3em 0;
}
a.morebtn {
display: block;
font-size: 1em;
color: #FFF;
text-decoration: none;/*去掉a链接下划线*/
font-weight: 400;
background: #D96B66;
padding: 10px 18px;
transition: 0.5s all ease;
-webkit-transition: 0.5s all ease;
border-radius: 3px;
-webkit-border-radius: 3px;
}
a.morebtn:hover{
background: #5fa022;
}
@media (max-width: 1024px) {
a.morebtn{
max-width:410px;/*当视口小于1024px时按钮的最大宽度*/
}
}
/*热卖商品结束*/
/*特色推荐*/
/*设置左上角图片的位置和宽高*/
.navbar-brand>img{
height: auto;
width:250px;
margin-right: 5px;
margin-top: 5px;
}
/*设置选项卡菜单的字体颜色*/
.nav-pills>li>a{
color:#8e908d ;
}
/*设置选项卡菜单鼠标悬停和获取焦点时背景色和字体颜色*/
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
color: #fff;
background-color: #5A9522;
}
.choose{
border: 1px solid silver;
}
/*设置选项卡内容的位置*/
.tab-content{
margin: 5px;
text-align: center;/*居中显示*/
}
/*特色推荐结束*/
/*轮播广告*/
.pic{
margin: 0 auto;
width: 800px;
padding: 20px;
}
.carousel {
background: white;
}
/*媒体查询:当视口小于992px时缩小了轮播div的宽度,图片换行*/
@media (max-width:992px) {
.pic{
width: 415px;
}
}
/*轮播广告结束*/
/*footer部分*/
.footer p {
color: #fff;
font-size: 1em;
line-height: 1.8em;
vertical-align: middle;
margin: 0.4em 0;
}
.footer p a{
color: #fff;
text-decoration:none;
}
.footer {
padding: 1em 0;
background-color:#D96B66;
}
.footer-right ul {
padding: 0;
}
.footer-right li {
display: inline-block;
margin: 0 1em;
}
.footer-left {
float: left;
}
.footer-right {
float: right;
}
/*设置字体图标的大小和颜色*/
.glyphicon{
font-size: 1.2em;
color: #f2f0f1 ;
}
CSS:
/*为页面中以下元素设置字体为Microsoft YaHei*/
body,button, input, select, h3, h6 { font-family: Microsoft YaHei}
/*header部分*/
.head-top{
background: #5fa022;
padding: 0.8em 0;
}
.navbar-brand{
padding: 0 0;
}
/*设置图片logo的大小和位置*/
.navbar-brand>img{
height: auto;
margin-right: 5px;
margin-top: 5px;
width: 250px;
}
/*设置整个导航菜单的内边距、背景色和阴影*/
.navbar-default{
padding: 1.5em 0;
background-color: #f2f0f1;
box-shadow: 12px -5px 39px -12px;
}
/*设置导航栏中菜单a链接的样式*/
.navbar-default .navbar-nav>li a {
top: 10px;
padding: 0.5em 3em;
text-decoration: none;
font-weight: 600;
font-size: 1.2em;
color:#919191;
}
/*设置导航栏菜单的鼠标悬停和获取焦点时的状态*/
.navbar-default .navbar-nav> li >a:hover,
.navbar-default .navbar-nav> li >a:focus {
background:#D96B66;
color: white;
border-radius: 3px;
-webkit-border-radius: 3px;
}
/*设置导航栏右侧a链接(0.00)的颜色*/
.navbar-right>a{
color:#D96B66;
}
/*媒体查询:当视口小于970px时,导航菜单字体变小,避免了换行的问题*/
@media (max-width: 970px) {
.navbar-default .navbar-nav>li a {
font-size: 1.1em;
}
}
/*header部分结束*/
/*搜索模块*/
/*设置搜索按钮前面的搜索图标*/
.search{
background-image: url(../images/banner.jpg);
background-size: cover;
-webkit-background-size: cover;
min-height: 600px;
margin-top: -20px;
}
/*设置搜索框外层div样式,形成白色透明背景*/
.reservation {
padding: 60px 60px;
width:50%;
background: rgba(255, 255, 255, 0.7);
margin: 0 auto;
margin-top:15%;
font-weight: 500;
color: #f2f0f1;
font-size: 1.2em;
outline: none;
}
/*设置搜索按钮的样式*/
.btn{
width: 50% ;
background: #D96B66;
color: #fff;
padding: 5px;
border: none;
border-radius: 4px;
-webkit-border-radius: 4px;
}
.form-control{
color: #8e908d;
}
.searchbtn{
text-align: center;
}
/*媒体查询:当屏幕小于768像素时搜索表单白色背景大小发生变化*/
@media (max-width: 768px){
.reservation {
padding: 20px 20px;
width: 90%;
}
}
/*搜索模块结束*/
/*热卖商品*/
.hot h3 {
margin-top: -20px;
color: #1A1A1A;
font-size: 1.5em;
font-weight: 600;
margin: 0 0 1em;
padding: 0 0 0.5em;
border-bottom: 2px solid #eee;
}
.hot p {
color: #5fa022;;
font-size: 1em;
font-weight: 400;
line-height: 1.8em;
margin: 1em 0;
}
.hot {
padding: 3em 0;
border: 1px solid #eee;
margin: 0 0;
}
.hot h6 {
color: #C15162;
font-size: 1.5em;
font-weight: 400;
margin: 0.3em 0;
}
a.morebtn {
display: block;
font-size: 1em;
color: #FFF;
text-decoration: none;/*去掉a链接下划线*/
font-weight: 400;
background: #D96B66;
padding: 10px 18px;
transition: 0.5s all ease;
-webkit-transition: 0.5s all ease;
border-radius: 3px;
-webkit-border-radius: 3px;
}
a.morebtn:hover{
background: #5fa022;
}
@media (max-width: 1024px) {
a.morebtn{
max-width:410px;/*当视口小于1024px时按钮的最大宽度*/
}
}
/*热卖商品结束*/
/*特色推荐*/
/*设置左上角图片的位置和宽高*/
.navbar-brand>img{
height: auto;
width:250px;
margin-right: 5px;
margin-top: 5px;
}
/*设置选项卡菜单的字体颜色*/
.nav-pills>li>a{
color:#8e908d ;
}
/*设置选项卡菜单鼠标悬停和获取焦点时背景色和字体颜色*/
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
color: #fff;
background-color: #5A9522;
}
.choose{
border: 1px solid silver;
}
/*设置选项卡内容的位置*/
.tab-content{
margin: 5px;
text-align: center;/*居中显示*/
}
/*特色推荐结束*/
/*轮播广告*/
.pic{
margin: 0 auto;
width: 800px;
padding: 20px;
}
.carousel {
background: white;
}
/*媒体查询:当视口小于992px时缩小了轮播div的宽度,图片换行*/
@media (max-width:992px) {
.pic{
width: 415px;
}
}
/*轮播广告结束*/
/*footer部分*/
.footer p {
color: #fff;
font-size: 1em;
line-height: 1.8em;
vertical-align: middle;
margin: 0.4em 0;
}
.footer p a{
color: #fff;
text-decoration:none;
}
.footer {
padding: 1em 0;
background-color:#D96B66;
}
.footer-right ul {
padding: 0;
}
.footer-right li {
display: inline-block;
margin: 0 1em;
}
.footer-left {
float: left;
}
.footer-right {
float: right;
}
/*设置字体图标的大小和颜色*/
.glyphicon{
font-size: 1.2em;
color: #f2f0f1 ;
}