2008年50个最佳CSS设计

2008年精选的50个最佳 CSS 设计,素材来源是 Best Web Gallery。从今年的设计趋势来看,越来越多的人使用大背景,以及 JavaScript 框架( jQuery 与 MooTools)来增强用户界面。也有个别设计,将 Flash 与 CSS 结合起来使用,这也许是2009年的趋势。

 

Let It Bleed
夺目的视觉效果


Vermont Coffee Works
Flash 结合 CSS


Digital Mash

Good
出色的视觉与内容设计


Wilson Miner

DrupalCon, DC

Future of Web Apps - Miami 2009
大字体有时候也是一种美


Housing Works
很好地运用了大背景设计。大背景设计最近很热门。


Future of Web Design - NYC 2008
大背景设计 的另一个例子


Tennessee - Fall
秋,春,夏,冬,这四个系列站点非常出色


Tennessee - Spring

Tennessee - Summer

Tennessee - Winter

Five Runs

Branded07

Cappuccino
拥有非常好的结构与可用性。


LightCMS
尽管使用了一些铅笔画的效果,仍保持了很好的公司站点的感觉。


The First Twenty
虽然只有一页,但设计着实不错


YouLove.Us
很好的运用了 CSS 与 JavaScript (jQuery)


Luke Larsen
非常出色地运用了 jQuery


Design Disease
圆角与不规则图形让这个站点看上去很有趣


Adaptd
有些类似 Scott Hansen 的 ISO50,但仍值得一提


Jason Santa Maria

Electricurrent
背景图技术


Training by Collective Idea

MacAllan Ridge
很好的视觉设计与简单的导航


Pikaboo
一个结合了 CSS, JavaScript, Flash 的很酷的设计。


Mochi Ads

Volll

Fling Media

eWedding

Viget
在他们的系列 Blog 站点维持了很好的一致性。


Viget - Inspire

Viget - Advance

Viget - Engage

Viget - Extend

August
使用了非常漂亮的可缩放式背景,你可以缩放一下自己的浏览器窗口看一下,当然,不支持 IE6


Car Freaks
这个 Blog 站点经常改变自己的背景图片以带来常看常新的感觉


Go To China
这个站点使用了高分辨率背景图象,而且也是缩放式背景。(这个站点是17个在中国的挪威留学生创建的,我个人非常喜欢里面的内容-译者。)


Jesus Chris [ 关键词:CSS 设计 原文/来源链接 ]

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个简单的介绍孙燕姿音乐的网页示例: HTML 代码: ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>孙燕姿音乐介绍</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>孙燕姿音乐介绍</h1> </header> <main> <div class="container"> <img src="https://i.loli.net/2021/12/07/3OQKUZI8Lb5tRjH.jpg" alt="孙燕姿"> <h2>孙燕姿</h2> <p>孙燕姿,19837月23日出生于新加坡,华语流行女歌手、词曲创作人,被誉为“亚洲天后”。</p> </div> <div class="container"> <h2>获奖情况</h2> <ul> <li>2000:第12届金曲奖新人奖</li> <li>2004:MTV音乐大奖华语最佳女演唱人奖</li> <li>2008:第19届金曲奖最佳国语女演唱人奖</li> <li>2010:第21届金曲奖最佳国语女演唱人奖</li> <li>2014:第25届金曲奖最佳国语女演唱人奖</li> </ul> </div> <div class="container"> <h2>代表作品</h2> <ol> <li>《遇见》</li> <li>《雨天》</li> <li>《我怀念的》</li> <li>《天黑黑》</li> <li>《传说》</li> </ol> </div> </main> <footer> <p>版权所有 © 2021 孙燕姿音乐介绍</p> </footer> </body> </html> ``` CSS 代码: ```css /* 全局样式 */ body { margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f5f5f5; } /* 头部样式 */ header { background-color: #222; color: #fff; text-align: center; padding: 20px 0; } /* 主体样式 */ main { max-width: 800px; margin: 0 auto; padding: 40px; } .container { background-color: #fff; border-radius: 10px; padding: 20px; margin-bottom: 40px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } img { display: block; margin: 0 auto; border-radius: 50%; width: 200px; height: 200px; object-fit: cover; object-position: center; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } h2 { font-size: 24px; margin-bottom: 20px; } p { font-size: 16px; line-height: 1.8; margin-bottom: 30px; } ul, ol { font-size: 16px; line-height: 1.8; margin: 0 0 30px 0; padding-left: 20px; } ul li, ol li { margin-bottom: 10px; } /* 底部样式 */ footer { text-align: center; padding: 20px; background-color: #222; color: #fff; } ``` 这个网页使用了简单的 HTML 结构,包含了一个头部、主体和底部。主体部分包含了三个容器,分别用于展示孙燕姿的个人信息、获奖情况和代表作品。 CSS 样式使用了现代化的设计风格,包括了圆角、阴影和响应式布局。网页的背景色为浅灰色,容器的背景色为白色。头部和底部的背景色为黑色,文字颜色为白色。 在 HTML 中,使用了 `<img>` 标签来展示孙燕姿的照片。CSS 中使用了 `border-radius` 属性来实现圆形头像,使用了 `box-shadow` 属性来实现阴影效果。 代表作品部分使用了有序列表,获奖情况部分使用了无序列表。列表项之间的间隔使用了 `margin` 属性来实现。 整个网页的设计简洁美观,适合用作介绍孙燕姿音乐的网页。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值