gpt4 book ai didi

html - 设计页面的 CSS 技巧

转载 作者:行者123 更新时间:2023-11-28 19:05:54 25 4
gpt4 key购买 nike

我需要设计一个页面,每边都有边框图像。我需要页面适合 1280x1024 和 1024x768 分辨率。是否可以为中心 div 设置固定大小并以较低的分辨率裁剪边框图像?

  • 1280x1024 : border-200px center-840px border-200px
  • 1024x768 : border-72px center-840px border-72px

我用 200px X 5px 制作了两张图片。我尝试使用 float 属性但没有成功。所以我到目前为止都是这样做的,它适用于 1280x1024 但不适用于 1024x768(太宽)。

HTML:

<body>
<div id="right"></div>
<div id="left"></div>
<div id="center">
<h1>Title</h1>
<p>Content here</p>
</div>
</body>

CSS:

html {
margin: 0px;
padding: 0;
}

body {
margin: 0px;
padding: 0;
width: 100%;
background-color: white;
overflow: auto; /*to clear the floats*/
}

#right {
clear: both;
position: absolute;
right: 0;
background-image: url('/site_media/images/border-right.jpg');
background-repeat: repeat-y;
width: 200px;
height: 100%;
}

#left {
clear: both;
position: absolute;
left: 0;
background-image: url('/site_media/images/border-left.jpg');
background-repeat: repeat-y;
width: 200px;
height: 100%;
}

#center {
width: 840px;
margin: 0px auto;
padding-left:10px;
padding-right:10px;
}

谢谢!

最佳答案

因为中心元素如果是固定宽度的,这应该很容易。侧边框应作为“背景”放置在正文中,而不是拥有自己的 div。

如果我错了,请纠正我,根据我在这里的理解,您希望通过 1024 分辨率剪切/裁剪侧边框而不是缩小。你如何制作一个宽度为 1280 的单个图像,相应地在其中放置两侧边框图像,左右,将中心区域留空。将其保存为单个图像(如果您想要透明背景,则由您决定),然后执行以下操作。

<style type="text/css">
body { /* can also use your own div */
background:url(path_to_the_single_image) repeat-y top center;
}

#center {
width:840px;
margin:0 auto; /* centered the div */
background:green;
}
</style>

<body>
<div id="center">center content</div>
</body>

就是这样!现在你的固定宽度元素应该在中间,而你的侧边框在背景中。如果你以 1280 加载它,你应该看到完整的边框,而如果你将尺寸缩小到 1024,你的居中元素应该保留在那里,而你刚才的侧边框应该被浏览器裁剪掉。

如果这就是您要找的,请告诉我..:)

关于html - 设计页面的 CSS 技巧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3518148/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com