html代码|个性引导页代码(html炫酷引导页源码)

时间:2021-10-14 16:44:59   阅读:2069
<!--  顶部开始-->
<style>.dingbu {background-image: url(http://pp.hnysnet.com/zb_users/theme/projectpage/style/images/head_bg.jpg);}</style>
<link rel="stylesheet" type="text/css" href="https://www.zshao.vip/erji/css/style.min.css">
<header class="dingbu">
<div class="head_b">
    <!--大标题-->     
        <h1 class="page-name" style="overflow: hidden;text-overflow:ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;"><a href="" title="{$name}">{$title}_{$name}</a></h1>
    <!--副标题/seo标题-->       
        <div class="page-subname" style="overflow: hidden;text-overflow:ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;">{$zbp->Config('ydmm')->ydmm_keywords}</div>
     <!--摘要或seo描述-->     
    <p style="overflow: hidden;text-overflow:ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;">{$zbp->Config('ydmm')->ydmm_description}</p>     

<p>{$post.Url}</p>

<p style="overflow: hidden;text-overflow:ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;">{$description}</p>
    <a target="_blank" href="http://www.92kameng.cn" class="btn">立即开挂</a>
    <a target="_blank" href="http://www.caihongdaishuawang.com" class="btn">应用网盘</a>
            </div>
    <div class="down_main"><a href="#main" title="点击下拉">∨</a></div>
</header>
<!--  顶部结束-->

很有意思的引导思路,在一个完整的网站顶部加入,可以做成一个自适应屏幕大小的引导页


html代码|个性引导页代码(html炫酷引导页源码)

第二个版本

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"><!--自适应代码 -->

<header>
    <style>header {background-image: url(http://pp.hnysnet.com/zb_users/theme/projectpage/style/images/head_bg.jpg);}</style><!--背景图 -->
    <link rel="stylesheet" type="text/css" href="https://www.zshao.vip/erji/css/style.min.css"><!--主要CSS-->
    
    <!--导航栏开始 -->

<!--导航栏结束 -->

<div class="head_b">
    <!--大标题-->     
<h1 class="page-name"><a href="/" title="引流关注、网络项目推广">引流关注、网络项目推广</a></h1>
    <!--副标题/seo标题-->       
<div class="page-subname">
    一款可以用作引流关注、网络项目推广的单页网站模板,又不仅仅是一个单页!
    </div>            
     <!--摘要或seo描述-->     
<p>
    这是一个星岚网络工作室开发的一款《引流关注、网络项目推广》单页网站模板,这段文字所在的版块,背景图片、网站logo、导航栏、标题和文字、链接按钮都是可以通过后台自定义的,不需要修改代码。
</p>            

<!--按钮开始 -->
<a target="_blank" href="/" class="btn">本站主题</a>
<a target="_blank" href="/" class="btn">作品升级记录</a>
<a target="_blank" href="/" class="btn">联系主题作者</a>
<!--按钮结束 -->

</div>
<!--跳转开始-->
<div class="down_main"><a href="#main" title="点击下拉">∨</a></div>
 <!--跳转结束-->
</header>

<!-- 站点主要内容开始-->
<div id="main">  

<!-- 这里放整个站的内容【或者把id="main"放在某个标签里面,点击上面的按钮会自动跳转】-->
</div>
<!-- 站点主要内容结束-->


上一篇:html代码|个人常用框架代码(html简单框架代码)

下一篇:SEO超级外链工具-Zshaowl(seo超级外链工具免费)

网友评论