课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

<li class=“manu-item”>前两个能显示在第一行，第二上开始就不显示了，求指导

来源：4-4 主体pannel结构

Kotler

2017-02-15 10:20

贴上html跟css的code

<!DOCTYPE html>
<html lang-"en">
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/common.css">
	<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
	<!--公共头开始-->
	<div class="public-header">
		<div class="public-container">
			<div class="header-logo"><a href=""></a></div>
			<ul class="header-nav clearfloat">
				<li class="item"><a href="">Our Story</a></li>
				<li class="item"><a href="">Menu</a></li>
				<li class="item"><a href="">Reservations</a></li>
				<li class="item"><a href="">News</a></li>
				<li class="item"><a href="">Rviews</a></li>
			</ul>
		</div>
	</div>
	<!--公共头结束-->
	<!--BANNER开始-->
	<div class="index-banner">
		<div class="index-banner-bg"><img src="images/demo1.jpg" alt="banner1"></div>
		<div class="index-banner-text">
			<div class="text-logo"></div>
			<p class="text-info">
				<i class="line-l"></i>
				<span class="txt">resto restaurant home page website template</span>
				<i class="line-r"></i>
			</p>
		</div>
	</div>
	<!--BANNER结束-->
	<div class="index-menu">
		<div class="menu-tips">The Menu</div>
		<div class="public-container menu-list">
			<ul class="clearfloat">
				<li class="menu-item clearfloat">
						<a class="title">
							<h4>Voluptate cilum fugiat.</h4>
							<p class="comment">Cheese, tomato, mushrooms, onions.</p>
						</a>
 					<div class="line"></div>
					<div class="price">$50</div>
				</li>
				<li class="menu-item clearfloat">
						<a class="title">
							<h4>Voluptate cilum fugiat.</h4>
							<p class="comment">Cheese, tomato, mushrooms, onions.</p>
						</a>
 					<div class="line"></div>
					<div class="price">$50</div>
				</li>
				<li class="menu-item clearfloat">
						<a class="title">
							<h4>Voluptate cilum fugiat.</h4>
							<p class="comment">Cheese, tomato, mushrooms, onions.</p>
						</a>
 					<div class="line"></div>
					<div class="price">$50</div>
				</li>
				<li class="menu-item clearfloat">
						<a class="title">
							<h4>Voluptate cilum fugiat.</h4>
							<p class="comment">Cheese, tomato, mushrooms, onions.</p>
						</a>
 					<div class="line"></div>
					<div class="price">$50</div>
				</li>				
			</ul>
		</div>
		<a href="" class="menu-more-btn">load more <span>|</span><span class="icon"></span> </a>
	</div>
	<div class="public-container index-list"></div>
	<div class="public-container index-panel">
		<div class="index-panel-header">well</div>
	</div>
	<div class="public-container index-panel">
		<div class="index-panel-header">well</div>
	</div>
	<!--公共尾开始-->
	<div class="public-footer">
		<div class="public-container">
			<div class="footer-col">
				<p>
					New York Restaurant<br>
					3926 Anmoore Road<br>
					New York, NY 10014<br>
					<a class="tel" href="tel:158-5200-5116">158-5200-5116</a><br>
				</p>
			</div>
			<div class="footer-col">
				<p>
					France Restaurant<br>
					68, rue  de la Couronne<br>
					75002 PARIS<br>
					02.94.23.69.56<br>
				</p>
			</div>
			<div class="footer-col">
				<p>
					<a href="">Blog</a>
					<a href="">Careers</a>
					<a href="">Privacy Policy</a>
					<a href="">Contact</a>
				</p>
			</div>
			<div class="footer-col">
				<div class="footer-logo"></div>
				<div class="footer-info">
					<p>
						© All Rights Reserved 2014.<br>
						Find  More at Pixelhint.com<br>
					</p>
				</div>
			</div>
		</div>
	</div>
	<!--公共尾结束-->
</body>
</html>
/*index*/
.index-banner{
	position: relative;
	background: #b3b3b3;
}

.index-banner-bg{
	height: 570px;
	overflow: hidden;
}

.index-banner-bg img{
	margin: 0 auto;
}

.index-banner-text {
	position: absolute;
	top: 200px;
	left: 50%;
	margin-left: -338px;
}

.index-banner-text .text-logo{
	width: 776px;
	height: 117px;
	background: url("../images/index-banner-text.png") no-repeat;
}

.index-banner-text .text-info{
	margin-top: 17px;
	text-align: center;
	color: #FFFFFF;
}

.index-banner-text .text-info .line-l {
	display: inline-block;
	width: 40px;
	border-top: 1px solid #FFFFFF;
	vertical-align: middle;
}

