您的位置:首页 > Web前端 > HTML

html页面常用代码

2013-10-30 11:10 453 查看
嵌入页面:
----------------------------------------------------
<iframe width="990" height="376" scrolling="no" frameborder="0" src="banner/banner.html"></iframe>
----------------------------------------------------
文章列表页列表代码和样式:
----------------------------------------------------
<div class="content">
<!---新闻列表开始--->
<ul>
<li><a href="#">创投业上演挖人争夺战创投业上演挖人争夺战</a><div class="time">2009-12-15</div></li>
<li><a href="#">创投业上演挖人争夺战创投业上演挖人争夺战</a><div class="time">2009-12-15</div></li>
</ul>
<!---新闻列表结束--->
</div>

/****新闻列表页样式**/
.content ul{
list-style-type: none;
margin-left: 20px;
}
.content ul li{
background-image: url(line.jpg);
height: 38px;
line-height: 25px;
text-align: left;
text-indent: 20px;
background-repeat: no-repeat;
}
.content .time{
width: 100px;
height: 30px;
float: right;
_margin-top: -25px;
*+margin-top: -25px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666666;
}
.content a:hover{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333;
text-decoration: underline;
}
----------------------------------------------------
文章内容页列表代码和样式:
<div class="mid_right">
<!---新闻内容页开始--->
<div style="font-size:13px; text-align:center;"><strong>文章标题</strong></div>
<div style="font-size:12px; text-align:center;">
时间:2012-10-26    来源:新浪网     作者:小兰
</div>
<div style="text-align:left; font-size:12px; margin-top:5px;line-height:20px;">
这里是文章内容啦,这里是文章内容啦,这里是文章内容啦,这里是文章内容啦,这里是文章内容啦,这里是文章内容啦,这里是文章内容啦,这里是文章内容啦,这里是文章内容啦,这里是文章内容啦,这里是文章内容啦,这里是文章内容啦,
</div>
<div style="text-align:left; font-size:12px; margin-top:10px;line-height:20px;">
<strong>上一篇:</strong><a href="#">这是一个上一篇文章</a><br/><strong>下一篇:</strong><a href="#">这是一个上一篇文章</a>
</div>
<!---新闻内容页结束--->
</div>
----------------------------------------------------
图片列表页代码和样式:
<div class="mid_right">
<!---产品图片列表开始--->
<div class="p_list"><a href="#"><img src="images/p1.jpg" alt="产品1" title="产品1" /></a><div><a href="#">产品名称</a></div></div>
<div class="p_list"><a href="#"><img src="images/p1.jpg" alt="产品1" title="产品1" /></a><div><a href="#">产品名称</a></div></div>
<div class="p_list"><a href="#"><img src="images/p1.jpg" alt="产品1" title="产品1" /></a><div><a href="#">产品名称</a></div></div>
<div class="p_list"><a href="#"><img src="images/p1.jpg" alt="产品1" title="产品1" /></a><div><a href="#">产品名称</a></div></div>
<div class="p_list"><a href="#"><img src="images/p1.jpg" alt="产品1" title="产品1" /></a><div><a href="#">产品名称</a></div></div>
<div class="p_list"><a href="#"><img src="images/p1.jpg" alt="产品1" title="产品1" /></a><div><a href="#">产品名称</a></div></div>
<!---产品图片列表结束--->
</div>

/*---产品---*/
.mid_right .p_list{
height: 145px;
width: 165px;
float: left;
font-size: 13px;
margin-left: 40px;
margin-right: 40px;
margin-bottom: 20px;
display: inline;
text-align: center;
}
<!---图片内容开始--->
<div style="font-size:13px; text-align:center"><strong>{king:title/}</strong></div><br/>
<div style="text-align:center"><img src="{king:pimg/}" alt="{king:title/}"/></div><br/>
<div style="text-align:left; font-size:12px; margin-top:5px;line-height:20px;">
{king:content/}
</div>
<div style="text-align:left; font-size:12px; margin-top:10px;line-height:20px;">
<strong>上一篇:</strong>{king:lastpage/}<br/><strong>下一篇:</strong>{king:nextpage/}
</div>
<!---图片内容结束--->
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: