关于2-7gallery

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>我的bootStraplian'练习作业</title>

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

<meta name="viewport" content="width=device-width,initial-scale=1,maxinum=1,user-scable=no">

<meta name="keywords" content=" "/>

<meta name="description" content=" "/>

<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"/>

<link rel="stylesheet" type="text/css" href="css/index.css"/>

</head>

<body>

<header id="header-page">

<div class="container">

<nav class="navbar navbar-default">

<div class="container-fluid">

<div class="navbar-header left">

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<div class="navbar-brand">IMOOC</div>

</div>

<div class="right">

<div class="right-btn">

<div class="btn-group">

<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

</button>

<ul class="dropdown-menu btn1">

<div class="triang"></div>

<input type="text" class="text"><span>搜</span>

</ul>

</div>

</div>

<div class="right-btn">

<div class="btn-group">

<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

<span class="glyphicon glyphicon-user" aria-hidden="true"></span>

</button>

<ul class="dropdown-menu btn2">

<div class="triang position2"></div>

<form>

<div class="input-group">

<label for="emai">Email</label><br/>

<input type="email" class="form-control" aria-describedby="basic-addon1" id="Email">

<label for="password">Password</label><br/>

<input type="password" class="form-control" aria-describedby="basic-addon1" id="password">

<input type="submit" class="form-control" aria-describedby="basic-addon1" id="submit">

<input type="checkbox" class="checkbox" aria-describedby="basic-addon1" id="checkbox"><span class="word">记住</span>

<div class="bottom-words">

<p>新用户？<a href="#3">注册</a>  |  忘记密码？</p>

</div>

</div>

</form>

</ul>

</div>

</div>

<div class="right-btn">

<div class="btn-group">

<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>

</button>

<ul class="dropdown-menu btn3">

<div class="triang position3"></div>

<div class="shoppingcar">

<span>$0.00(0)</span>

<a href="#4">空</a>

</div>

</ul>

</div>

</div>

</div>

<div class="collapse navbar-collapse left" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav">

<li class="active"><a href="#">首页 </a></li>

<li class="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">生日 <span class="caret"></span></a>

<ul class="dropdown-menu">

<li class="left">

<h4>关系</h4>

<a href="#1">朋友</a>

<a href="#1">爱人</a>

<a href="#1">姐妹</a>

</li>

<li class="left">

<h4>风味</h4>

<a href="#1">巧克力</a>

<a href="#1">水果</a>

</li>

</ul>

</li>

<li class="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">婚礼 <span class="caret"></span></a>

<ul class="dropdown-menu">

<li class="left">

<h4>关系</h4>

<a href="#1">朋友</a>

<a href="#1">爱人</a>

<a href="#1">姐妹</a>

</li>

<li class="left">

<h4>风味</h4>

<a href="#1">巧克力</a>

<a href="#1">水果</a>

</li>

<li class="left">

<h4>主旋律</h4>

<a href="#1">心形</a>

<a href="#1">卡通</a>

</li>

</ul>

</li>

<li class="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">专用 <span class="caret"></span></a>

<ul class="dropdown-menu">

<li class="left">

<h4>关系</h4>

<a href="#1">朋友</a>

<a href="#1">爱人</a>

<a href="#1">姐妹</a>

</li>

<li class="left">

<h4>风味</h4>

<a href="#1">巧克力</a>

<a href="#1">水果</a>

</li>

</ul>

</li>

<li class="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">商铺 <span class="caret"></span></a>

<ul class="dropdown-menu">

<li class="left">

<h4>关系</h4>

<a href="#1">朋友</a>

<a href="#1">爱人</a>

<a href="#1">姐妹</a>

</li>

<li class="left">

<h4>风味</h4>

<a href="#1">巧克力</a>

<a href="#1">水果</a>

</li>

</ul>

</li>

</ul>

</div>

</div>

</nav>

</div>

</header>

<section class="banner clearfix">

<div class="container">

<div class="row">

<div class="col-lg-7 col-md-7 col-sm-7 col-xs-7 text pull-left">

<p class="title">IMOOC<span class="textMark">蛋糕</span></p>

<p class="word">特别的日子，特别的你</p>

<a href="#4">SHOP NOW</a>

</div>

