酷炫的网络风格,省力

时间:2012-08-14 10:16:25

标签: javascript html css look-and-feel

我有一个包含多个html页面的简单网站。我只使用标准的html标签,如 table(tr,td,th),p,form(输入),center,a,img 。但默认情况下控件看起来很无聊。

我想以最小的努力让它变得更酷。我已经考虑过将一些外部CSS包含在我的页面上(或完全复制) - 但是没有找到任何现成的解决方案。

我想获得一些建议/解决方案,以使我的网站看起来更好,而无需对其进行大量修改。

感谢您的帮助!

3 个答案:

答案 0 :(得分:2)

你可以尝试简单的背景颜色,box-shadow,border-radius,css3渐变和其他css3样式到你的th和td元素以及你的p元素;

表示例如:

table{font-size:11px;margin:auto; color:#fff; border:1px solid #666; background:#4b4b4b url('../images/low_contrast_linen.png') !important; box-shadow:0px 0px 8px 1px #1e1e1e; border-radius:3px; padding:0px;}

table tr:hover{background-color:#666;}

table td{border-top:1px solid #666; padding:10px 5px;}

table th{background-image:-moz-linear-gradient(90deg,#127286, #1a9eba) !important; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#1a9eba', EndColorStr='#127286') !important; background: -webkit-gradient(linear, left top, left bottom, from(#1a9eba), to(#127286)) !important; box-shadow:0 2px 8px #444444; color:#fff; text-shadow:none; background-color:#017AC5;font-weight:normal; padding:8px; font-size:12px; border-right:1px solid #1A9EBA;}

这会在整个网站上为您的桌面添加很好的效果而且需要付出很多努力。 P.S为桌子尝试一个漂亮的亚麻风格的背景图像,它看起来很棒。

这同样适用于其他标签。

答案 1 :(得分:1)

您可以下载只需添加文字的模板:

http://www.oswd.org/ http://www.openwebdesign.org/

只是谷歌“免费css”或其他东西

答案 2 :(得分:0)

尝试使用bootstrap,它添加了许多CSS样式,使一切看起来都很不错。

(在你的情况下,Bootstrap可以提供的页面结构内容并不是真的需要,但我强烈建议你尝试一下)