2

我正在尝试让网页具有与 livingsocial 及其登录页面相同的设置。基本上中间有一个大 div,里面包含其他东西。

看看他们的 css,我发现他们使用了很多基于网格的设计

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9,    
.grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16
{
    display: inline;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
    position: relative;
}

我对 CSS 完全没有了解,我正在寻找一个框架的帮助来让自己的事情变得更轻松。

问题

  • 生活社交也使用 CSS 框架吗?
  • 如果我想获得一个像 livingsocial 这样的网络模板,那么哪个框架是我最好的选择?我查看了蓝图 CSS,但他们的演示页面看起来不像我想要的
  • 今天我遇到了语义网格 css 系统(http://semantic.gs/),但再次无法理解如何/做什么来制作像生活社交这样的骨架。
  • 任何关于如何使用该框架的好的教程都会有很大帮助。
4

3 回答 3

2

回答您的问题:

  • 生活社交也使用 CSS 框架吗?

看起来是这么回事。这些.grid_x东西是你在基于网格的框架中找到的东西,其中有很多。

  • 如果我想获得一个像 livingsocial 这样的网络模板,那么哪个框架是我最好的选择?我查看了蓝图 CSS,但他们的演示页面看起来不像我想要的

在深入研究框架之前,请先学习 CSS 的基础知识。了解框架的作用以及哪个框架适合您的需求总是很好的。如果您不了解所需框架的语言的基础知识,您将不会知道这一点。谷歌搜索会得到大量的 CSS 教程,但我特别喜欢这个网站:http ://css-tricks.com/

  • 今天我遇到了语义网格 css 系统(http://semantic.gs/),但再次无法理解如何/做什么来制作像生活社交这样的骨架。

再次,学习 CSS 的基础知识。一旦你从框架或网格开始,一切都会变得清晰。

  • 任何关于如何使用该框架的好的教程都会有很大帮助。

我可以给另一个建议吗?使用http://compass-style.org/作为框架。它拥有所有基础工具,可以相对轻松地创建网站,还提供帮助来让您的排版、div 对齐、图标精灵和网格正确。此外,它已经解决了 CSS 的所有跨浏览器问题。

教程可以在这里找到:http ://compass-style.org/help/

于 2011-08-23T22:14:48.660 回答
0

看起来他们只是使用 float:left 和 float:right 将两个 div 并排放置。

所以,如果你有;

<div style="float:left">Left div</div>
<div style="float:right">Right div</div>

它们将彼此相邻出现。

然后在这两个 div 中放置其他内容,例如更多 div。

每次添加另一个 div 时,都需要使用 css 放置它。

.div1 { margin-top:20px; padding-left:30px }

这就是您如何在 LivingSocial 中放置内容的方式。

将它们全部放置可能有点棘手,但是一旦完成,就很容易在屏幕上移动项目并跟随内容。

我希望这有帮助

编辑

如果你真的不想涉足 css 的世界,那么不妨看看http://themeforest.net/看看有没有你可以购买的主题

于 2011-08-23T22:10:08.213 回答
0

我认为 Semantic 是一个不错的选择,它也具有响应性,因此如果您想让您的网站与支持 HTML5 的设备上的不同移动设备屏幕宽度兼容,建议您更好地了解 Semantic。

您可以在此处阅读有关响应式网页设计的更多信息: http ://www.alistapart.com/articles/responsive-web-design/

关于 Semantic 需要记住的一件事是它是一个 LessCSS 实现,在此处查看有关 LessCSS 的更多信息:http: //lesscss.org/ LessCSS 为您的网站样式打开大门,所以花点时间学习它,相信我,它是值得。

另外,看看今天发布在 SmashingMagazine 上的这篇文章:http: //coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/ 它可能会回答一些问题你的问题。

我强烈建议订阅 Smashing Magazine 的 RSS 提要,它是学习 Web 开发最新趋势和技术的最佳选择。

最后,学习 Semantic 的最佳选择是下载它,让它运行并剖析它,它应该带有一个演示。在http://semantic.gs/的页面上还有一个教程部分。

于 2011-08-23T22:18:18.490 回答