2-7作业header部分和gallery的响应式布局

首页课程实战体系课手记专栏慕课教程

2-7作业header部分和gallery的响应式布局

来源：2-7 作业题

soso_crazy

2019-03-08 19:13:19

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1, user-scalable=no">

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

<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<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="nav.css" />

<script src="bootstrap2-7作业.js"></script>

<title>Document</title>

</head>

<body>

<nav>

<div class="container">

<div class="row">

<nav class="navbar navbar-default">

<div class="container-fluid">

<div class="navbar-header">

<button type="button" class="navbar-toggle collapsed col-lg-2 col-md-2 col-sm-2 col-xs-2" 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>

<a class="navbar-brand" href="#"><img src="素材/logo.png"></a>

</div>

<div class="collapse navbar-collapse col-lg-7 col-md-7 col-xs-7 col-sm-7" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav">

<li class="active"><a href="#">首页<span class="sr-only">(current)</span></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>

<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 href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">婚礼 <span class="caret"></span></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 href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">专用 <span class="caret"></span></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 href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">商铺 <span class="caret"></span></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>

</nav>

<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 text-center">

<div class="iconImage">

<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>

</div>

<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 text-center">

<div class="iconImage">

<div class="dropdown">

<span class="glyphicon glyphicon-user dropdown-toggle" data-toggle="dropdown"></span>

<div class="dropdown-menu pull-right">

<form class="user" role="form">

<div class="from-group">

<label for="email">Email</label>

<input class="form-control" id="email" type="email">

</div>

<div class="from-group">

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

<input class="form-control" id="password" type="password">

</div>

<button class="btn btn-default" type="submit">登陆</button>

<div class="checkbox">

<label>

<input type="checkbox">记住

</label>

</div>

<span>新用户？<span>注册|</span><span>忘记密码？</span></span>

</form>

</div>

</div>

</div>

</div>

<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 text-center">

<div class="iconImage">

<div class="dropdown">

<span class="glyphicon glyphicon-search dropdown-toggle" data-toggle="dropdown"></span>

<div class="dropdown-menu pull-right">

<div class="input-group">

<input type="text" class="form-control" aria-describedby="basic-addon2">

<span class="input-group-addon" id="basic-addon2">搜</span>

</div>

</form>

</div>

</div>

</div>

</div>

</div>

</div>

</nav>

<section class="banner">

<div class="container">

<div class="row">

<div class="flex-box pull-left col-lg-6 col-md-6 col-sm-6 col-xs-6">

<p>IMOOC<span>蛋糕</span></p>

<p>特别的日子，特别的你</p>

<button type="button">shop now</button>

</div>

<div class="cake pull-right col-lg-6 col-md-6 col-sm-6 col-xs-6">

<img src="素材/2.png">

</div>

</div>

</div>

</section>

<section class="gallery">

<div class="container">

<div class="row">

<div class="col-lg-8 col-md-8 col-sm-8">

<div class="thumbnail">

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

<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"><span>view</span></span>

<button class="pull-right" type="button">show now</button>

</div>

</div>

</div>

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

<div class="thumbnail">

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

<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"><span>view</span></span>

<button class="pull-right" type="button">show now</button>

</div>

</div>

</div>

</div>

</div>

<div class="container">

<div class="row">

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

<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"><span>view</span></span>

<button class="pull-right" type="button">show now</button>

</div>

</div>

</div>

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

<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"><span>view</span></span>

<button class="pull-right" type="button">show now</button>

</div>

</div>

</div>

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

<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"><span>view</span></span>

<button class="pull-right" type="button">show now</button>

</div>

</div>

</div>

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

<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"><span>view</span></span>

<button class="pull-right" type="button">show now</button>

</div>

</div>

</div>

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

<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"><span>view</span></span>

<button class="pull-right" type="button">show now</button>

</div>

</div>

</div>

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

<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"><span>view</span></span>

<button class="pull-right" type="button">show now</button>

</div>

</div>

</div>

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

<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"><span>view</span></span>

<button class="pull-right" type="button">show now</button>

</div>

</div>

</div>

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

<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"><span>view</span></span>

<button class="pull-right" type="button">show now</button>

</div>

</div>

</div>

</div>

</div>

</section>

</body>

</html>

ul {

list-style: none;

}

a,

a:hover {

text-decoration: none;

}

