bucuo123 发表于 2019-4-5 14:45:00

discuzX教程教你如何把切割好的html页面转换成可供DIY的页面(高级教程)

discuzX教程教你如何把切割好的html页面转换成可供DIY的页面(高级教程)
            
            今天给大家讲讲 如何把已经切割好的html页面或者模仿的页面转换成可供DIY的页面
        请跟随教程一步一步操作如有疑问请提出
以下以家居频道为例为大家讲解
我们常见的切割好的html页面包含这么几个元素
如下图图片文件夹、CSS文件夹、其它文件或图片文件夹、一个html页面
       
http://www.dede58.com/uploads/allimg/180721/105P4C10-0.gif
        大家看下页面效果
       
       
http://www.dede58.com/uploads/allimg/180721/105P46004-1.jpg
接下来,我们就把这个页面转换成DIY页面
首页我们用编辑工具打开 index.html页面
我们为了能够使用统一的头部样式,这里面我们引入系统内置的头部文件(header)把页面中的关于头部的信息删除
如下图所示
       
http://www.dede58.com/uploads/allimg/180721/105P45611-2.jpg
把系统头部(header)引入进来
引用代码
       
               
                       
                               
                [/ol,
       
        复制代码
如下图所示
       
http://www.dede58.com/uploads/allimg/180721/105P46108-3.jpg
给新的模板起个名字
如下代码
       
               
                       
                               
                [/ol,
       
        复制代码
如下图所示
       
http://www.dede58.com/uploads/allimg/180721/105P4K27-4.jpg
接下来增加可供DIY的CSS样式表
如下代码
       
               
                       
                               
                [/ol,
       
        复制代码
如下图所示
       
http://www.dede58.com/uploads/allimg/180721/105P44032-5.jpg
头部
接下来更换底部代码
找到底部代码删除掉 换成系统内置的通用底部代码   
如下图所示
       
http://www.dede58.com/uploads/allimg/180721/105P42E0-6.jpg
增加如下代码
       
               
                       
                               
                [/ol,
       
        复制代码
如下图所示
       
http://www.dede58.com/uploads/allimg/180721/105P43241-7.jpg
页: [1]
查看完整版本: discuzX教程教你如何把切割好的html页面转换成可供DIY的页面(高级教程)