我正在尝试将我的 Photoshop 设计转换为网站,手动编写 HTML 和 CSS。这是我第一次做这种类型的练习,所以我从一开始就遇到了页面尺寸方面的小问题。
我用 1920px 的页面宽度做了我的 PS 设计,这是全屏 result .在编写 CSS 时,我将标题宽度设置为 1920px,将 Logo 宽度设置为 150px(与 PS 文件中一样)。但是我得到了this (不用担心 Logo 位置)。
如您所见,页面非常“放大”,滚动条出现在下方。我想在没有滚动条的情况下显示整个页面,就像在 PS 中一样,保持元素之间的比例相同。
这是标题的 HTML 和 CSS 代码:
#logo img {
float: left;
width: 150px;
height: 150px;
}
#header {
position: absolute;
top: 0px;
left: 0px;
width: 1920px;
/* I also tried width: 100% */
height: 100px;
background: #000000;
}
<div id="header">
<div id="logo">
<img src="..\codice\export\logo.png" alt="logo">
</div>
</div>
如代码所示,我还尝试将页眉的宽度设置为 100%,但这样就不会考虑 Logo 比例 (150 px/1920 px)。
如何在 CSS 中编写:“在使用浏览器可视化页面时,1920 应该是你的 100%”?
如果这是一个愚蠢的问题,我很抱歉,但这是我第一次使用这些工具。
最佳答案
我做了这个jsfiddle
你可以检查一个流畅的 width: 100%
你不应该有这个水平滚动条
然后我添加了一个固定宽度为 520px 的 header_content
div(然后你可以看到它居中并且放置得很好。但你需要根据你的 photoshop 标题宽度更改该值。
注意:css margin:0 auto
使您的 div 水平居中。
关于html - 如何在 CSS 中设置默认页面尺寸?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56039852/