CSS网页设计实例:设计制作大背景网页

网页制作Webjx文章简介：如何用CSS实现大背景网页设计.

自从我发布了大背景网页设计合集之后，我收到了很多电子邮件询问如何用css实现大背景的网页设计。因此我决定和大家分享大背景网站的设计技巧。在此教程中，我会用一些实例来说明如何用一张或者两张图片实现大背景网站的设计。

经常会犯的错误：背景被裁减（查看示例）

查看示例文件，在小于1280分辨率时，是没有问题的。但是如果你的显示器的分辨率大于1280像素，你会看到背景图片以外的部分。

实例1：一张图片（查看示例）

简单的解决问题的方法：将图片边缘的颜色设置成和网页背景色相同的颜色。这里我用Web Designer Wall作例子，看下面的图片，注意图片的边缘是纯色的。

CSS部分

这部分很简单，为body元素设置背景图像（定位于center，top）

以下是css代码：

body {
padding: 0;
margin: 0;
background: #f8f7e5 url(wdw-bg.jpg) no-repeat center top;
width: 100%;
display: table;
}

注意观察在body选择符内有两条额外的线条，这样是为了防止当浏览器窗口比内容宽度小时，背景图片的改变。（这在firefox会出现）

[1] [2] 下一页

时间： 2024-12-28 10:07:10

CSS网页设计实例:设计制作大背景网页的相关文章

CSS3网页布局实例代码:始终在网页底部代码2则

文章简介:CSS3网页布局实例代码:始终在网页底部代码2则 <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>始终在底部(1)</title><style>body{margin:0} html, body{height:100%}

CSS网页设计实例:无图片的网页按钮

文章简介:CSS3制作圆角按钮,无需图片. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Futurico UI - CSS3 Buttons Tutorial</title>  <style type="text/css"

文章描述:在很多人眼里,日本是一个隐忍.充满禅意的国家.以寺庙.茶道.电子产品而闻名.既传统,又现代.日本的建筑设计.书刊设计受世界瞩目.但是不知怎么的,日本的网页设计风格很怪异.有点像1998年的网页风格. 在很多人眼里,日本是一个隐忍.充满禅意的国家.以寺庙.茶道.电子产品而闻名.既传统,又现代.日本的建筑设计.书刊设计受世界瞩目.但是不知怎么的,日本的网页设计风格很怪异.有点像1998年的网页风格. Rakuten NicoNicoDouga Gigazine 看看日本这些最流行的网站(比

CSS3代码实例:CSS3制作清新网页导航

文章简介:CSS3制作小清新导航. HTML结构 <ul class="nav"> <li id="button1"><a href="#button1">Home</a></li> <li id="button2"><a href="#button2">About</a></li> <l

交互设计实例:设计注册激活邮件的心得

最近做了一次口碑网注册流程改造,简单说一下激活邮件的设计上的一些小心得:1.尽量不要用图片,尤其是别把激活链接做成一个点击按钮.2.尽量少的给链接,最好只有一个显眼的链接.其他链接一律变短,弱化.链接明文显示.以上两点,都是基于激活邮件的第一要素:简洁,省去所有不必要的干扰元素.让用户打开邮件,快速点击激活链接走人,符合用户的利益,也符合网站的激活达成率要求.这里有个小技巧,可能有些设计师仅从设计角度考虑的话,把激活链接做成一个显眼的按钮状以示强调,适得其反.这往往是一张显眼的图片,而很多邮箱在

跪球高手解答在j2ee网页中混入.net制作的网页会造成灾难性的后果吗

问题描述单位的产品销售系统是ibm用jspj2ee编写的现在由于某种需要我要自己用.net编写简单的搜索..隐形以链接的形式潜入j2ee的框架网页也就是网页左边是j2ee/jsp右边是.net.不知有何潜在风险解决方案解决方案二:挺有意思的,偶也想知道..

实例：实现动态网页的静态缓存

源动态网页 <title>实例:实现动态网页的静态缓存</title> <h3>实例:实现动态网页的静态缓存</h3> <p> <chtml> <for end=0 start=20> <b>@{int:@{for:getSuffix}+1}-</b> <forendforendforendforend=@{for:getSuffix}>

如何用CSS实现大背景网页设计

自从我发布了大背景网页设计合集之后,我收到了很多电子邮件询问如何用css实现大背景的网页设计.因此我决定和大家分享大背景网站的设计技巧.在此教程中,我会用一些实例来说明如何用一张或者两张图片实现大背景网站的设计. 经常会犯的错误:背景被裁减(查看示例) 查看示例文件,在小于1280分辨率时,是没有问题的.但是如果你的显示器的分辨率大于1280像素,你会看到背景图片以外的部分. 实例1:一张图片(查看示例) 简单的解决问题的方法:将图片边缘的颜色设置成和网页背景色相同的颜色.这里我用Web Des

CSS网页设计实例:商旅网首页的标签切换

文章简介:CSS网页设计实例:商旅网首页的标签切换. 上个月的项目了...标签切换有很多方法可以实现,这里贴一段我个人很喜欢用的代码: <ul class="tabmenu"><li class="menu_flt">机票</li>< li>酒店</li>< li>旅游度假</li>< /ul> 对于web标准化来讲,这种结构很清晰,当图片未显示的时候同样可以知道文本内容