时间戳

首页 > 解决方案 > 中央页面信息 css 和 html

html - 中央页面信息 css 和 html

问题描述

我的页面必须是这样的：https : //ibb.co/Z1tZGs3 现在我已经创建了页眉条和页脚条但是我怎样才能制作像 praesent 和 lorem ipsum 这样的中心页面信息有人可以帮助我吗？也许我必须在页眉和页脚之间添加一个导航栏，但我不知道该怎么做以及如何像右侧一样切割页脚条，我想切割一些宽度。

body{
    background-color: #ffff;
    padding:0;
    margin:0;
    font-family: harmy;
}

header{
     background-color: #9cd5e8;
     margin-bottom: -10px;
     color:#838478


}
header.cut{
    margin-right:50px;
}

h1.light{
font-weight: lighter;
}


.cut{

    margin-left:10px;
    margin-right:10px;

}

 .footer{
   background-color: #7fbec0;
 position: fixed;
   left: 0;
   bottom: 0;
<!DOCTYPE HTML>

<html>

<head>
    <link rel="stylesheet" href="./style.css" />

  <title>ORIZZONTE VIAGGI</title>
  <style>
  @font-face {

  font-family: harmy;

  src: url('./font.woff');

}
  </style>
</head>

<body>
    <div class="cut">
   <header>
           <h1 class="light">&nbsp;Orizzonte Viaggi</h1>

   </header>
   <img src="img/beach.jpg" alt="" width="1515" height="420"/>

   </div>
        <div class="cut">
   <div class="footer">

             <p>
                  © 2020 <u>Harman</u>
   </p>
           </div>
   </div>


</body>

</html>

标签： htmlcss

解决方案

这是我根据您的模型提出的建议

body{
    background-color: #ffff;
    padding:0;
    margin:0;
    font-family: harmy;
}


#bodyCenter{
  margin-left:25px;
  margin-right:25px;
}

header{
     background-color: #9cd5e8;
     margin-bottom: -10px;
     color:#838478;
     margin-right:40px;
}

h1.light{
font-weight: lighter;
}

#bigPicture{
  width:100%; /*will take 100% from bodyCenter available width*/
}

 footer{
   background-color: #7fbec0;
 /*position: fixed;
   left: 0;
   bottom: 0;*/
   display: flex;
   justify-content: center;
   }
<!DOCTYPE HTML>

<html>

<head>
    <link rel="stylesheet" href="./style.css" />

  <title>ORIZZONTE VIAGGI</title>
  <style>
  @font-face {

  font-family: harmy;

  src: url('./font.woff');

}
  </style>
</head>

<body>
 <div id="bodyCenter">
   <header>
     <h1 class="light">&nbsp;Orizzonte Viaggi</h1>
   </header>

<img src="https://s2.qwant.com/thumbr/474x325/d/e/3357a239e6aeeb0497d846500eaf15f26a80324945abb2de8bdaef07e06823/th.jpg?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.UKfu8ufBwKPECTmhud4_cQHaFF%26pid%3DApi&q=0&b=1&p=0&a=0" id="bigPicture">

   <div>
   
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus convallis nibh id leo aliquet porta. Etiam euismod pretium mi vitae pretium. Cras eu nibh molestie, venenatis mauris vitae, auctor elit. Fusce fermentum sed ante vel fringilla. Maecenas auctor nec quam nec rutrum. Quisque eu pharetra tortor. Integer nec purus convallis, interdum urna et, tempor tortor. Morbi tristique hendrerit libero quis fermentum. Praesent fringilla fermentum nisl. Integer faucibus sit amet lacus vitae tincidunt. Pellentesque convallis augue eget ligula consectetur tincidunt. Sed cursus volutpat lorem, non rhoncus urna placerat et.

In rutrum gravida sodales. Integer commodo mi quam, et luctus arcu porta sit amet. Suspendisse potenti. Nullam sed lobortis ex. Phasellus commodo ornare velit, quis viverra nulla rhoncus ac. Nulla facilisi. Praesent congue felis eu orci fringilla consequat. In vitae finibus lorem. Aliquam convallis molestie lectus, quis sagittis mauris accumsan et. Sed luctus, turpis vel mattis vehicula, tellus ligula ornare urna, non mattis dolor elit eu lacus.
   
   </div>
   <footer>

      <p>© 2020 <u>Harman</u></p>
   </footer>
 </div>
</body>

</html>

推荐阅读