thinkphp框架(已有模板和tp框架做结合)

摘要:
然而,仅仅以这种方式编写代码并不能显示效果。请注意,css和js之间的链接应该添加到html页面。这是代码:特别注意此代码的路径问题,尤其重要!!css的路径是相对路径,而不是以前的绝对路径background:url。类似地,也可以通过这种方式获得其他模板。在index.php条目文件中,设置一个常量:然后转到静态页面修改相应的css路径并修改相应的img路径步骤如下:1。

关于thinkphp框架的基本介绍

thinkphp框架(已有模板和tp框架做结合)第1张

thinkphp框架(已有模板和tp框架做结合)第2张

thinkphp框架(已有模板和tp框架做结合)第3张

 第一次访问后创建的目录

thinkphp框架(已有模板和tp框架做结合)第4张

路由的四种形式

thinkphp框架(已有模板和tp框架做结合)第5张

创建应用(在首个index.php中)

thinkphp框架(已有模板和tp框架做结合)第6张

Controller里的自配需要文件

thinkphp框架(已有模板和tp框架做结合)第7张

调用View视图的模板

注意:Controller和View里的视图名称保持一致,$this->display();就能直接调用;

thinkphp框架(已有模板和tp框架做结合)第8张

设置登录网站的首页面

thinkphp框架(已有模板和tp框架做结合)第9张

将写好的展示给用户的静态页面代码输入在内,就可访问

(本机的登录地址:localhost/xampp/shop/index.php/Home/Index/index)

访问到的界面

thinkphp框架(已有模板和tp框架做结合)第10张

只是有简单的html代码,并不会显示css和js的效果。因为我们并没有设置这些代码的存放

接下来就开始启用css和js

首先在shop文件夹下设置一个新的Public文件夹

thinkphp框架(已有模板和tp框架做结合)第11张

然后点开里面新建存放修饰html代码的js和css的文件夹

thinkphp框架(已有模板和tp框架做结合)第12张

新建成功,将需要的代码和图片存入其中。

可是仅仅这样写入代码还是不能显示效果的哦,要注意在html页面中加入css和js的链接。也就是这段代码:

 <link href="http://t.zoukankan.com/xampp/shop/Public/css/style.css" rel="stylesheet" type="text/css" />

尤其要注意这段代码的路径问题,特别重要!!!

要使用绝对路径而不是相对路径,否则浏览器将不会显示出来。(这里的绝对路径并不是我们通常所说的那种绝对路径)

thinkphp框架(已有模板和tp框架做结合)第13张

这样css的效果就可以出来了,可是图片仍然没有加载出来。

浏览网页出现这种效果

thinkphp框架(已有模板和tp框架做结合)第14张

图片引入:

所以图片也要以这种方式写正确他的路径

<img src="http://t.zoukankan.com/xampp/shop/Public/images/logo.gif"></a>

thinkphp框架(已有模板和tp框架做结合)第15张

 这样其实只是打开了部分的图片,因为有许多图片是存储在css样式之中的,所以我们也需要将css里的样式全部改过来。

但是请注意!!!!

css的路径是相对路径而不是之前的绝对路径

background:url(../images/inputbg.gif)

thinkphp框架(已有模板和tp框架做结合)第16张

同样的,其他的模板也可以通过这种方式得到。

但是这样一个一个的去改imgcss路径是极其麻烦的,而且也不利于后期的维护,所以我们需要设置一个常量。

在index.php入口文件中,设置一个他的常量:

thinkphp框架(已有模板和tp框架做结合)第17张

然后去静态页修改相应的css路径

thinkphp框架(已有模板和tp框架做结合)第18张

之后修改相对应的img路径

thinkphp框架(已有模板和tp框架做结合)第19张

已有模板与tp框架做结合

具体实现步骤:

1。复制模板文件到view指定目录

2.复制cssjsimg静态资源文件到系统指定目录

3。把静态资源(cssjsimg)文件的路径设置为“常量”信息(在index入口文件设置)

4.在模板文件中通过常量引入静态资源(cssjsimg)文件,路径相对入口文件设置

    最好设置绝对地址(相对工作站点虚拟主机目录的绝对地址)

    为了后期维护模板方便,通过常量设置静态资源文件访问目录地址

5.css文件本身的图片设置,其路径相对css文件本身设置

  后续1、4重复实现即可

免责声明:文章转载自《thinkphp框架(已有模板和tp框架做结合)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇ORACLE rowid切分大表node:json与csv互转下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

stylelint — css书写规范

sass lint guidance 一、安装:npm intsall -g stylelint 二、配置:http://stylelint.io/user-guide/rules/ (以下规则文件配置一个即可,置于项目根目录下) “.stylelintrc” { "rules": { "declaration-block-trailing-semico...

CSS(Sass)模块化

在Vue大行其道的今天,我们也受益匪浅,再次感谢@尤大。那么在用Vue开发的过程中,我们大概率会用到Sass来提高我们前端的开发效率,为前端工程化做了很大贡献,Sass本身具有很多令人兴奋的功能,例如:variable、function、mixin、nested、module等,本文主要来研究module——CSS模块化。 我们在开发中最常用的模块化指令就...

令人惊叹的Npm工具包

http-server(简单搭建http服务器) json-server(JSON服务器,快速搭建resful api接口) superagent(node服务器请求客户端) PS:request已经不再更新了。 cssnano(css多功能优化工具) PS:比uncss功能更全。 Prepack(js专业优化工具) Gulp(简单的前端自动化任务流工具)...

一些值得收藏的开源框架

阅读本文大概需要 7.2 分钟。 来源:segmentfault.com/a/1190000017346799 1. 分布式应用服务开发的一站式解决方案 Spring Cloud Alibaba Spring Cloud Alibaba 致力于提供分布式应用服务开发的一站式解决方案。 此项目包含开发分布式应用服务的必需组件,方便开发者通过 Spring C...

10大H5前端框架(转)

10大H5前端框架 作为一名做为在前端死缠烂打6年并且懒到不行的攻城士,这几年我还是阅过很多同门从知名到很知名的各种前端框架,本来想拿15-20个框架来分享一下,但在跟几个前辈讨教写文章的技巧时果断被无情的打击了,所以这里我还是低调的只拿出10个框架来个大锅乱炖来简单介绍,凑够字数也就全剧终了。 原本写这篇文章想围绕着 CSS 框架来的,但因为目前界内比较...

技术学习网站

这里主要用于分享一些实用的技术网站,方便查阅 _ 一、学习提升 1. 综合学习网站 MDN学习 Web 开发的最佳实践 web.devGoogle 出品的 Web 开发资源教程 LeetCode全球极客挚爱的技术成长平台小浩算法 freeCodeCamp通过成千上万个编程关卡来帮助提升你的编程技能 网道互联网开发文档 慕课网程序员的...