.navbar-brand {

padding: 8px 0 5px 15px;

}

/* 中文导航栏设置 */

nav,

nav.navbar,

.navbar-default {

background-color: #5D4B33;

margin: 0;

}

nav.navbar,

.navbar-default {

border: none;

}

.navbar-default .navbar-nav>.active>a,

.navbar-default .navbar-nav>.active>a:hover,

.navbar-default .navbar-nav>.active>a:focus,

.navbar-default .navbar-nav>li>a:hover,

.navbar-default .navbar-nav>.open>a,

.navbar-default .navbar-nav>.open>a:focus,

.navbar-default .navbar-nav>.open>a:hover {

background-color: #F07818;

color: #ffffff;

}

.navbar-collapse .dropdown-menu {

width: 450px;

height: 250px;

}

.navbar-collapse .dropdown-menu-left,

.navbar-collapse .dropdown-menu-middle,

.navbar-collapse .dropdown-menu-right {

float: left;

padding-top: 20px;

width: 140px;

}

.navbar-collapse .dropdown-menu ul li {

margin: 10px 0;

}

.navbar-collapse .dropdown-menu ul li a:hover {

color: #FF8C00;

}

.navbar-collapse .dropdown-menu ul li h4 {

color: #FF8C00;

font-weight: bold;

}

.navbar-collapse .dropdown-menu ul li a {

color: gray;

}

/* 字体图标导航 */

.col-lg-1,

.col-md-1,

.col-sm-1,

.col-xs-1 {

padding: 0;

}

.iconImage {

border-left: 1px solid #ffffff;

border-color: rgba(255, 255, 255, .4);

}

.iconImage .glyphicon {

color: #ffffff;

}

.iconImage .dropdown {

padding: 15px 0;

}

/*搜索字体图标下拉菜单*/

.glyphicon-search~.dropdown-menu {

width: 130px;

height: 70px;

}

.input-group {

padding: 10px 5px;

}

.input-group span.input-group-addon {

border: 1px solid #FF8C00;

background-color: #FF8C00;

color: #ffffff;

}

.search input[type='search'] {

width: 2rem;

height: .32rem;

border: 1px solid #FF8C00;

}

/*用户字体图标下拉菜单*/

.glyphicon-user~.dropdown-menu {

width: 250px;

height: 260px;

}

form.user {

padding: 10px;

width: 249px;

height: 255px;

text-align: center;

}

.from-group {

padding-bottom: 13px;

text-align: left;

}

.checkbox {

text-align: left;

}

form.user button[type="submit"] {

background-color: #FF8C00;

height: .3rem;

width: 2.3rem;

text-align: center;

margin: 0 auto;

color: #ffffff;

padding: 0;

border-radius: 0;

border: 1px solid #FF8C00;

}

form.user button[type="submit"]:hover {

background-color: #ffffff;

color: #FF8C00;

cursor: pointer;

}

form.user span span:first-child {

color: #FF8C00;

}

/*购物车字体图标下拉菜单*/

.glyphicon-shopping-cart~.dropdown-menu {

width: 100px;

height: 70px;

}

form.shoppingCar {

margin: 0 auto;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}

form.shoppingCar input[type="submit"] {

width: 60px;

color: #ffffff;

height: 20px;

margin: 0 auto;

border: 1px solid #FF8C00;

background-color: #FF8C00;

}

/* 字体图标下拉菜单的小三角 */

.iconImage .dropdown-menu::after {

width: 0;

height: 0;

border: solid transparent;

position: absolute;

content: '';

border-width: 10px;

border-bottom-color: #ffffff;

/*border-bottom是底部呈三角形*/

top: -20px;

left: 68%;

}

/* 选中第二个字体图标user的三角形 */

.glyphicon-user~.dropdown-menu::after {

left: 78%;

}

/* 选中第三个字体图标shoppingcar的三角形 */

.glyphicon-shopping-cart~.dropdown-menu::after {

left: 65%;

}

/* 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: .3rem;

color: #5D4B33;

}

section.banner .container .flex-box span:first-child {

font-size: .3rem;

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;

}

section.banner .container .flex-box button:hover {

border: .1rem solid #FF8C00;

color: #FF8C00;

}

/* gallery遮罩层 */

section.gallery .container .thumbnail {

position: relative;

/*图片和遮罩层是兄弟关系，不能让遮罩层设置相对于图片定位，应该参照父容器定位*/

}

