下载一个商品模板
如图所示:
![ea4964e0b8d54018c019b84c3759f553.png](https://i-blog.csdnimg.cn/blog_migrate/15752d7c20e2cca8b6c96a0ef1f20f06.jpeg)
我们解压商城模板,打开如图所示点击index.html
![41e0f2efce60ed33b1d89eea65524895.png](https://i-blog.csdnimg.cn/blog_migrate/e2a6a5bb331df6d4433e10f2166ffad7.jpeg)
我们把index.html复制到如下目录:
![e2cd8a7c1d8bdc277fbdd63486a9a89a.png](https://i-blog.csdnimg.cn/blog_migrate/a77d953648fb44638b8746e28ce1361a.jpeg)
我们再进行访问
http://localhost:8989/php/ThinkPHP3/shop/index.php/Home/
如图所示:
![a20a00c39085619c4350ad016196be60.png](https://i-blog.csdnimg.cn/blog_migrate/b16eabae653bf4563e75e14bf2a01a82.jpeg)
我们现在加入样式
1)在home目录新建如下几个文件夹
![6fb0751db7678af5a4523415016b4271.png](https://i-blog.csdnimg.cn/blog_migrate/7148596fd71691bbe3c5e13fd466b73a.png)
2)在public目录下新建三个目录
![60662a79e307a474b1f4ed4f3ac0385e.png](https://i-blog.csdnimg.cn/blog_migrate/e3163c9e4dc603c3cd5dcefcf04031c5.jpeg)
3)将商城模板的css,js,img拷进对应的文件夹中
![c733051064644171102d45415ab5a10c.png](https://i-blog.csdnimg.cn/blog_migrate/cc91711c07f3beb3f7ed4574098c5896.jpeg)
修改相应的js,css,img的路径
<link href="/php/ThinkPHP3/shop/Home/Public/css/style.css" rel="stylesheet" type="text/css" />
<a href="#" name="top"><img class="logo" src="/php/ThinkPHP3/shop/Home/Public/img/logo.gif"></a>
相对路径方式:灵活
修改style.css文件
![803028b5ee5717ed4ab46fc046336d00.png](https://i-blog.csdnimg.cn/blog_migrate/ecedda3dd89e31c735e22db5f01cefc2.jpeg)
输入:
http://localhost:8989/php/ThinkPHP3/shop/#localhost:8989![34518588ce47fb26225adb7a059ab6d9.png](https://i-blog.csdnimg.cn/blog_migrate/7a177808864f0f51c2924820de235937.jpeg)
文件的引入
css静态资源文件被模板文件引入
index.php-->IndexController--->index.html---->style.css
相对路径的设置:相对index.php
css本身引入img图片
style.css-->img
1)相对路径的方式:非常灵活,编辑代码少
练习一:修改User的login.html,输入
http://localhost:8989/php/ThinkPHP3/shop/index.php/Home/User/loginlocalhost:8989看是否输出如下界面
![797d78a6891b16bfdb78db0c8fa5a830.png](https://i-blog.csdnimg.cn/blog_migrate/8abdbbdcedf19ccaac4a753b21bbfef6.jpeg)
练习一:修改User的register.html,输入
http://localhost:8989/php/ThinkPHP3/shop/index.php/Home/User/registerlocalhost:8989看看是否输入是如下界面
![c9f5dc00bc5f50bc6178bdb977ab3918.png](https://i-blog.csdnimg.cn/blog_migrate/ef76fd7f81feb6282b081188e42d89c6.jpeg)
给静态资源设定访问常量路径
define("CSS_URL",'/php/ThinkPHP3/shop/Home/Public/css/');
define("JS_URL",'/php/ThinkPHP3/shop/Home/Public/js/');
define("IMG_URL",'/php/ThinkPHP3/shop/Home/Public/img/');
如下图所示:
<?php
header("Content-Type: text/html;charset=utf-8");
define('APP_DEBUG',true);//开发调试模式
define("CSS_URL",'/php/ThinkPHP3/shop/Home/Public/css/');
define("JS_URL",'/php/ThinkPHP3/shop/Home/Public/js/');
define("IMG_URL",'/php/ThinkPHP3/shop/Home/Public/img/');
//引入接口文件
include ("../ThinkPHP/ThinkPHP.php");
?>
![0570cbdb910e590692d3de6bb6db0383.png](https://i-blog.csdnimg.cn/blog_migrate/ca3e7dc59ad86edfff91bfe2683eb7dc.jpeg)
<link href="<?php echo CSS_URL;?>style.css" rel="stylesheet" type="text/css" />
如图所示
![478a817407c090f474925dcf3d624b1b.png](https://i-blog.csdnimg.cn/blog_migrate/9f205dcee4d1116f90197fc540fb15ec.jpeg)
其他图片路径,换一换试试