帮忙找出布置此页面部分的最佳方法？

我的想法是根据代码结构设计的最佳方式绘制一个空白页，可以使用<dl>或<ul>标签来实现，还是必须有div等等？帮忙找出布置此页面部分的最佳方法？

所有建议表示赞赏。

http://www.flickr.com/photos/[email protected]/5719672246/in/photostream/

来源

2011-05-14 styler

我刚刚阅读你的编辑，我建议（特别是如果你没有经验）去''唯一的解决方案。你可以用很多方式设计它们的样式，检查'float'属性和'clear'属性。 – jackJoe 2011-05-14 19:06:36

@jackjoe我的博文真的是要找出如何摆脱过度使用divs这就是为什么我也建议使用dl或ul标签做这种布局的可能性。只是试图找出最适合用最少量的混乱的东西 – styler 2011-05-14 19:10:22

我不认为你可以“过度使用”div。如果它在标准范围内，并且如果你可以正确设计，我不介意。对于这样一个简单的布局，它肯定不会是过度使用的情况，至少IMO。 – jackJoe 2011-05-14 19:12:56

我可以做这样的：http://jsfiddle.net/Drnsk/

<ul class="userDetails"> 
    <li> 
     <h4>My Vitals</h4> 
     <div class="social">social</div> 
    </li> 
    <li> 
     <h4>Where I'm From <span>USA</span></h4> 
     <div class="map">map</div> 
    </li> 
    <li> 
     <h4>My Name <span>John</span></h4> 
    </li> 
    <li> 
     <h4>My Age <span>29</span></h4> 
    </li> 
</ul> 

.userDetails { 
    width: 440px; 
    background: #fff; 
    list-style: none; 
    margin: 0; 
    padding: 9px 9px 0 9px 
} 
.userDetails li { 
    overflow: hidden; 
    border-top: 1px solid #000; 
    padding: 9px 0; 
} 
.userDetails li:first-child { 
    padding-top: 0; 
    border-top: 0 
} 
.userDetails h4 { 
    font-weight: bold; 
    font-size: 20px; 
    margin: 0; 
    padding: 0; 
    position: relative 
} 
.userDetails h4 span { 
    font-weight: normal; 
    font-size: 20px; 
    width: 120px; 
    position: absolute; 
    top: 0; right: 0 
} 


.userDetails .social, .userDetails .map { 
    height: 40px; 
    color: #fff; 
    background: #f0f 
}

来源

2011-05-14 19:15:20 thirtydot

恕我直言，列表中的一个标题，虽然有效的HTML，似乎不正确。 – 2011-05-14 19:24:25

@八月Karlstrom：我实际上同意（我认为）。我不确定是将它制作成'h '还是简单地使用'span'。 – thirtydot 2011-05-14 19:29:53

我推荐960 Grid System和使用div的一切铺陈。它是布局设计的一个非常强大的开发工具。

来源

2011-05-14 18:47:42

一个div是一个标签:)

有很多方法可以实现这一点。您需要创建适当的标签（在这种情况下是div），然后使用CSS对其进行设计。

为了让您一开始我的建议是：

<div class="myvitals"> 
    vitals content here 
</div> 
<div class="where"> 
    where content here 
</div> 
<div class="name"> 
    name content here 
</div> 
<div class="age"> 
    age content here 
</div>

那么CSS：

.myvitals { 
    {your properties here} 
} 

and the definition of the other classes here.

明白，这是基本的人有一定的经验，否则，你需要学习一些关于HTML和CSS。

来源

2011-05-14 18:50:16 jackJoe

-1

如果不是因为地图（它占据两列）我肯定会使用一个表的事实部分。合理的妥协可能是使用div元素，如jackJoe发布的解决方案。

来源

2011-05-14 19:27:59

帮忙找出布置此页面部分的最佳方法？

回答

相关问题