section.gallery .container .thumbnail .cover {

display: none;

position: absolute;

bottom: 77px;

left: 0;

z-index: 3;

width: 100%;

height: .48rem;

color: #ffffff;

background-color: rgba(0, 0, 0, .6);

}

section.gallery .container .thumbnail:hover .cover {

display: block;

}

.glyphicon-eye-open {

color: #ffffff;

display: inline-block;

height: .4rem;

line-height: .4rem;

padding: 0 20px;

}

.glyphicon-eye-open span {

display: inline-block;

height: .4rem;

margin-left: 5px;

line-height: .4rem;

}

section.gallery div.cover button {

border: 1px solid #ffffff;

color: #ffffff;

background-color: transparent;

height: .3rem;

margin-top: 10px;

margin-right: 10px;

}

section.gallery div.cover button:hover {

border: 1px solid #FF8C00;

color: #FF8C00;

cursor: pointer;

}

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

.col-lg-8,

.col-md-8,

.col-sm-8,

.col-xs-8 .thumbnail {

width: 100%;

float: left;

}

.col-lg-4,

.col-md-4,

.col-sm-84.col-xs-4 .thumbnail {

width: 30%;

float: left;

}

}

@media screen and (max-width:640px) and (min-width:481px) {

.gallery .container .col-lg-8,

.gallery .container .col-md-8,

.gallery .container .col-sm-8,

.gallery .container .col-xs-8 .thumbnail {

width: 100%;

float: left;

}

.gallery .container .col-lg-4,

.gallery .container .col-md-4,

.gallery .container .col-sm-84.col-xs-4 .thumbnail {

width: 30%;

float: left;

}

.glyphicon-eye-open {

height: .2rem;

line-height: .2rem;

padding-left: 5px;

}

.glyphicon-eye-open span {

height: .2rem;

margin-left: 5px;

line-height: .2rem;

}

}

@media screen and (max-width:480px) and (min-width:321px) {

.gallery .container .col-lg-8,

.gallery .container .col-md-8,

.gallery .container .col-sm-8,

.gallery .container .col-xs-8 .thumbnail {

width: 100%;

float: left;

}

.gallery .container .col-lg-4,

.gallery .container .col-md-4,

.gallery .container .col-sm-84.col-xs-4 .thumbnail {

width: 50%;

float: left;

}

}

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

section.gallery .container .thumbnail {

width: 100%;

float: left;

}

}

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

/* 部分导航项点开之后，下面的导航项位置显示不对,因为上面的子菜单中设置了浮动，高度没有撑起来 */

.navbar-nav .open .dropdown-menu {

position: static;

float: none;

width: auto;

margin-top: 0;

background-color: transparent;

border: 0;

box-shadow: none;

overflow: hidden;

}

.navbar-default .navbar-toggle:focus,

.navbar-default .navbar-toggle:hover {

background-color: #FF8C00;

}

/* 导航栏响应式 */

.navbar-toggle {

width: 45px;

margin: 8px auto;

/* 为什么不能居中？ */

}

/* 导航栏设置 */

.navbar-default .navbar-collapse,

.navbar-default .navbar-form {

width: 100%;

margin: 0;

}

.nav>li {

text-align: center;

}

/* banner区域的响应式 */

.banner img {

width: 100%;

}

}

$('.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对象的一个子对象。

header部分的字体图标如何放到最右边？
header部分的手机端如何调整？
为什么响应式中gallery的图片一行三列@media screen and (max-width:768px) and (min-width:640px)时排列有问题？
一行三列时遮罩层该如何调整才令show now的字不会跑到下一行？

写回答

1回答

Miss路

Miss路

2019-03-10

同学，你好。

你的作业中问题比较多，详细建议和解答可能要写好几页的文档，建议您直接提交作业，批作业的老师会为你指出每一个问题，并给出修改建议。

如果帮助到了你，欢迎采纳！

祝学习愉快！

0

0 学习 · 5012 问题

相似问题

gallery区域怎么排布？

回答 1

作业--下拉菜单问题

回答 1

老师,能不能给出各个大小页面的样式原图,好让我们能够更好的对比页面?

回答 1

作业2-7

回答 2

图片高度不一样的问题

回答 8

打开慕课网App查看更多内容