纯 css+div 打造文章或公告通用H5单页模板

分享 未结 精帖 0 101
无法显示用户头像
admin 5 钻石
2018-05-05 00:22:50
纯 css+div 打造文章或公告通用H5单页模板,共包含两个文件,一个是 index.html: [pre] <!DOCTYPE html> <html> <head>   <meta charset="utf-8">   <title>ECode1024-通用文章或公告页H5模板</title>   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">   <meta name="keywords" content="ECode1024,ECode1024官网,ECode,1024,软件编程,cinco,辛科,Java,IT,技术社区,编程经验,源码,全栈,软件教程"/>   <meta name="description" content="ECode1024,一个专业的IT技术交流社区。ECode1024提供了与软件编程相关的各类文章,在这里你可以发布文章、提问、动态等内容。"/>   <style>   * {     padding: 0;     margin: 0;   }     .topImg {     width: 100%;     height: 180px;   }   #footer {     bottom: 0;     width: 100%;     text-align: center;     color: #999;     margin-bottom: 30px;   }   .hr {     width: 80%;     color: #999;     margin: auto;     margin-bottom: 10px;     margin-top: 20px;   }   #bodyDiv {     width: 100%;   }   h1 {     text-align: center;     margin: 10px   }   </style> </head> <body>   <div>     <img src="bg.jpg" class="topImg">   </div>   <div id="bodyDiv">     <h1>ECode1024-通用文章或公告页H5模板标题</h1>     <br/>     <div style="margin-bottom: 20px;text-align: center;color: #999;">       <span>作者:admin</span>&nbsp;&nbsp;       <span>更新时间:2018/05/03</span>     </div>     <div style="margin: 15px;line-height: 40px;">       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ECode1024,一个专业的IT技术交流社区。ECode1024提供了与软件编程相关的各类文章,在这里你可以发布文章、提问、动态等内容。ECode1024,一个专业的IT技术交流社区。ECode1024提供了与软件编程相关的各类文章,在这里你可以发布文章、提问、动态等内容。ECode1024,一个专业的IT技术交流社区。ECode1024提供了与软件编程相关的各类文章,在这里你可以发布文章、提问、动态等内容。ECode1024,一个专业的IT技术交流社区。ECode1024提供了与软件编程相关的各类文章,在这里你可以发布文章、提问、动态等内容。ECode1024,一个专业的IT技术交流社区。ECode1024提供了与软件编程相关的各类文章,在这里你可以发布文章、提问、动态等内容。ECode1024,一个专业的IT技术交流社区。ECode1024提供了与软件编程相关的各类文章,在这里你可以发布文章、提问、动态等内容。ECode1024,一个专业的IT技术交流社区。ECode1024提供了与软件编程相关的各类文章,在这里你可以发布文章、提问、动态等内容。ECode1024,一个专业的IT技术交流社区。ECode1024提供了与软件编程相关的各类文章,在这里你可以发布文章、提问、动态等内容。ECode1024,一个专业的IT技术交流社区。ECode1024提供了与软件编程相关的各类文章,在这里你可以发布文章、提问、动态等内容。ECode1024,一个专业的IT技术交流社区。ECode1024提供了与软件编程相关的各类文章,在这里你可以发布文章、提问、动态等内容。ECode1024,一个专业的IT技术交流社区。ECode1024提供了与软件编程相关的各类文章,在这里你可以发布文章、提问、动态等内容。ECode1024,一个专业的IT技术交流社区。ECode1024提供了与软件编程相关的各类文章,在这里你可以发布文章、提问、动态等内容。ECode1024,一个专业的IT技术交流社区。ECode1024提供了与软件编程相关的各类文章,在这里你可以发布文章、提问、动态等内容。ECode1024,一个专业的IT技术交流社区。ECode1024提供了与软件编程相关的各类文章,在这里你可以发布文章、提问、动态等内容。ECode1024,一个专业的IT技术交流社区。ECode1024提供了与软件编程相关的各类文章,在这里你可以发布文章、提问、动态等内容。ECode1024,一个专业的IT技术交流社区。ECode1024提供了与软件编程相关的各类文章,在这里你可以发布文章、提问、动态等内容。ECode1024,一个专业的IT技术交流社区。ECode1024提供了与软件编程相关的各类文章,在这里你可以发布文章、提问、动态等内容。ECode1024,一个专业的IT技术交流社区。ECode1024提供了与软件编程相关的各类文章,在这里你可以发布文章、提问、动态等内容。ECode1024,一个专业的IT技术交流社区。ECode1024提供了与软件编程相关的各类文章,在这里你可以发布文章、提问、动态等内容。ECode1024,一个专业的IT技术交流社区。ECode1024提供了与软件编程相关的各类文章,在这里你可以发布文章、提问、动态等内容。ECode1024,一个专业的IT技术交流社区。ECode1024提供了与软件编程相关的各类文章,在这里你可以发布文章、提问、动态等内容。     </div>   </div>   <div id="footer">     <hr class="hr">     <span>Copyringht ©2017-2018</span><br/>     <span>ECode1024 版权所有</span><br/>   </div> </body> </html> [/pre] 一个是 index.html 头部的图片: img[http://newecode1024.oss-cn-hongkong.aliyuncs.com/041a0fa3-3012-418b-be3b-dd951e92df5b.jpg]  效果预览: img[http://newecode1024.oss-cn-hongkong.aliyuncs.com/c93726dc-b963-41db-8393-3e3cca8e8516.png] 
回复
  • 暂无任何回复,抢个沙发吧~~