Question

我的愚蠢代码有问题。（HTML＆CSS）它是Airbnb首页的副本。

参考：https://www.airbnb.jp/host/homes?_set_bev_on_new_domain=1568702785_MTQxMDA4ZDc4ZmM0

1.header-width 不知何故，我的页眉大小很短。我使它变得更长，这个站点的宽度为1050px。因此[header-right]必须正确对齐。

2.footer positon 我的页脚以某种方式站立在站点的中心。

3。图片位置在div类[host-voice-wrapper]中，底部有一张图片（Emma）。但我希望它是句子的权利。

1.check the original source code of Airbnb

1.
~HTML~
-----------
<header>
 <div class="header-left">
 <div class="header-logo">
 <img src="./img/246x0w.jpg">
 </div>
 <div class="header-list">
 <ul>
 <li>概要</li>
 <li>準備</li>
 <li>安全</li>
 <li>マネープラン</li>
 </ul>
</div>
</div>

-----------
~CSS~
-----------
header{
  height:60px;
  padding: 10px 20px;
  position:fixed;
  z-index:10;
  background-color: white;

}

.header-left{
  float:left;
  display:flex;
}

.header-logo img{
  width:50px;
}

.header-list li{
  float:left;
  padding-right:30px;
  font-weight:bold;
}

.header-list li:hover{
  border-bottom:1px solid #7f7f7f;
}

.header-right{
  float:right;
}

.expect-income{

}

.amount{
  font-size:25px;
  font-weight:bold;
}

.start{
  padding:10px 15px;
  background-color:#dc143c;
  color:white;
  border-radius:5px;
  margin:10px;
}

.start:hover{
  cursor:pointer;
  transition:0.3s;
}

-----------
2.
~HTML~
-----------
<footer>
        <img class="footer-logo" src="./img/246x0w.jpg">
        <a>
        Airbnb Global Services Limited
        観光庁長官(01)第S0001号(2018年6月15日-2023年6月14日)
        © 2019 Airbnb, Inc. All rights reserved.</a>
    </footer>
-----------
~CSS~
-----------
footer{
  height:40px;
  border-top:1px solid  #808080;
  padding:10px 0 30px 20px;
}

.footer-logo{
  width:20px;
}

footer a{
  font-size:15px;
}

-----------
3.
~HTML~
-----------
<div class="host-voice-wrapper">
      <div class="container">
        <div class="contents">
          <div class="voice">
            <i class="fas fa-quote-left fa-2x my-orange"></i>
            <br></br>
            <a class="voice-text">「ホスト保証」があったからAirbnb参加を決めたといっても過言でないほどで、被害やトラブルがあったときに頼れるサポートがあるのは本当にありがたいですね。</a>
            <br>
            <a class="host-introduce">Emmaさんはロンドンのホスト。自由度の高さに魅力を感じています</a>
            <br>
            <a class="btn example">ホスト実践例をチェック</a>
          </div>
          <div class="Emma">
            <img src="./img/Emma.jpg">
          </div>
        </div>
-----------

~CSS~
-----------
.host-voice-wrapper{
  margin-top:100px;

}

.contents{
  float:left;
}

.voice{
  width:40%;

}

.voice-text{
  font-size:30px;
}

.host-introduce{
  color:#808080;
}

.example{
  padding:15px 20px;
  border:2px solid #404040;
  border-radius:5px;
  margin-top:20px;
}

.Emma{

  width:400px;
}
-----------

Answer 1

能否请您检查此代码。希望它对您有用。

body {
	margin: 0px;
	padding: 80px 0px;
}

.container {
	width: 1170px;
	margin: 0 auto;
	padding: 0px 15px;
}

header {
	height: 60px;
	padding: 10px 20px;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	;
	z-index: 10;
	background-color: white;
}

.header-left {
	float: left;
	display: flex;
}

.header-logo img {
	width: 50px;
}

.header-list li {
	float: left;
	padding-right: 30px;
	font-weight: bold;
}

.header-list li:hover {
	border-bottom: 1px solid #7f7f7f;
}

.header-right {
	float: right;
}

.amount {
	font-size: 25px;
	font-weight: bold;
}

.start {
	padding: 10px 15px;
	background-color: #dc143c;
	color: white;
	border-radius: 5px;
	margin: 10px;
}

.start:hover {
	cursor: pointer;
	transition: 0.3s;
}

footer {
	height: 40px;
}

.footer-logo {
	margin-right: 10px;
	width: 20px;
}

footer a {
	font-size: 15px;
}

.host-voice-wrapper {
	padding: 80px 0px;
}

.footer-content {
	border-top: 1px solid #808080;
	padding: 10px 0 20px;
}

.footer-content,
.contents {
	display: flex;
	display: -webkit-flex;
	align-items: center;
}

.voice {
	width: 40%;
}

.voice-text {
	font-size: 30px;
}

.host-introduce {
	color: #808080;
}

.example {
	padding: 15px 20px;
	border: 2px solid #404040;
	border-radius: 5px;
	margin-top: 20px;
	display: inline-block;
}

.Emma {
	width: 50%;
	text-align: center;
}

<header>
    <div class="header-left">
        <div class="header-logo">
            <img src="https://image.shutterstock.com/image-illustration/logo-g-letter-on-white-260nw-497276758.jpg">
        </div>
        <div class="header-list">
            <ul>
                <li>概要</li>
                <li>準備</li>
                <li>安全</li>
                <li>マネープラン</li>
            </ul>
        </div>
    </div>
</header>
<div class="host-voice-wrapper">
    <div class="container">
        <div class="contents">
            <div class="voice">
                <i class="fas fa-quote-left fa-2x my-orange"></i>
                <br></br>
                <a class="voice-text">「ホスト保証」があったからAirbnb参加を決めたといっても過言でないほどで、被害やトラブルがあったときに頼れるサポートがあるのは本当にありがたいですね。</a>
                <br>
                <a class="host-introduce">Emmaさんはロンドンのホスト。自由度の高さに魅力を感じています</a>
                <br>
                <a class="btn example">ホスト実践例をチェック</a>
            </div>
            <div class="Emma">
                <img src="https://image.shutterstock.com/image-illustration/logo-g-letter-on-white-260nw-497276758.jpg">
            </div>
        </div>
    </div>
</div>
<footer>
    <div class="container">
        <div class="footer-content">
            <img class="footer-logo" src="https://image.shutterstock.com/image-illustration/logo-g-letter-on-white-260nw-497276758.jpg">
            <a>
Airbnb Global Services Limited <br>
観光庁長官(01)第S0001号(2018年6月15日-2023年6月14日) <br>
© 2019 Airbnb, Inc. All rights reserved.
</a>
        </div>
    </div>
</footer>

关于页眉宽度，页脚位置，图片位置。我的糟糕代码无法正常工作

1 个答案: