代码之家 › 专栏 › 技术社区 › codea

CSS设计页面的技巧

css html

codea · 技术社区 · 14 年前

我需要设计一个页面,每边都有边框图片。我需要的网页,以适应1280x1024和1024x768决议。有没有可能有一个固定的大小为中心div和裁剪边界图像在较低的分辨率?

1280x1024:边框-200px中心-840px边框-200px

我用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;
}

2 回复 | 直到 14 年前

Faizal Heesyam 14 年前

由于中心元素如果宽度固定,这应该很容易。侧边边框应作为“背景”放置在正文中,而不是有自己的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>

让我知道这是否是你想要的……)

Dziad Borowy 14 年前

例子:

<style type="text/css">
#wrapper { position: relative; }
#right, #left { width: 200px; position: absolute; background: gray; }
#right { right: 0; }
#left { left: 0; }
#center { width: 840px; margin: 0 auto; background: green; position: relative; }
</style>
<body>
    <div id="wrapper">
        <div id="left">left</div>
        <div id="right">right</div>
        <div id="center">center</div>
    </div>
</body>

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前