.index-banner-text .text-info .line-r {
	display: inline-block;
	width: 40px;
	border-top: 1px solid #FFFFFF;
	vertical-align: middle;
}

.index-banner-text .text-info .txt{
	margin: 0 26px;
}

/*菜单*/
.index-menu{
	position: relative;
	border-top: 4px solid #f34949;
}

.index-menu .menu-tips{
	position: absolute;
	left: 50%;
	top: 0;
	margin-left: -78px;
	width: 156px;
	height: 75px;
	text-align: center;
	line-height: 65px;
	color: #FFFFFF;
	background: #f34949
}


.index-menu .menu-tips:after{
	position: absolute;
	content: "";
	left: 0;
	bottom: 0;
	width: 0;
	height: 0;
	border-left: 78px solid transparent;
	border-right: 78px solid transparent;
	border-bottom: 16px solid #FFFFFF;
}

.index-menu .menu-list{
	margin-top: 150px;
	color: #555;
	overflow: hidden;
}

.index-menu .menu-list ul{
	width: 1160px;
}

.index-menu .menu-item{
	float: left;
	width: 520px;
	margin-right: 60px;
	margin-bottom: 56px; /*menu第二行就不显示了*/
}

.index-menu .menu-item .title , .index-menu .menu-item .line{
	float: left;
}

.index-menu .menu-item .price{
	float: right;
}

.index-menu .menu-item .title{
	width: 230px;
	color: #555555;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.index-menu .menu-item .comment{
	margin-top: 4px;
	color: #b7b7b7;
	font-size: 12px;
}

.index-menu .menu-item .line{
	margin-top: 10px;
	width: 192px;
	border-top: 1px solid #e3e1e1;
}

.menu-more-btn{
	margin: 0 auto;
	width: 114px;
	height: 32px;
	padding-left: 16px;
	border:1px solid #d7d5d5;
	line-height: 32px;
	font-size: 14px;
	color: #b7b7b7;
}

.menu-more-btn .icon{
	display: inline-block;
	width: 11px;
	height: 7px;
	margin-left: 10px;
	background: url("../images/loadmore-icon.gif") no-repeat;
}
/*common*/
.public-header{
	height: 110px;
}

.public-header .header-logo{
	float: left;
	margin-top: 40px;
	
}

.public-header .header-logo a{
	height: 54px;
	width:182px;
	background: url("../images/index-header-logo.png");
}

.public-header .header-nav{
	float: right;
	font-size: 14px;
}

.public-header .header-nav .item{
	color: #3b3b3b;
	float: left;
	margin-top: 44px;
	margin-left: 50px;
}

.public-header .header-nav a{
    color:#3d3d3d;
    }

.public-header .header-nav a:hover{
	font-size: 1.2em;
}

.public-container{
	position: relative;
	margin: 0 auto;
	height: 100px;
	width: 1100px;
}

.public-footer{
	height: 218px;
	background: #3b3b3b;
	padding-top: 100px;
}

.public-footer .footer-col{
	width: 215px;
	float: left;
	margin-left: 60px;
	font-size: 16px;
	color: #fff;
	line-height:1.8;
}

.public-footer .footer-info {
	margin-right: 0px;
	width: 230px;
}

.public-footer .footer-col:last-child{
	margin-right: 0;
}


.public-footer .footer-logo{
	width: 182px;
	height: 55px;
	margin-top: -10px;
	margin-bottom: 12px;
	background: url("../images/index-footer-logo.png");
}
/*reset*/
body,h1,h2,h3,h4,h5,h6,p,div,dd,dt,dl,li,form,a,textarea{
	margin:0;
	padding:0;
	font-family: "Microsoft YaHei",sans-serif;
}

ol,ul,li{
	list-style: none;
}

a{
	text-decoration: none;
	display: block;
	color: #FFFFFF;
}

img{
	border: none;
	display: block;
}

.clearfloat{
	zoom:1;
}
.clearfloat:after{
	display: block;
	clear: both;
	content: "";
	visibility: hidden;
	height: 0;
}


写回答 关注

1回答

  • 自由的气息
    2017-02-16 16:28:53

    猜一下是不是宽度太大放不下了，没描述清楚，”第二上开始“是什么意思？

    0 0

从 psd 到 html

教你把PSD设计稿转化成HTML，用案例来讲解基本流程

105471 学习 · 410 问题

查看课程

相似问题

menu more图标显示在第二行

回答 2

li下加了a标签，内容就不显示了

回答 2

在class="header-logo的"时候显示不出来

回答 1

请问为什么就尾部的图片显示不出来？明明都在一个文件夹，其他都显示了

回答 2

部logo左右显示不了，图片显示不出来

回答 3

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