html页面常用代码

嵌入页面:
----------------------------------------------------
<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&nbsp;&nbsp;&nbsp;&nbsp;来源:新浪网 &nbsp;&nbsp;&nbsp;&nbsp;作者:小兰
                </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>
<!---图片内容结束--->

posted @ 2013-10-30 11:10  玉米地  阅读(480)  评论(0)    收藏  举报