2019/11/30 学习笔记
HTML头部标签 引入公共的css
当我们的css比较多时，如何大部分界面引用的又是差不多，
可以把这些css的引用写成HTML文件
然后只要引入这个HTML文件就可以
我的head.html
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="all,follow">
<!-- Bootstrap CSS-->
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
<!-- Font Awesome CSS-->
<link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
<!-- Google fonts - Roboto -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,700">
<!-- owl carousel-->
<link rel="stylesheet" href="vendor/owl.carousel/assets/owl.carousel.css">
<link rel="stylesheet" href="vendor/owl.carousel/assets/owl.theme.default.css">
<!-- theme stylesheet-->
<link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">
<!-- Custom stylesheet - for your changes-->
<link rel="stylesheet" href="css/custom.css">
<!-- Favicon-->
<link rel="shortcut icon" href="favicon.png">
引用这个head的html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>qing书店</title>
<link rel="import" href="head.html"/>
</head>
引入公共的页眉和页脚
当我们很多页面的页眉和页脚都是固定不变的时候，我们可以把这些固定的写成html，然后引用
我的页眉：top.html
<div id="top">
<div class="container">
<div class="row">
<div class="col-lg-6 offer mb-3 mb-lg-0"><a href="#" class="btn btn-success btn-sm">今日优惠</a>
<a href="#" class="ml-1">订单满 ￥50即可享受8折优惠!</a></div>
<div class="col-lg-6 text-center text-lg-right">
<ul class="menu list-inline mb-0">
<li class="list-inline-item"><a href="#" data-toggle="modal" data-target="#login-modal">登录</a></li>
<li class="list-inline-item"><a href="register.html">注册</a></li>
<li class="list-inline-item"><a href="contact.html">联系</a></li>
<li class="list-inline-item"><a href="#">最近浏览</a></li>
</ul>
</div>
</div>
</div>
<div id="login-modal" tabindex="-1" role="dialog" aria-labelledby="Login" aria-hidden="true" class="modal fade">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">顾客登录</h5>
<button type="button" data-dismiss="modal" aria-label="Close" class="close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<form action="customer-orders.html" method="post">
<div class="form-group">
<input id="email-modal" type="text" placeholder="用户名" class="form-control">
</div>
<div class="form-group">
<input id="password-modal" type="password" placeholder="密码" class="form-control">
</div>
<p class="text-center">
<button class="btn btn-primary"><i class="fa fa-sign-in"></i>登录</button>
</p>
</form>
<p class="text-center text-muted">还未注册?</p>
<p class="text-center text-muted"><a href="register.html"><strong>立即注册</strong></a>这很容易，只需1分钟即可完成，可让您获得特别折扣和更多优惠！</p>
</div>
</div>
</div>
</div>
<!-- *** TOP BAR END ***-->
</div>
<nav class="navbar navbar-expand-lg">
<div class="container">
<a href="index.html" class="navbar-brand home">
<img src="img/logo.png" alt="书店 LOGO" class="d-none d-md-inline-block">
<img src="img/logo-small.png" alt="书店 logo" class="d-inline-block d-md-none">
<span class="sr-only">回到首页</span></a>
<div class="navbar-buttons">
<button type="button" data-toggle="collapse" data-target="#navigation" class="btn btn-outline-secondary navbar-toggler"><span class="sr-only">导航</span><i class="fa fa-align-justify"></i></button>
<button type="button" data-toggle="collapse" data-target="#search" class="btn btn-outline-secondary navbar-toggler"><span class="sr-only">搜索框</span><i class="fa fa-search"></i></button><a href="basket.html" class="btn btn-outline-secondary navbar-toggler"><i class="fa fa-shopping-cart"></i></a>
</div>
<div id="navigation" class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a href="#" class="nav-link active">首页</a></li>
<li class="nav-item dropdown menu-large"><a href="#" data-toggle="dropdown" data-hover="dropdown" data-delay="200" class="dropdown-toggle nav-link">特价<b class="caret"></b></a>
<ul class="dropdown-menu megamenu">
<li>
<div class="row">
<div class="col-md-6 col-lg-3">
<h5>衣服</h5>
<ul class="list-unstyled mb-3">
<li class="nav-item"><a href="category.html" class="nav-link">T-shirts</a></li>
<li class="nav-item"><a href="category.html" class="nav-link">Shirts</a></li>
<li class="nav-item"><a href = “category.html" class="nav-link">Pants</a></li>
<li class="nav-item"><a href="category.html" class="nav-link">Accessories</a></li>
</ul>
</div>
<div class="col-md-6 col-lg-3">
<h5>Shoes</h5>
<ul class="list-unstyled mb-3">
<li class="nav-item"><a href="category.html" class="nav-link">Trainers</a></li>
<li class="nav-item"><a href="category.html" class="nav-link">Sandals</a></li>
<li class="nav-item"><a href="category.html" class="nav-link">Hiking shoes</a></li>
<li class="nav-item"><a href="category.html" class="nav-link">Casual</a></li>
</ul>
</div>
<div class="col-md-6 col-lg-3">
<h5>Accessories</h5>
<ul class="list-unstyled mb-3">
<li class="nav-item"><a href="category.html" class="nav-link">Trainers</a></li>
<li class="nav-item"><a href="category.html" class="nav-link">Sandals</a></li>
<li class="nav-item"><a href="category.html" class="nav-link">Hiking shoes</a></li>
<li class="nav-item"><a href="category.html" class="nav-link">Casual</a></li>
<li class="nav-item"><a href="category.html" class="nav-link">Hiking shoes</a></li>
<li class="nav-item"><a href="category.html" class="nav-link">Casual</a></li>
</ul>
</div>
<div class="col-md-6 col-lg-3">
<h5>Featured</h5>
<ul class="list-unstyled mb-3">
<li class="nav-item"><a href="category.html" class="nav-link">Trainers</a></li>
<li class="nav-item"><a href="category.html" class="nav-link">Sandals</a></li>
<li class="nav-item"><a href="category.html" class="nav-link">Hiking shoes</a></li>
</ul>
<h5>Looks and trends</h5>
<ul class="list-unstyled mb-3">
<li class="nav-item"><a href="category.html" class="nav-link">Trainers</a></li>
<li class="nav-item"><a href="category.html" class="nav-link">Sandals</a></li>
<li class="nav-item"><a href="category.html" class="nav-link">Hiking shoes</a></li>
</ul>
</div>
</div>
</li>
</ul>
</li>
<li class="nav-item dropdown menu-large"><a href="#" data-toggle="dropdown" data-hover="dropdown" data-delay="200" class="dropdown-toggle nav-link">满减<b class="caret"></b></a>
<ul class="dropdown-menu megamenu">
<li>
<div class="row">
<div class="col-md-6 col-lg-3">
<h5>Clothing</h5>
<ul class="list-unstyled mb-3">
<li class="nav-item"><a href="category.html" class="nav-link">T-shirts</a></li>
<li class="nav-item"><a href="category.html" class="nav-link">Shirts</a></li>
<li class="nav-item"><a href="category.html" class="nav-link">Pants</a></li>
<li class="nav-item"><a href="category.html" class="nav-link">Accessories</a></li>
</ul>
</div>
<div class="col-md-6 col-lg-3">
<h5>Shoes</h5>
<ul class="list-unstyled mb-3">
<li class="nav-item"><a href="category.html" class="nav-link">Trainers</a></li>
<li class="nav-item"><a href="category.html" class="nav-link">Sandals</a></li>
<li class="nav-item"><a href="category.html" class="nav-link">Hiking shoes</a></li>
<li class="nav-item"><a href="category.html" class="nav-link">Casual</a></li>
</ul>
</div>
<div class="col-md-6 col-lg-3">
<h5>Accessories</h5>
<ul class="list-unstyled mb-3">
<li class="nav-item"><a href="category.html" class="nav-link">Trainers</a></li>
<li class="nav-item"><a href="category.html" class="nav-link">Sandals</a></li>
<li class="nav-item"><a href="category.html" class="nav-link">Hiking shoes</a></li>
<li class="nav-item"><a href="category.html" class="nav-link">Casual</a></li>
<li class="nav-item"><a href="category.html" class="nav-link">Hiking shoes</a></li>
<li class="nav-item"><a href="category.html" class="nav-link">Casual</a></li>
</ul>
<h5>Looks and trends</h5>
<ul class="list-unstyled mb-3">
<li class="nav-item"><a href="category.html" class="nav-link">Trainers</a></li>
<li class="nav-item"><a href="category.html" class="nav-link">Sandals</a></li>
<li class="nav-item"><a href="category.html" class="nav-link">Hiking shoes</a></li>
</ul>
</div>
<div class="col-md-6 col-lg-3">
<div class="banner"><a href="#"><img src="img/banner.jpg" alt="" class="img img-fluid"></a></div>
<div class="banner"><a href="#"><img src="img/banner2.jpg" alt="" class="img img-fluid"></a></div>
</div>
</div>
</li>
</ul>
</li>
<li class="nav-item dropdown menu-large"><a href="#" data-toggle="dropdown" data-hover="dropdown" data-delay="200" class="dropdown-toggle nav-link">Template<b class="caret"></b></a>
<ul class="dropdown-menu megamenu">
<li>
<div class="row">
<div class="col-md-6 col-lg-3">
<h5>Shop</h5>
<ul class="list-unstyled mb-3">
<li class="nav-item"><a href="index.html" class="nav-link">Homepage</a></li>
<li class="nav-item"><a href="category.html" class="nav-link">Category - sidebar left</a></li>
<li class="nav-item"><a href="category-right.html" class="nav-link">Category - sidebar right</a></li>
<li class="nav-item"><a href="category-full.html" class="nav-link">Category - full width</a></li>
<li class="nav-item"><a href="detail.html" class="nav-link">Product detail</a></li>
</ul>
</div>
<div class="col-md-6 col-lg-3">
<h5>User</h5>
<ul class="list-unstyled mb-3">
<li class="nav-item"><a href="register.html" class="nav-link">Register / login</a></li>
<li class="nav-item"><a href="customer-orders.html" class="nav-link">Orders history</a></li>
<li class="nav-item"><a href="customer-order.html" class="nav-link">Order history detail</a></li>
<li class="nav-item"><a href="customer-wishlist.html" class="nav-link">Wishlist</a></li>
<li class="nav-item"><a href="customer-account.html" class="nav-link">Customer account / change password</a></li>
</ul>
</div>
<div class="col-md-6 col-lg-3">
<h5>Order process</h5>
<ul class="list-unstyled mb-3">
<li class="nav-item"><a href="basket.html" class="nav-link">Shopping cart</a></li>
<li class="nav-item"><a href="checkout1.html" class="nav-link">Checkout - step 1</a></li>
<li class="nav-item"><a href="checkout2.html" class="nav-link">Checkout - step 2</a></li>
<li class="nav-item"><a href="checkout3.html" class="nav-link">Checkout - step 3</a></li>
<li class="nav-item"><a href="checkout4.html" class="nav-link">Checkout - step 4</a></li>
</ul>
</div>
<div class="col-md-6 col-lg-3">
<h5>Pages and blog</h5>
<ul class="list-unstyled mb-3">
<li class="nav-item"><a href="blog.html" class="nav-link">Blog listing</a></li>
<li class="nav-item"><a href="post.html" class="nav-link">Blog Post</a></li>
<li class="nav-item"><a href="faq.html" class="nav-link">FAQ</a></li>
<li class="nav-item"><a href="text.html" class="nav-link">Text page</a></li>
<li class="nav-item"><a href="text-right.html" class="nav-link">Text page - right sidebar</a></li>
<li class="nav-item"><a href="404.html" class="nav-link">404 page</a></li>
<li class="nav-item"><a href="contact.html" class="nav-link">Contact</a></li>
</ul>
</div>
</div>
</li>
</ul>
</li>
</ul>
<div class="navbar-buttons d-flex justify-content-end">
<!-- /.nav-collapse-->
<div id="search-not-mobile" class="navbar-collapse collapse"></div><a data-toggle="collapse" href="#search" class="btn navbar-btn btn-primary d-none d-lg-inline-block"><span class="sr-only">搜素</span><i class="fa fa-search"></i></a>
<div id="basket-overview" class="navbar-collapse collapse d-none d-lg-block"><a href="basket.html" class="btn btn-primary navbar-btn"><i class="fa fa-shopping-cart"></i><span>购物车中有三件商品</span></a></div>
</div>
</div>
</div>
</nav>
<div id="search" class="collapse">
<div class="container">
<form role="search" class="ml-auto">
<div class="input-group">
<input type="text" placeholder="Search" class="form-control">
<div class="input-group-append">
<button type="button" class="btn btn-primary"><i class="fa fa-search"></i></button>
</div>
</div>
</form>
</div>
</div>
我的页脚：footer.html
<div id="footer">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6">
<h4 class="mb-3">导航</h4>
<ul class="list-unstyled">
<li><a href="text.html">关于我们</a></li>
<li><a href="text.html">说明和条款</a></li>
<li><a href="faq.html">帮助</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
<hr>
<h4 class="mb-3">用户选项</h4>
<ul class="list-unstyled">
<li><a href="#" data-toggle="modal" data-target="#login-modal">登录</a></li>
<li><a href="register.html">注册</a></li>
</ul>
</div>
<!-- /.col-lg-3-->
<div class="col-lg-3 col-md-6">
<h4 class="mb-3">分类</h4>
<h5>特价</h5>
<ul class="list-unstyled">
<li><a href="category.html">治愈</a></li>
<li><a href="category.html">小说</a></li>
<li><a href="category.html">社会科学</a></li>
<li><a href="category.html">心理</a></li>
<li><a href="category.html">计算机</a></li>
</ul>
<h5>满减</h5>
<ul class="list-unstyled">
<li><a href="category.html">治愈</a></li>
<li><a href="category.html">小说</a></li>
<li><a href="category.html">社会科学</a></li>
<li><a href="category.html">心理</a></li>
<li><a href="category.html">计算机</a></li>
</ul>
</div>
<!-- /.col-lg-3-->
<div class="col-lg-3 col-md-6">
<h4 class="mb-3">我们在哪里</h4>
<p><strong>qing书店</strong><br>岳麓大道569<br>湖南工商大学<br>长沙<br>湖南<br><strong>中国</strong></p><a href="contact.html">联系我们</a>
<hr class="d-block d-md-none">
</div>
<!-- /.col-lg-3-->
<div class="col-lg-3 col-md-6">
<h4 class="mb-3">获取推送</h4>
<p class="text-muted">关注或订阅我们</p>
<form>
<div class="input-group">
<input type="text" class="form-control" ><span class="input-group-append">
<button type="button" class="btn btn-outline-secondary">订阅!</button></span>
</div>
<!-- /input-group-->
</form>
<hr>
<h4 class="mb-3">保持联系</h4>
<p class="social"><a href="#" class="facebook external"><i class="fa fa-facebook"></i></a><a href="#" class="twitter external"><i class="fa fa-twitter"></i></a><a href="#" class="instagram external"><i class="fa fa-instagram"></i></a><a href="#" class="gplus external"><i class="fa fa-google-plus"></i></a><a href="#" class="email external"><i class="fa fa-envelope"></i></a></p>
</div>
<!-- /.col-lg-3-->
</div>
<!-- /.row-->
</div>
<!-- /.container-->
</div>
<!-- /#footer-->
<!-- *** FOOTER END ***-->
相关引用：
<header class="header mb-5">
<div class="headerpage"></div>
</header>
`
<div class="footerpage"></div>
<script>
$(function(){
/*公共部分
* 导航栏
* footer CopyRight
*/
$(".headerpage").load("top.html");
$(".footerpage").load("footer.html");
});
</script>``
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
