图片不居中，banner下有一条灰色的条，法国餐馆电话为蓝色且有下划线
秋名山的豆腐
2017-05-24 08:19
原代码如下：
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/reset.css"/>
<link rel="stylesheet" href="css/common.css"/>
<link rel="stylesheet" href="css/index.css"/>
</head>
<body>
<div>
<div class="public-container clearfloat">
<div><a href=""></a></div>
<ul class="header-nav clearfloat">
<li><a href="">Our Story</a></li>
<li><a href="">Menu</a></li>
<li><a href="">Reservations</a></li>
<li><a href="">News</a></li>
<li><a href="">Reviews</a></li>
</ul>
</div>
</div>
<div>
<div><img src="images/demo1.jpg" alt="banner"/></div>
<div>
<div></div>
<p>
<i class="line line-l"></i>
<span>resto restaurant home page website template resto restaurant home page website template</span>
<i class="line line-r"></i>
</p>
</div>
</div>
<div class="public-container index-list"></div>
<div class="public-container index-panel">Feature Dishes
<div></div>
</div>
<div class="public-container index-panel">The Gallery
<div></div>
</div>
<div class="/*public-container*/ public-footer">
<div class="public-container clearfloat">
<div>
<p>New York Restaurant<br>3926 Anmoore Road<br>New York, NY 10014<br><a href="tel:718-749-1714">718-749-1714</a>
</p>
</div>
<div>
<p>France Restaurant<br>68, rue de la Couronne <br>75002 PARIS<br>02.94.23.69.56</p>
</div>
<div>
<a href="">Blog</a>
<a ref="">Careers</a>
<a ref="">Privacy Policy</a>
<a>Contact</a>
</div>
<div>
<div></div>
<div>© All Rights Reserved 2014. Find More at Pixelhint.com</div>
</div>
</div>
</div>
</body>
</html>
Reset
body, div, dl, dt, dd, ul, li, h1, h2, h3, h4, h5, h6, input, form, a, p, textarea{
margin: 0;
padding: 0;
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
}
ol, ul, li {
list-style: none;
}
a {
text-decoration: none;
display: block;
color:#fff;
}
img {
border: none;
display: block;
}
.clearfloat {
zoom: 1;
}
.clearfloat:after {
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0;
}
Common
.public-header {
height: 110px;
/*background: #003bb3;*/
}
.public-header .header-logo {
float: left;
margin-top: 40px;
}
.public-header .header-logo a {
width: 182px;
height: 54px;
background: url("../images/index-header-logo.png");
}
.public-header .header-nav {
float: right;
font-size: 14px;
}
.public-header .header-nav a:hover{
text-decoration: underline;
}
.public-header .header-nav .item {
float: left;
margin-top: 44px;
color: #3b3b3b;
margin-left: 50px;
}
.public-header .header-nav a {
color: #3b3b3b;
}
.public-container {
position: relative;
margin: 0 auto;
/*background: #006dcc;*/
/*height: 100px;*/
width: 1100px;
}
.public-footer {
height: 218px;
padding-top: 100px;
background: #3b3b3b;
}
.public-footer .footer-col {
width: 230px;
float: left;
margin-right: 60px;
font-size: 16px;
color: #fff;
line-height: 1.8;
}
.public-footer .footer-col:last-child {
margin-right: 0;
}
.public-footer .footer-logo {
width: 182px;
height: 54px;
margin-top: -16px;
margin-bottom: 12px;
background: url("../images/index-footer-logo.png");
}
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: -388px;
}
.index-banner-text .text-logo {
width: 776px;
height: 117px;
background: url("../images/index-banner-textlogo.png") no-repeat;
}
.index-banner-text .text-info {
margin-top: 17px;
text-align: center;
color: #fff;
}
.index-banner-text .text-info .line {
display: inline-block;
width: 40px;
border-top: 1px solid #fff;
vertical-align: middle;
}
/*.index-banner-text .text-info .line-l {
margin-right: 26px;
}
.index-banner-text .text-info .line-r {
margin-left: 26px;
}*/
.index-banner-text .text-info .txt {
margin: 0 26px;
}
奇怪，代码复制进来问题这里，缩进没有了，要怎么解决这个问题呢？
1回答
-
- 慕田峪888
- 2017-05-25 23:04:20
Index
.index-banner {
position: relative;
background: #b3b3b3;
}
这里吧background去掉
从 psd 到 html
105471 学习 · 410 问题
相似问题