路由
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\HomeController;
// 首页
Route::get('/',[HomeController::class,'homepage']);
控制器
app/Http/Controllers/HomeController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
use Illuminate\Support\Facades\Auth;
class HomeController extends Controller
{
// 首页
public function homepage()
{
return view('home.homepage');
}
}
前端模版
首页模版，采用了模版分离 resources/views/homepage.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 引入模版CSS文件 -->
@include('home.homecss')
</head>
<body>
<!-- header section start -->
<div class="header_section">
<!-- 导航栏 -->
@include('home.header')
<!-- 轮播图 -->
@include('home.banner')
</div>
<!-- header section end -->
<!-- 服务 -->
@include('home.services')
<!-- 关于我们 -->
@include('home.about')
<!-- choose section end -->
<!-- 底栏 -->
@include('home.footer')
</body>
</html>
导航栏
resources/views/header.blade.php
<div class="header_main">
<div class="mobile_menu">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="logo_mobile"><a href="index.html"><img src="images/logo.png"></a></div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link " href="blog.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link " href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="container-fluid">
<div class="logo"><a href="index.html"><img src="images/logo.png"></a></div>
<div class="menu_main">
<ul>
<li class="active"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="blog.html">Blog</a></li>
@if(Route::has('login'))
@auth
<li>
<x-app-layout></x-app-layout>
</li>
@else
<li><a href="{{route('login')}}">Login</a></li>
<li><a href="{{route('register')}}">Register</a></li>
@endauth
@endif
</ul>
</div>
</div>
</div>
@if(Route::has('login'))
@auth
<li>
<x-app-layout></x-app-layout>
</li>
@else
<li><a href="{{route('login')}}">Login</a></li>
<li><a href="{{route('register')}}">Register</a></li>
@endauth
@endif
这段为导航栏右上角登录与注册
轮播图
resources/views/banner.blade.php
<div class="banner_section layout_padding">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="container">
<h1 class="banner_taital">Adventure</h1>
<p class="banner_text">There are many variations of passages of Lorem Ipsum available, but the majority have sufferedThere are ma available, but the majority have suffered</p>
<div class="read_bt"><a href="#">Get A Quote</a></div>
</div>
</div>
<div class="carousel-item">
<div class="container">
<h1 class="banner_taital">Adventure</h1>
<p class="banner_text">There are many variations of passages of Lorem Ipsum available, but the majority have sufferedThere are ma available, but the majority have suffered</p>
<div class="read_bt"><a href="#">Get A Quote</a></div>
</div>
</div>
<div class="carousel-item">
<div class="container">
<h1 class="banner_taital">Adventure</h1>
<p class="banner_text">There are many variations of passages of Lorem Ipsum available, but the majority have sufferedThere are ma available, but the majority have suffered</p>
<div class="read_bt"><a href="#">Get A Quote</a></div>
</div>
</div>
</div>
</div>
</div>
服务
resources/views/services.blade.php
<div class="services_section layout_padding">
<div class="container">
<h1 class="services_taital">Services </h1>
<p class="services_text">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration</p>
<div class="services_section_2">
<div class="row">
<div class="col-md-4">
<div><img src="images/img-1.png" class="services_img"></div>
<div class="btn_main"><a href="#">Rafting</a></div>
</div>
<div class="col-md-4">
<div><img src="images/img-2.png" class="services_img"></div>
<div class="btn_main active"><a href="#">Hiking</a></div>
</div>
<div class="col-md-4">
<div><img src="images/img-3.png" class="services_img"></div>
<div class="btn_main"><a href="#">Camping</a></div>
</div>
</div>
</div>
</div>
</div>
关于我们
resources/views/about.blade.php
<div class="about_section layout_padding">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="about_taital_main">
<h1 class="about_taital">About Us</h1>
<p class="about_text">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All </p>
<div class="readmore_bt"><a href="#">Read More</a></div>
</div>
</div>
<div class="col-md-6 padding_right_0">
<div><img src="images/about-img.png" class="about_img"></div>
</div>
</div>
</div>
</div>
底栏
resources/views/footer.blade.php
<div class="footer_section layout_padding">
<div class="container">
<div class="input_btn_main">
<input type="text" class="mail_text" placeholder="Enter your email" name="Enter your email">
<div class="subscribe_bt"><a href="#">Subscribe</a></div>
</div>
<div class="location_main">
<div class="call_text"><img src="images/call-icon.png"></div>
<div class="call_text"><a href="#">Call +01 1234567890</a></div>
<div class="call_text"><img src="images/mail-icon.png"></div>
<div class="call_text"><a href="#">demo@gmail.com</a></div>
</div>
<div class="social_icon">
<ul>
<li><a href="#"><img src="images/fb-icon.png"></a></li>
<li><a href="#"><img src="images/twitter-icon.png"></a></li>
<li><a href="#"><img src="images/linkedin-icon.png"></a></li>
<li><a href="#"><img src="images/instagram-icon.png"></a></li>
</ul>
</div>
</div>
</div>
<!-- copyright section start -->
<div class="copyright_section">
<div class="container">
<p class="copyright_text">2020 All Rights Reserved. Design by <a href="https://html.design">Free html Templates</a></p>
</div>
</div>
<!-- copyright section end -->
<!-- Javascript files-->
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/jquery-3.0.0.min.js"></script>
<script src="js/plugin.js"></script>
<!-- sidebar -->
<script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="js/custom.js"></script>
<!-- javascript -->
<script src="js/owl.carousel.js"></script>
<script src="https:cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
首页登录注册按钮样式美化
resources/views/dashboard.blade.php 删除中间部分代码
<x-app-layout>
</x-app-layout>
resources/views/layouts/app.blade.php
.
.
.
<div class="min-h-screen bg-gray-100">
@livewire('navigation-menu')
.
.
变更为
<div class="">
@livewire('navigation-menu')
删除掉 min-h-screen bg-gray-100样式
resources/views/navigation-menu.blade.php
.
.
<nav x-data="{ open: false }" class="bg-white border-b border-gray-100">
<!-- Primary Navigation Menu -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
.
.
变更为
<nav x-data="{ open: false }" class="">
<!-- Primary Navigation Menu -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="">
<div class="">
{{-- <div class="flex">--}}
{{-- <!-- Logo -->--}}
{{-- <div class="shrink-0 flex items-center">--}}
{{-- <a href="{{ route('home') }}">--}}
{{-- <x-application-mark class="block h-9 w-auto" />--}}
{{-- </a>--}}
{{-- </div>--}}
{{-- <!-- Navigation Links -->--}}
{{-- <div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">--}}
{{-- <x-nav-link href="{{ route('home') }}" :active="request()->routeIs('home')">--}}
{{-- {{ __('Dashboard') }}--}}
{{-- </x-nav-link>--}}
{{-- </div>--}}
删除掉
<div class="shrink-0 flex items-center">
<a href="{{ route('home') }}">
<x-application-mark class="block h-9 w-auto" />
</a>
</div>
<!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
<x-nav-link href="{{ route('home') }}" :active="request()->routeIs('home')">
{{ __('Dashboard') }}
</x-nav-link>
</div>
添加样式
<x-slot name="content">
<!-- Account Management -->
<div class="block px-4 py-2 text-xs text-gray-400">
<p style="color:black!important"> {{ __('管理帐户') }}</p>
</div>
<x-dropdown-link href="{{ route('profile.show') }}">
<p style="color:black!important"> {{ __('个人资料') }}</p>
</x-dropdown-link>
.
.
.
<x-dropdown-link href="{{ route('logout') }}"
@click.prevent="$root.submit();">
<p style="color:black!important"> {{ __('注销') }}</p>
</x-dropdown-link>
<p style="color:black!important">XXX</p> 为样式代码
效果图：