<div class="col-lg-7 col-md-7 col-sm-7 col-xs-7 img-box pull-right">

<img src="img/2.png" alt=""/>

</div>

</div>

</div>

</section>

<section class="gallery">

<div class="container">

<div class="row top-img">

<div class="col-lg-7 col-md-7 col-sm-7 col-xs-7 pull-left">

<div class="img-left">

<img src="img/g1.jpg">

<a href="#5" class="shade">

<span class="view glyphicon glyphicon-eye-open" aria-hidden="true"></span>

<span class="shop">SHOP NOW</span>

</a>

</div>

<div class="about">

<p class="description">Lorem Ipsum is simply</p>

<p class="evaluate">

<span class="star">⭐⭐⭐⭐⭐</span>

<span class="price">$95.0</span>

</p>

</div>

</div>

<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 pull-left">

<div class=" img-right">

<img src="img/g2.jpg">

<a href="#6" class="shade">

<span class="view glyphicon glyphicon-eye-open" aria-hidden="true"></span>

<span class="shop">SHOP NOW</span>

</a>

</div>

<div class="about">

<p class="description">Lorem Ipsum is simply</p>

<p class="evaluate">

<span class="star">⭐⭐⭐⭐⭐</span>

<span class="price">$95.0</span>

</p>

</div>

</div>

</div>

<div class="row bottom-img">

<div class="col-lg-3 col-md-4 col-sm-4 col-xs-6">

<div class="img-box">

<img src="img/g3.png">

<a href="#5" class="shade">

<span class="view glyphicon glyphicon-eye-open" aria-hidden="true"></span>

<span class="shop">SHOP NOW</span>

</a>

</div>

<div class="about">

<p class="description">Lorem Ipsum is simply</p>

<p class="evaluate">

<span class="star">⭐⭐⭐⭐⭐</span>

<span class="price">$95.0</span>

</p>

</div>

</div>

<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">

<div class="img-box">

<img src="img/g4.png">

<a href="#5" class="shade">

<span class="view glyphicon glyphicon-eye-open" aria-hidden="true"></span>

<span class="shop">SHOP NOW</span>

</a>

</div>

<div class="about">

<p class="description">Lorem Ipsum is simply</p>

<p class="evaluate">

<span class="star">⭐⭐⭐⭐⭐</span>

<span class="price">$95.0</span>

</p>

</div>

</div>

<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">

<div class="img-box">

<img src="img/g5.png">

<a href="#5" class="shade">

<span class="view glyphicon glyphicon-eye-open" aria-hidden="true"></span>

<span class="shop">SHOP NOW</span>

</a>

</div>

<div class="about">

<p class="description">Lorem Ipsum is simply</p>

<p class="evaluate">

<span class="star">⭐⭐⭐⭐⭐</span>

<span class="price">$95.0</span>

</p>

</div>

</div>

<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">

<div class="img-box">

<img src="img/g6.png">

<a href="#5" class="shade">

<span class="view glyphicon glyphicon-eye-open" aria-hidden="true"></span>

<span class="shop">SHOP NOW</span>

</a>

</div>

<div class="about">

<p class="description">Lorem Ipsum is simply</p>

<p class="evaluate">

<span class="star">⭐⭐⭐⭐⭐</span>

<span class="price">$95.0</span>

</p>

</div>

</div>

</div>

<div class="row bottom-img">

<div class="col-lg-3 col-md-4 col-sm-4 col-xs-6">

<div class="img-box">

<img src="img/g7.png">

<a href="#5" class="shade">

<span class="view glyphicon glyphicon-eye-open" aria-hidden="true"></span>

<span class="shop">SHOP NOW</span>

</a>

</div>

<div class="about">

<p class="description">Lorem Ipsum is simply</p>

<p class="evaluate">

<span class="star">⭐⭐⭐⭐⭐</span>

<span class="price">$95.0</span>

</p>

</div>

</div>

<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">

<div class="img-box">

<img src="img/g8.png">

<a href="#5" class="shade">

<span class="view glyphicon glyphicon-eye-open" aria-hidden="true"></span>

<span class="shop">SHOP NOW</span>

</a>

</div>

<div class="about">

<p class="description">Lorem Ipsum is simply</p>

<p class="evaluate">

