2-7作业
来源：2-7 作业题
soso_crazy
2019-02-25 22:06:47
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap2-7作业</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link type="text/css" rel="stylesheet" href="bootstrap2-7作业.css">
<script src="bootstrap2-7作业.js"></script>
</head>
<body>
<!--导航-->
<nav>
<header class="container">
<div class="row">
<!--logo部分-->
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<img src="素材/logo.png">
</div>
<!--导航的菜单选项-->
<div class="col-lg-7 col-md-7 col-xs-7 col-sm-7">
<div class="navbar navbar-deafult computer" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">首页</a>
</div>
<div>
<ul class="nav navbar-nav">
<!--生日的菜单选项-->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">生日<b class="caret"></b></a>
<div class="dropdown-menu">
<ul class="dropdown-menu-left">
<li><h4>关系</h4></li>
<li class="divider"></li>
<li><a href="#">朋友</a></li>
<li><a href="#">爱人</a></li>
<li><a href="#">姐妹</a></li>
</ul>
<ul class="dropdown-menu-right">
<li><h4>风味</h4></li>
<li class="divider"></li>
<li><a href="#">巧克力</a></li>
<li><a href="#">水果</a></li>
</ul>
</div>
</li>
<!--婚礼的菜单选项-->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">婚礼<b class="caret"></b></a>
<div class="dropdown-menu">
<ul class="dropdown-menu-left">
<li><h4>关系</h4></li>
<li class="divider"></li>
<li><a href="#">朋友</a></li>
<li><a href="#">爱人</a></li>
<li><a href="#">姐妹</a></li>
</ul>
<ul class="dropdown-menu-middle">
<li><h4>风味</h4></li>
<li class="divider"></li>
<li><a href="#">巧克力</a></li>
<li><a href="#">水果</a></li>
</ul>
<ul class="dropdown-menu-right">
<li><h4>主旋律</h4></li>
<li class="divider"></li>
<li><a href="#">心形</a></li>
<li><a href="#">卡通</a></li>
</ul>
</div>
</li>
<!--专用的菜单选项-->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">专用<b class="caret"></b></a>
<div class="dropdown-menu">
<ul class="dropdown-menu-left">
<li><h4>关系</h4></li>
<li class="divider"></li>
<li><a href="#">朋友</a></li>
<li><a href="#">爱人</a></li>
<li><a href="#">姐妹</a></li>
</ul>
<ul class="dropdown-menu-right">
<li><h4>风味</h4></li>
<li class="divider"></li>
<li><a href="#">巧克力</a></li>
<li><a href="#">水果</a></li>
</ul>
</div>
</li>
<!--商铺的菜单选项-->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">商铺<b class="caret"></b></a>
<div class="dropdown-menu">
<ul class="dropdown-menu-left">
<li><h4>关系</h4></li>
<li class="divider"></li>
<li><a href="#">朋友</a></li>
<li><a href="#">爱人</a></li>
<li><a href="#">姐妹</a></li>
</ul>
<ul class="dropdown-menu-right">
<li><h4>风味</h4></li>
<li class="divider"></li>
<li><a href="#">巧克力</a></li>
<li><a href="#">水果</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="navbar navbar-deafult phone" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">首页</a>
</div>
<div>
<ul class="nav navbar-nav">
<!--生日的菜单选项-->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">生日<b class="caret"></b></a>
<div class="dropdown-menu">
<ul class="dropdown-menu-left">
<li><h4>关系</h4></li>
<li class="divider"></li>
<li><a href="#">朋友</a></li>
<li><a href="#">爱人</a></li>
<li><a href="#">姐妹</a></li>
</ul>
<ul class="dropdown-menu-right">
<li><h4>风味</h4></li>
<li class="divider"></li>
<li><a href="#">巧克力</a></li>
<li><a href="#">水果</a></li>
</ul>
</div>
</li>
<!--婚礼的菜单选项-->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">婚礼<b class="caret"></b></a>
<div class="dropdown-menu">
<ul class="dropdown-menu-left">
<li><h4>关系</h4></li>
<li class="divider"></li>
<li><a href="#">朋友</a></li>
<li><a href="#">爱人</a></li>
<li><a href="#">姐妹</a></li>
</ul>
<ul class="dropdown-menu-middle">
<li><h4>风味</h4></li>
<li class="divider"></li>
<li><a href="#">巧克力</a></li>
<li><a href="#">水果</a></li>
</ul>
<ul class="dropdown-menu-right">
<li><h4>主旋律</h4></li>
<li class="divider"></li>
<li><a href="#">心形</a></li>
<li><a href="#">卡通</a></li>
</ul>
</div>
</li>
<!--专用的菜单选项-->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">专用<b class="caret"></b></a>
<div class="dropdown-menu">
<ul class="dropdown-menu-left">
<li><h4>关系</h4></li>
<li class="divider"></li>
<li><a href="#">朋友</a></li>
<li><a href="#">爱人</a></li>
<li><a href="#">姐妹</a></li>
</ul>
<ul class="dropdown-menu-right">
<li><h4>风味</h4></li>
<li class="divider"></li>
<li><a href="#">巧克力</a></li>
<li><a href="#">水果</a></li>
</ul>
</div>
</li>
<!--商铺的菜单选项-->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">商铺<b class="caret"></b></a>
<div class="dropdown-menu">
<ul class="dropdown-menu-left">
<li><h4>关系</h4></li>
<li class="divider"></li>
<li><a href="#">朋友</a></li>
<li><a href="#">爱人</a></li>
<li><a href="#">姐妹</a></li>
</ul>
<ul class="dropdown-menu-right">
<li><h4>风味</h4></li>
<li class="divider"></li>
<li><a href="#">巧克力</a></li>
<li><a href="#">水果</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--导航栏字体图标部分-->
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 text-center">
<div class="dropdown">
<span class="glyphicon glyphicon-search dropdown-toggle" data-toggle="dropdown"></span>
<div class="dropdown-menu pull-right">
<form class="bs-example bs-example-form" role="form">
<div class="input-group search">
<input type="search" class="form-control"/>
<span class="input-group-addon">搜</span>
</div>
</form>
</div>
</div>
</div>
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 text-center">
<div class="dropdown">
<span class="glyphicon glyphicon-user dropdown-toggle" data-toggle="dropdown"></span>
<div class="dropdown-menu pull-right">
<form role="form" class="user">
<div class="from-group">
<label for="email">Email</label>
<input type="email" id="email" class="form-control">
</div>
<div class="from-group">
<label for="password">Password</label>
<input type="password" id="password" class="form-control">
</div>
<button type="submit" class="btn btn-default">登陆</button>
<div class="checkbox">
<label>
<input type="checkbox">记住
</label>
</div>
<span>新用户？<span>注册|</span><span>忘记密码？</span></span>
</form>
</div>
</div>
</div>
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 text-center">
<div class="dropdown">
<span class="glyphicon glyphicon-shopping-cart dropdown-toggle" data-toggle="dropdown"></span>
<div class="dropdown-menu pull-right">
<form class="shoppingCar">
<p>$0.00(0)</p>
<input type="submit" value="空">
</form>
</div>
</div>
</div>
</header>
</nav>
<!--banner区域-->
<section class="banner">
<div class="container"> <!--起到居中效果-->
<div class="flex-box pull-left">
<p>IMOOC<span>蛋糕</span></p>
<p>特别的日子，特别的你</p>
<button type="button">shop now</button>
</div>
<div class="cake pull-right">
<img src="素材/2.png">
</div>
</div>
</section>
<!--gallery区域-->
<section class="gallery">
<!--gallery 一行两列的图-->
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
<img src="素材/g1.jpg">
<div class="cover"> <!--遮罩层-->
<span class="glyphicon glyphicon-eye-open">view</span>
<button type="button" class="pull-right">show now</button>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<img src="素材/g2.jpg">
<div class="cover"> <!--遮罩层-->
<span class="glyphicon glyphicon-eye-open">view</span>
<button type="button" class="pull-right">show now</button>
</div>
</div>
</div>
</div>
<!--gallery一行四列的图-->
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
<div class="thumbnail"> <!--图文组合-->
<img src="素材/g3.png">
<div class="caption">
<h5>Lorem ipsum dolor sit</h5>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="pull-right">$95.00</span>
</div>
<div class="cover"> <!--遮罩层-->
<span class="glyphicon glyphicon-eye-open">view</span>
<button type="button" class="pull-right">show now</button>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
<div class="thumbnail"> <!--图文组合-->
<img src="素材/g4.png">
<div class="caption">
<h5>Lorem ipsum dolor sit</h5>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="pull-right">$95.00</span>
</div>
<div class="cover"> <!--遮罩层-->
<span class="glyphicon glyphicon-eye-open">view</span>
<button type="button" class="pull-right">show now</button>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
<div class="thumbnail"> <!--图文组合-->
<img src="素材/g5.png">
<div class="caption">
<h5>Lorem ipsum dolor sit</h5>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="pull-right">$95.00</span>
</div>
<div class="cover"> <!--遮罩层-->
<span class="glyphicon glyphicon-eye-open">view</span>
<button type="button" class="pull-right">show now</button>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
<div class="thumbnail"> <!--图文组合-->
<img src="素材/g6.png">
<div class="caption">
<h5>Lorem ipsum dolor sit</h5>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="pull-right">$95.00</span>
</div>
<div class="cover"> <!--遮罩层-->
<span class="glyphicon glyphicon-eye-open">view</span>
<button type="button" class="pull-right">show now</button>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
<div class="thumbnail"> <!--图文组合-->
<img src="素材/g7.png">
<div class="caption">
<h5>Lorem ipsum dolor sit</h5>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="pull-right">$95.00</span>
</div>
<div class="cover"> <!--遮罩层-->
<span class="glyphicon glyphicon-eye-open">view</span>
<button type="button" class="pull-right">show now</button>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
<div class="thumbnail"> <!--图文组合-->
<img src="素材/g8.png">
<div class="caption">
<h5>Lorem ipsum dolor sit</h5>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="pull-right">$95.00</span>
</div>
<div class="cover"> <!--遮罩层-->
<span class="glyphicon glyphicon-eye-open">view</span>
<button type="button" class="pull-right">show now</button>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
<div class="thumbnail"> <!--图文组合-->
<img src="素材/g9.png">
<div class="caption">
<h5>Lorem ipsum dolor sit</h5>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="pull-right">$95.00</span>
</div>
<div class="cover"> <!--遮罩层-->
<span class="glyphicon glyphicon-eye-open">view</span>
<button type="button" class="pull-right">show now</button>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
<div class="thumbnail"> <!--图文组合-->
<img src="素材/g10.png">
<div class="caption">
<h5>Lorem ipsum dolor sit</h5>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="pull-right">$95.00</span>
</div>
<div class="cover"> <!--遮罩层-->
<span class="glyphicon glyphicon-eye-open">view</span>
<button type="button" class="pull-right">show now</button>
</div>
</div>
</div>
</div>
</div>
</section>
<article class="subscribe">
<h4>NewsLetter</h4>
<form class="bs-example bs-example-form" role="form">
<div class="input-group">
<input type="email" placeholder="email">
<span class="input-group-addon">subscribe</span>
</div>
</form>
</article>
<section class="footer-bottom">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-4">
<h3>COMPANY</h3>
<P>Products</P>
<P>Work Here</P>
<P>Team</P>
<P>Happenings</P>
<P>Dealer Locator</P>
</div>
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-4">
<h3>SEARVICE</h3>
<P>Products</P>
<P>Work Here</P>
<P>Team</P>
<P>Happenings</P>
</div>
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-4">
<h3>ORDER&RETURNS</h3>
<P>Products</P>
<P>Work Here</P>
<P>Team</P>
<P>Happenings</P>
</div>
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-4">
<h3>LEGAL</h3>
<P>Products</P>
<P>Work Here</P>
<P>Team</P>
</div>
</div>
</div>
</section>
<footer>
<p>CopyRight©right;2017imooc.com ALL Rights Reseved |京ICP备 130462号2</p>
</footer>
</body>
</html>
/*通用设置*/
ul{list-style: none;}
a,a:hover{text-decoration: none;}
/*header区域*/
nav{
width: 100%;
background-color: #5D4B33;
}
/*导航logo*/
nav img{
margin: 10px 0;
}
/*导航中文字菜单选项部分*/
.navbar{
margin: 0;
}
a.dropdown-toggle{
color: #ffffff;
}
nav header.container .navbar-brand{
color: white;
background-color: #FF8C00;
}
nav header.container .dropdown-toggle:hover{ /*为什么鼠标移入背景不变色而是点击才变色？？*/
background-color: #FF8C00;
cursor: pointer;
}
/*下拉菜单部分*/
/*文字下拉菜单部分*/
nav .col-lg-7 .dropdown-menu,nav .col-md-7 .dropdown-menu{
width: 450px;
height: 250px;
}
.dropdown-menu-left,.dropdown-menu-middle,.dropdown-menu-right{
float: left;
padding-top: 20px;
width: 140px; /*box-sizing:padding-box 所以ul的宽为content+padding*/
}
.dropdown-menu ul li{
margin: 10px 0;
}
.dropdown-menu ul li h4{
color: #FF8C00;
font-weight: bold;
}
.dropdown-menu ul li a{
color: gray;
}
/*字体图标部分*/
nav span.glyphicon{
color: #ffffff;
margin: 20px 0;
}
/*文字图标下拉菜单部分*/
/*搜索字体图标下拉菜单*/
.search{
margin: .3rem;
}
.search span.input-group-addon{
border: 1px solid #FF8C00;
background-color: #FF8C00;
color: #ffffff;
width: 1rem;
}
.search input[type='search']{
width: 2rem;
height: .32rem;
border: 1px solid #FF8C00;
}
/*用户字体图标下拉菜单*/
form.user{
margin: .2rem .1rem;
}
form.user input[type="submit"],form.user input[type="email"]{
width: 2rem;
}
form.user button[type="submit"]{
width: 2rem;
background-color: #FF8C00;
height: .3rem;
color: #ffffff;
border-radius: 0;
margin-top: .2rem;
border: 1px solid #FF8C00;
}
form.user button[type="submit"]:hover{ /*为什么hover没有反应而点击才有反应？？*/
background-color: #ffffff;
color: #FF8C00;
cursor: pointer;
}
form.user span{ /*无法居中文字？？*/
text-align: center;
}
form.user span span:first-child{
color: #FF8C00;
}
/*购物车字体图标下拉菜单*/
form.shoppingCar{
margin: .1rem 0;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
form.shoppingCar input[type="submit"]{
width: 80%;
color: #ffffff;
height: .32rem;
border: 1px solid #FF8C00;
background-color: #FF8C00;
}
/*banner区域*/
/*banner背景设置*/
section.banner{
width: 100%;
height: 5rem;
background-color: #f2f6f7;
display: flex;
justify-content: center;
align-items: center;
}
/*banner区域左边文字、按钮部分*/
section.banner .container .flex-box{
display: flex;
flex: 1;
flex-direction: column;
margin: 1rem 0;
}
section.banner .container .flex-box p:first-child{
font-size: .5rem;
color: #5D4B33;
}
section.banner .container .flex-box span:first-child{
font-size: .5rem;
color: #FF8C00;
}
section.banner .container .flex-box p:nth-child(2){
font-size: .2rem;
color: #FF8C00;
}
section.banner .container .flex-box button{
border: .1rem solid #5D4B33;
color: #5D4B33;
font-size: .2rem;
width: 2rem;
height: .5rem;
margin: .2rem 0 0 0;
}
section.banner .container .flex-box button:hover{
border: .1rem solid #FF8C00;
color: #FF8C00;
}
/*banner区域右边图片部分*/
.cake img{
width: 100%;
}
/*gallery区域*/
section.gallery .container:first-child{
margin: .6rem auto;
}
/*gallery一行两列的大图*/
section.gallery .container:nth-of-type(1) img{
width: 100%;
position: relative;/*遮罩层相对于图片绝对定位*/
}
section.gallery .container:nth-of-type(2) .thumbnail{
position: relative; /*遮罩层相对于thumbnail绝对定位*/
}
/*为什么遮罩层在小图片中的定位不是bottom：0，left：0?如何使用遮罩层遮盖小图片的文字？*/
/*将鼠标移入图片使得遮罩层display：block出现应该怎么写？*/
/*遮罩层*/
section.gallery .container:nth-of-type(1) div.cover{
margin: 0 0 0 15px;
position: absolute;
bottom: 0;
left: 0;
z-index: 3;
margin: 0 0 0 15px;
height: .4rem;
color: #ffffff;
background-color: rgba(0,0,0,.8);
}
section.gallery .container:nth-of-type(2) .thumbnail div.cover{
position: absolute;
bottom: 0;
left: 0;
z-index: 3;
margin: 0;
height: .4rem;
color: #ffffff;
background-color: rgba(0,0,0,.8);
}
/*遮罩层宽度的响应式*/
/*gallery一行两列的遮罩层*/
@media screen and (min-width: 1200px){
section.gallery .container:nth-of-type(1) div.cover:nth-of-type(1) {
width: 96.2%;
}
section.gallery .container:nth-of-type(1) div.cover:nth-of-type(2){ /*为什么不能选中一行两列图的第二张图的遮罩层？？*/
width: 15%;
}
section.gallery .container:nth-of-type(2) div.cover:nth-of-type(1), /*为什么不能选中小图片的遮罩层调整宽度？？*/
section.gallery .container:nth-of-type(2) div.cover:nth-of-type(2),
section.gallery .container:nth-of-type(2) div.cover:nth-of-type(3),
section.gallery .container:nth-of-type(2) div.cover:nth-of-type(4),
section.gallery .container:nth-of-type(2) div.cover:nth-of-type(5),
section.gallery .container:nth-of-type(2) div.cover:nth-of-type(6),
section.gallery .container:nth-of-type(2) div.cover:nth-of-type(7),
section.gallery .container:nth-of-type(2) div.cover:nth-of-type(8){
width: 98%;
}
}
@media screen and (max-width: 1200px) and (min-width: 992px){
section.gallery .container:nth-of-type(1) div.cover:nth-of-type(1) {
width: 95.4%;
}
section.gallery .container:nth-of-type(1) div.cover:nth-of-type(2){ /*为什么不能选中一行两列图的第二张图的遮罩层？？*/
width: 15%;
}
section.gallery .container:nth-of-type(2) div.cover:nth-of-type(1),
section.gallery .container:nth-of-type(2) div.cover:nth-of-type(2),
section.gallery .container:nth-of-type(2) div.cover:nth-of-type(3),
section.gallery .container:nth-of-type(2) div.cover:nth-of-type(4),
section.gallery .container:nth-of-type(2) div.cover:nth-of-type(5),
section.gallery .container:nth-of-type(2) div.cover:nth-of-type(6),
section.gallery .container:nth-of-type(2) div.cover:nth-of-type(7),
section.gallery .container:nth-of-type(2) div.cover:nth-of-type(8){
width: 98%;
}
}
@media screen and (max-width: 992px) and (min-width: 768px){
section.gallery .container:nth-of-type(1) div.cover:nth-of-type(1) {
width: 94%;
}
section.gallery .container:nth-of-type(1) div.cover:nth-of-type(2){ /*为什么不能选中一行两列图的第二张图的遮罩层？？*/
width: 15%;
}
section.gallery .container:nth-of-type(2) div.cover:nth-of-type(1),
section.gallery .container:nth-of-type(2) div.cover:nth-of-type(2),
section.gallery .container:nth-of-type(2) div.cover:nth-of-type(3),
section.gallery .container:nth-of-type(2) div.cover:nth-of-type(4),
section.gallery .container:nth-of-type(2) div.cover:nth-of-type(5),
section.gallery .container:nth-of-type(2) div.cover:nth-of-type(6),
section.gallery .container:nth-of-type(2) div.cover:nth-of-type(7),
section.gallery .container:nth-of-type(2) div.cover:nth-of-type(8){
width: 98%;
}
}
/*手机设备的响应式*/
@media screen and (max-width: 768px){
.computer{
display: none;
}
.phone{
display: block;
}
}
section.gallery div.cover span.glyphicon{ /*如何设置遮罩层的字体图标和文字居中对齐？并且隔开一段距离？*/
color: #ffffff;
line-height: .4rem;
padding: 0 10px;
}
section.gallery div.cover button{
border: 1px solid #ffffff;
color: #ffffff;
background-color: transparent;
margin: 8px 20px 8px 0;
}
section.gallery div.cover button:hover{ /*为什么鼠标移入不会变色而是需要点击才变色？*/
border: 1px solid #FF8C00;
color: #FF8C00;
cursor:pointer;
}
/*gallery文字图标*/
.gallery span.glyphicon{
color: #000000;
}
/*subscribe区域*/
article.subscribe{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 2rem;
background: url("素材/slid.jpg") no-repeat; /*背景如何做到滚动时会显示背景图而不是死死固定一个部分？？*/
background-size: cover;
}
article.subscribe input[type=email]{
height: .32rem;
width: 3rem;
background-color: rgba(255,255,255,.3);
color: #ffffff;
border: none;
}
article.subscribe span{
background-color: #FF8C00;
border: 1px solid #FF8C00;
color: #ffffff;
}
/*footer-bottom*/
section.footer-bottom{
height: 4rem;
}
section.footer-bottom .container{
padding: .3rem 0 0 .5rem;
}
section.footer-bottom h3{
color: #FF8C00;
}
section.footer-bottom p{
color: darkgray;
}
/*footer*/
footer{
width: 100%;
height: .8rem;
background-color: #5D4B33;
text-align: center;
line-height: .8rem;
color: #ffffff;
}
$('.dropdown-toggle').dropdown();
//计算根元素的字体大小 rem（font size of the root element）是指相对于根元素的字体大小的单位
(function(doc, win) { //定义一个函数 参数为（doc,win）
var docEl = doc.documentElement, // 将document传给doc document.documentElement获取的是html元素 document指的是整个文档结构
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', //浏览器是否支持orientationchange（orientationchange当设备的方向发生变化时会触发该事件）事件，如果支持就出发orientationchange事件，如果不支持就触发resize事件
//resize 指js中的事件 widow指 浏览器window对象 js BOM基础提及
recalc = function() {
var clientWidth = docEl.clientWidth; //获取的是浏览器视口的宽度，可以在控制台中输出看看
if (!clientWidth) return; //如果没有获取到宽度，直接返回，不执行下面的代码
if (clientWidth >= 640) { //对于手机屏幕来说，640px的页面宽度是一个安全的最大宽度，保证了移动端页面两边不会留白。所以在小于640px的时候改变html的font-size属性值。100*（可见区域宽度/640）+‘px’。这是页面宽度小于640px的一个计算公式，记住就可以了。
docEl.style.fontSize = '100px';
} else {
docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
}
};
if (!doc.addEventListener) return; //页面不支持事件监听，直接返回
win.addEventListener(resizeEvt, recalc, false);
//resizeEvt就是上面‘ resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',’接收的事件，拿orientationchange事件举例，这行代码的意思是窗口监听orientationchange事件，执行上面的recalc方法，第三个参数默认是false，在冒泡阶段执行
doc.addEventListener('DOMContentLoaded', recalc, false);
//当初始HTML文档已完全加载和解析时，将触发DOMContentLoaded事件，然后调用上面的recalc方法，默认在冒泡阶段执行
recalc(); //调用上面recalc = function()的方法
})(document, window); //将document和window传入函数 window 指窗体，document指页面，document对象可以理解为是window对象的一个子对象。
为什么我的下一行的文字跑到中间去了？
为什么这里存在空隙？应该如何调整？
这里跑上去一点，怎么解决？gallery的遮罩层应该怎么选择第几个的图片的遮罩层？
下拉菜单的三角形如何调出？宽度应该如何调整？手机导航应该如何垂直排列？
suscribe的背景滚动如何编出的？
设置hover后还是没有变化而是要点击才有变化？
遮罩层的文字和文字图标如何隔开一点距离？
鼠标移入gallery时遮罩层出现如何写？
form.user span的文字如何居中？
还有哪些地方需要修改的？
1回答
-
好帮手慕星星
2019-02-26
你好，作业中问题较多，有的是你自己列出来的，有的可能自己没有发现，写的话可能要好几页文档。
建议先把自己会做的内容做好，然后将作业上传，批复作业的老师会将问题详细列出来并给出修改建议。
如果帮助到了你，欢迎采纳！
祝学习愉快！
0
相似问题