电子邮件客户端收件箱的CSS
我正在创建一个电子邮件客户端,我希望收件箱类似于Mac Mail
我使用ajax(输出到XML)从数据库中提取电子邮件,然后循环访问条目并拉出相关元素.
我从未对此充满信心的是css.我想用<ul>和创建元素<li>.我的理解是我需要嵌套这些.例如:
<ul>
<li>
<ul>
<li class="from">Mike @ Hotmail</li>
<li class="subject">Hello</li>
<li class="date">13/01/2013</li>
<li class="preview">Lorem Ipsum....</li>
</ul>
</li>
<li>
<ul>
<li class="from">Jame @ Gmail</li>
<li class="subject">Out Of Office</li>
<li class="date">12/01/2013</li>
<li class="preview">Lorem Ipsum....</li>
</ul>
</li>
.from {
}
.subject {
}
.date {
}
.preview {
}
我不知道的是我是否需要引用<ul>和<li>CSS的内的物品,这是否有所作为？另外,我需要创建这种外观的东西是什么？
请不要回答这个问题.我认为我已经解决了.当我对结果感到高兴的时候,我将在这里为其他人在未来工作......
好吧,我放弃了,这是我到目前为止所做的:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.inboxPanel {
width: 420px;
}
ul.inbox {
width: 100%;
list-style-type: none;
}
ul.message {
list-style-type: none;
display: block;
}
.from {
width: 50%;
border: 1px solid #ccc;
font-weight: 700;
float: left;
display: inline-block;
}
.subject {
border: 1px solid #ccc;
}
.date {
width: 50%;
border: 1px solid #ccc;
float: right;
display: inline-block;
}
.preview {
border: 1px solid #ccc;
}
</style>
<title></title>
</head>
<body>
<div class="inboxPanel">
<ul class="inbox">
<li>
<ul class="message">
<li class="from">Mike @ Hotmail</li>
<li class="subject">Hello</li>
<li class="date">13/01/2013</li>
<li class="preview">Lorem Ipsum....</li>
</ul>
</li>
<li>
<ul class="message">
<li class="from">Jame @ Gmail</li>
<li class="subject">Out Of Office</li>
<li class="date">12/01/2013</li>
<li class="preview">Lorem Ipsum....</li>
</ul>
</li>
<li>
<ul class="message">
<li class="from">Mike @ Hotmail</li>
<li class="subject">Hello</li>
<li class="date">13/01/2013</li>
<li class="preview">Lorem Ipsum....</li>
</ul>
</li>
<li>
<ul class="message">
<li class="from">Jame @ Gmail</li>
<li class="subject">Out Of Office</li>
<li class="date">12/01/2013</li>
<li class="preview">Lorem Ipsum....</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
好的,首先
<ul>
<li class="from">Mike @ Hotmail</li>
<li class="subject">Hello</li>
<li class="date">13/01/2013</li>
<li class="preview">Lorem Ipsum....</li>
</ul>
在语义上毫无意义.来自,主题,日期和预览不是列表.您的电子邮件是一个列表,但电子邮件组件不是.
你应该做的是这样的事情:
<ul>
<li>
<span class="from"></span>
<span class="date"></span>
<p class="subject></p>
<p class="preview"></p>
</li>
<ul>
CSS:
li { overflow: hidden; }
li span.from { float: left; font-weight: bold; }
li span.date { float: right; }
li p.subject { clear: both; font-weight: bold; }
li p.preview { color: #ccc; }
这只是粗略的样式,使布局看起来像你想要的方式.你必须调整它以获得适当的填充,颜色等.
| 归档时间： |
|
| 查看次数： |
1024 次 |
| 最近记录： |