<span class="star">⭐⭐⭐⭐⭐</span>

<span class="price">$95.0</span>

</p>

</div>

</div>

<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">

<div class="img-box">

<img src="img/g9.png">

<a href="#5" class="shade">

<span class="view glyphicon glyphicon-eye-open" aria-hidden="true"></span>

<span class="shop">SHOP NOW</span>

</a>

</div>

<div class="about">

<p class="description">Lorem Ipsum is simply</p>

<p class="evaluate">

<span class="star">⭐⭐⭐⭐⭐</span>

<span class="price">$95.0</span>

</p>

</div>

</div>

<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">

<div class="img-box">

<img src="img/g10.png">

<a href="#5" class="shade">

<span class="view glyphicon glyphicon-eye-open" aria-hidden="true"></span>

<span class="shop">SHOP NOW</span>

</a>

</div>

<div class="about">

<p class="description">Lorem Ipsum is simply</p>

<p class="evaluate">

<span class="star">⭐⭐⭐⭐⭐</span>

<span class="price">$95.0</span>

</p>

</div>

</div>

</div>

</div>

</section>

<script type="text/javascript" src="js/jquery-3.1.1.js" ></script>

<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>

<script type="text/javascript" src="js/index.js"></script>

</body>

</html>

*{

padding:0;

margin:0;

}

ul,li{

list-style: none;

}

a{

text-decoration:none;

}

.clearfix:after{

content:'';

width:0;

height:0;

clear:both;

zoom:1;

}

/*header区域样式设置*/

#header-page{

width:100%;

height:50px;

background:#5D4B33;

color:#fff;

}

#header-page .navbar-default{

background:none;

border:none;

color:#fff;

}

#header-page .navbar-default a{

color:#fff;

}

#header-page .navbar-default .navbar-brand{

font-size:26px;

color:#fff;

}

#header-page .navbar-default .navbar-nav > .active > a,

#header-page .navbar-default .navbar-nav > .active > a:hover,

#header-page .navbar-default .navbar-nav > .active > a:focus{

color: #fff;

background-color: #F07818;

}

.left{

float:left;

}

.right{

float:right;

}

#header-page .navbar-default .navbar-toggle{

background:#F07818;

border:none;

}

#header-page .navbar-default .navbar-toggle span.icon-bar{

background-color:#fff;

}

/*左侧导航下拉菜单样式设置*/

#header-page .navbar-default .navbar-nav .dropdown-menu{

width:600px;

height:250px;

}

#header-page .navbar-default .navbar-nav .dropdown-menu li.left{

float:left;

margin-right:20px;

width:120px;

}

#header-page .navbar-default .navbar-nav .dropdown-menu li a{

color: #777;

}

#header-page .navbar-default .navbar-nav .dropdown-menu li a:hover{

color: #F07818;

transition: all .3s;

background:none;

}

#header-page .navbar-default .navbar-nav > .dropdown .dropdown-menu h4{

color:#F07818;

margin-left:19px;

padding-bottom:10px;

border-bottom:1px solid #777;

}

#header-page .navbar-default .navbar-nav > .dropdown .dropdown-menu a{

color:#777;

margin:20px 0;

}

#header-page .navbar-default .navbar-nav > li > a:hover,

#header-page .navbar-default .navbar-nav > li > a:focus,

#header-page .navbar-default .navbar-nav > li > a:visited{

background-color: #F07818;

color: #fff;

transition: all .3s;

}

/*右侧导航栏按钮样式设置*/

#header-page .navbar-default .right .right-btn{

float:left;

margin-right:20px;

}

#header-page .navbar-default .right .right-btn .btn-default{

color:#fff;

background:transparent;

border:none;

margin-top:11px;

}

/*第一个按钮下的搜索框部分的样式*/

#header-page .navbar-default .right .right-btn .dropdown-menu.btn1{

top:111%;

left:-620%;

color:#777;

width:300px;

height:80px;

}

#header-page .navbar-default .right .right-btn .dropdown-menu input.text{

border:2px solid #F07818;

height:35px;

margin:16px auto;

}

#header-page .navbar-default .right .right-btn .dropdown-menu>span{

background:#F07818;

display:inline-block;

width:50px;

height:35px;

text-align:center;

line-height:35px;

color:#fff;

}

/*第二个按钮下的搜索框部分的样式*/

#header-page .navbar-default .right .right-btn .dropdown-menu.btn2{

top:111%;

left:-620%;

color:#777;

width:300px;

/*height:80px;*/

}

#header-page .navbar-default .right .right-btn .dropdown-menu .triang.position2{

top:-25px;

left:81.5%;

}

#header-page .navbar-default .right .right-btn .dropdown-menu form{

width:90%;

margin:0px auto;

}

#header-page .navbar-default .right .right-btn .dropdown-menu form .input-group label{

margin-top:15px;

}

#header-page .navbar-default .right .right-btn .dropdown-menu form .input-group input#submit{

background:#F07818;

margin:15px auto;

color:#fff;

}

#header-page .navbar-default .right .right-btn .dropdown-menu form .input-group input#submit:hover{

color:#F07818;

background:#fff;

border:1px solid #F07818;

transition:.3s;

}

#header-page .navbar-default .right .right-btn .dropdown-menu form .input-group #checkbox{

display:inline-block;

margin-right:5px;

}

#header-page .navbar-default .right .right-btn .dropdown-menu form .input-group .bottom-words{

text-align:center;

margin:10px auto;

}

#header-page .navbar-default .right .right-btn .dropdown-menu form .input-group .bottom-words a{

color:red;

}

/*第三个按钮下的样式设置*/

#header-page .navbar-default .right .right-btn .dropdown-menu.btn3{

top:111%;

left:-312%;

color:#777;

width:150px;

}

#header-page .navbar-default .right .right-btn .dropdown-menu .triang.position3{

top:-25px;

left:80.5%;

}

#header-page .navbar-default .right .right-btn .dropdown-menu.btn3 .shoppingcar{

text-align:center;

}

#header-page .navbar-default .right .right-btn .dropdown-menu.btn3 .shoppingcar a{

color:#fff;

display:block;

width:90%;

height:35px;

line-height:35px;

margin:10px auto;

text-align:center;

background:#F07818;

}

#header-page .navbar-default .right .right-btn .dropdown-menu.btn3 .shoppingcar a:hover{

color:#F07818;

background:#fff;

border:1px solid #F07818;

transition:.3s;

}

/*每个按钮下的小三角*/

#header-page .navbar-default .right .right-btn .dropdown-menu .triang{

width:0;

height:0;

border-width:10px;

border-style:solid;

border-color:transparent transparent #fff transparent;

position:relative;

top:-43px;

left:81%;

display:inline-block;

}

/*banner 区域样式设置*/

.banner{

width:100%;

background:#f3f6f8;

padding:120px 0;

}

.banner .text{

padding-left:20px;

}

.banner .text p.title{

font-size:48px;

color:#5a4932;

}

.banner .text p.title span{

color:#d5873c;

margin-left:15px;

}

.banner .text p.word{

font-size:12px;

color:#d5873c;

}

.banner .text a{

display:block;

width:32%;

height:35px;

border:5px solid #5a4932;

color:#5a4932;

font-size:14px;

line-height:27px;

text-align:center;

text-decoration:none;

margin-top:20px;

min-width:100px;

}

.banner .text a:hover{

border:5px solid #F07818;

color:#F07818;

transition:.3s;

}

.banner .img-box{

width:30%;

}

.banner .img-box img{

width:100%;

max-width:394px;

max-height:375px;

}

/*gallery 区域*/

.gallery .top-img{

margin:80px auto;

}

.gallery .img-left{

width:100%;

height:410px;

position:relative;

}

.gallery a.shade{

position:absolute;

width:100%;

height:13%;

bottom:0;

background:rgba(0,0,0,.7);

color:#fff;

display:none;

z-index:9;

}

.gallery a.shade:hover{

display:block;

}

.gallery .img-left img{

width:100%;

height:100%;

max-width:730px;

max-height:417px;

}

.gallery .shade span.view{

margin-left:3%;

margin-top:3%;

}

.gallery .shade span.shop{

display:inline-block;

width:25%;

height:65%;

line-height:240%;

text-align:center;

font-size:12px;

border:2px solid #fff;

margin-right:3%;

margin-top:2%;

float:right;

min-width:85px;

}

.gallery .img-right{

width:100%;

height:410px;

position:relative;

}

.gallery .img-right img{

width:100%;

height:100%;

max-width:350px;

max-height:417px;

}

.gallery p.description{

color:#000;

}

@media screen and (max-width:991px){

/*bnaner 部分*/

.banner .text{

margin-left:22px;

}

.banner .text p.title{

font-size:32px;

}

.banner .text p.title span{

color:#d5873c;

margin-left:8px;

}

.banner .text a{

margin-top:10px;

}

.banner .img-box{

margin-right:22px;

}

/*gallery*/

.gallery .shade span.view{

margin-top:19px;

}

.gallery .shade span.shop{

margin-top:9px;

line-height:30px;

}

}

/*屏幕小于768px*/

@media screen and (max-width:768px){

.container{

margin:0;

padding:0;

}

/*header 部分*/

#header-page .navbar-default .navbar-brand{

font-size:22px;

margin-left:30px;

}

#header-page .navbar-default .container-fluid{

padding:0;

width:100%;

}

#header-page .navbar-default .navbar-collapse{

width:100%;

clear:both;

margin:0;

padding:0;

background:#5D4B33;

}

#header-page .navbar-default .navbar-collapse .navbar-nav{

margin:0;

width:100%;

clear:both;

z-index:9999;

}

#header-page .navbar-default .navbar-collapse .navbar-nav>li.active{

width:100%;

clear:both;

text-align:center;

text-indent:-15px;

}

#header-page .navbar-default .navbar-collapse .navbar-nav>li{

width:100%;

clear:both;

text-align:center;

}

#header-page .navbar-default .right .right-btn{

margin-right:10px;

}

.banner .text{

margin-left:30px;

}

.banner .text p.title{

font-size:26px;

}

.banner .text p.title span{

color:#d5873c;

margin-left:6px;

}

.banner .text a{

margin-top:8px;

font-size:12px;

}

.banner .img-box{

margin-right:30px;

}

.gallery .img-left,

.gallery .img-right{

width:100%;

height:326px;

position:relative;

}

.gallery .shade span.view{

margin-top:13px;

}

.gallery .shade span.shop{

margin-top:8px;

line-height:24px;

}

}

/*屏幕小于560px*/

@media screen and (max-width:560px){

.gallery .img-left,

.gallery .img-right{

width:100%;

height:326px;

position:relative;

}

.gallery .shade span.view{

margin-top:5%;

}

.gallery .shade span.shop{

margin-top:3%;

}

}

为什么鼠标移入图片底部，底部的遮罩不能正常显示

田马达加斯加 2018-09-29

源自：项目：实现企业网站首页 2-7 作业题

0

收起

2回答

好帮手慕星星 2018-09-29 17:01:16

经用chrome浏览器测试鼠标移入shade区域并没有出现闪烁的情况，建议使用其它浏览器测试下，是否出现这种效果。

提问者田马达加斯加 #1

我试了还是一直闪烁，想知道是什么原因导致的

2018-09-29 21:05:31
好帮手慕星星回复提问者田马达加斯加 #2

经过多次测试，这边是没有出现闪烁情况的。看代码中下面引入了一个js文件，是否在js文件中也添加了相关效果呢。修改完代码之后是否把之前的代码删除了呢，建议可以再查看一下css文件哦，修改之后注意保存。

2018-09-30 10:50:04

好帮手慕星星 2018-09-29 15:18:01

开始a.shade设置的就是隐藏的状态，所以鼠标是没有办法移入到a.shade上面的，可以移入到父元素上面，然后显示子元素，参考：

自己测试下，祝学习愉快~~

提问者田马达加斯加 #1

我改过来了，但是当鼠标移入shade区域时为什么一直闪烁

2018-09-29 15:42:26

相似问题

关于关系表

关于synchronized

关于7-2作业题

关于复杂度计算的问题

关于%运算符的问题

登录后可查看更多问答，登录/注册

响应式开发与常用框架 2018

参与学习人
提交作业 2198 份
解答问题 5012 个

如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！

本课精华内容

问答作业

图片高度不一样的问题

45 24

请问老师原理是什么

70 16

请问老师到底是什么机制

44 12

我的js为什么绑定不上啊

0 11

请问这个怎么解释

44 11

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载