Question

我正在为一家餐馆的网站发布主页的桌面编写代码，但是我似乎遇到了一些问题（嗯，有多个问题，但我将从这个问题开始）。我似乎无法弄清楚如何调整从InDesign导出并在Dreamweaver中编码的标头的大小，以适合其余内容。右侧还有一些我无法摆脱的空白。我尝试了各种方法，例如添加“ overflow：hidden”，该方法只是切断内容并添加滚动条。有人愿意帮助我吗？我很生气，只是想弄清楚这一点。谢谢！（我的Dreamweaver 2019的html和CSS代码在下面发布）

！更新！

你好，所以这是一个更新：我将图像从InDesign复制并粘贴到Illustrator，然后将图像导出为jpeg（导出为html或css无效）。在Dreamweaver中，我的网页看起来很棒，但是当我将其加载到浏览器中时，图像会变形并被截断。只有稍微调整整个浏览器的大小，我的网页才会看起来正常。我已经用Google搜索这个问题，没有找到解决方案。由于某种原因，浏览器不支持该大小，并且我不知道如何解决。

enter code here

<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Majesti Banner Bold;
  margin: 0;
}

/* Style the header */
.header {
  padding: 80px;
  text-align: center;
  background: #1abc9c;
  color: white;
  background-image: url(images/banner.jpg);
  background-size: cover;  
}

/* Increase the font size of the h1 element */
.header h1 {
  font-size: 40px;
}

/* Style the top navigation bar */
.navbar {
  overflow: hidden;
  background-color: #41393d;
}

/* Style the navigation bar links */
.navbar a {
  float: right;
  display: block;
  color: #d7e4c2;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
}

/* Right-aligned link */
.navbar a.right {
  float: right;
}

/* Change color on hover */
.navbar a:hover {
  background-color: #be1e2d;
  color: #d7e4c2;
}

/* Column container */
.row {  
  display: flex;
  flex-wrap: wrap;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
  flex: 30%;
  background-color: #41393d;
  padding: 20px;
}

/* adding color to <h2> element */
h2 {
    color: #d7e4c2
}
/*adding color to <h4> element */
h4 {
        color: #d7e4c2;
        text-align: center; 
    }

/* Main column */
.main {   
  flex: 70%;
  background-color: white;
  padding: 20px;
  background-image: url(images/shutterstock_1531950407.jpg);
  background-size: cover; 
}

/* Style the footer */
footer {
  background-color: #be1e2d;
  padding: 10px;
  text-align: center;
  color: white;
}
</style>
</head>
<body>

<div class="header">

</div>

<div class="navbar">
  <a href="contact.html">Contact</a>
  <a href="reservations.html">Reservations</a>
  <a href="about.html">About</a>
  <a href="index.html">Home</a>
</div>

<div class="row">
  <div class="side">
    <h2><center>Welcome!</center></h2>
    <h4><i>TOWN is a high-end fine dining restaurant which serves traditional Chinese cuisine with an added flare. Spanning 4 generations, TOWN prides itself on using the finest organic ingredients available with no added preservatives or MSG, giving you the most authentic experience possible! Part of our mission statement is to bring quality, style, and the wish for good fortune to all of our guests!</i></h4>
    </div>

<div class="main">

  </div>

</div>

<footer>
  <p>Footer</p>
</footer>

</body>
</html>

[ image view in dreamweaver ] [1

Answer 1

首先在您的.header CSS中，将width的值更改为100%;。您还将要删除负边距，并将background-size更改为cover !important。

让我知道是否可行

谢谢。

我无法获得适合页面内容的页眉图像

1 个答案: