Question

我的想法是在关于可能使用<dl>或<ul>标签附加到此帖子的代码结构来设计设计的最佳方式上留下空白，是否可以使用{{1}}或{{1}}标签来实现成为div等？

所有建议都表示赞赏。

http://www.flickr.com/photos/62570778@N04/5719672246/in/photostream/

Answer 1

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。

Answer 2

我可能这样做：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
}

Answer 3

我推荐960 Grid System并使用div来解决所有问题。它是布局设计的强大开发工具。

Answer 4

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

帮助制定出这个页面部分的最佳方法？

4 个答案: