bootstrap制作收藏夹导航
如图：
样式模仿于：https://www.jianavi.com/
码云：https://gitee.com/mingyuefusu/favorites_page
百度网盘：
链接：https://pan.baidu.com/s/1fsSrX-1uStfqgJlzL_i7yg
提取码：wji4
电脑端
手机端
废话不多说，上代码
CSS
body{
background-color: #f4f5f9;
/*#FFFFF3;*/
background-image: url("../images/favourite.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.search{
margin-top: 100px;
}
.search input{
height: 50px;
display: inline-block;
font-size: 20px;
}
.search input[type=submit]{
width: 85px;
background: #3385ff;
color: white;
font-size: 16px;
border: none;
}
.search input[type=text]{
width: 67%;
}
.main{
margin-top: 150px;
}
.com_piece{
/*margin-bottom: 40px;*/
}
.com_piece>.title h2{
font-size: 20px;
margin-left: 15px;
color: white;
}
.com_piece>ul{
list-style: none;
margin-bottom: 15px;
padding-left: 0px;
margin-left: 0px;
margin-right: 0px;
}
.com_piece>ul>li{
/*border: 1px solid pink;*/
margin-bottom: 10px;
line-height: 40px;
text-align: center;
padding-right: 5px;
padding-left: 5px;
/*float: left;*/
}
a{
font-size: 15px;
color: #fff;
display: block;
width: 100%;
background: rgba(0,0,0,0.25);
/*background-color: #ccc;
background-transparent: 0.5;*/
}
a:hover{
color: white;
background: rgba(0,0,0,0.25);
font-size: 17px;
font-weight: 550;
text-decoration: none;
}
.footer{
color: white;
/*margin-top: 180px;*/
}
/*针对页脚*/
html,body {
margin: 0;
padding: 0;
height: 100%;
}
.container:first-child {
min-height: 100%;
}
.footer{
height: 30px;
margin-top: -30px;
text-align: center;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>收藏夹</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="./css/favourite.css">
</head>
<body>
<div class="container">
<!-- 百度搜索 -->
<!-- 百度搜索框 -->
<!-- 百度搜索框 -->
<div class="row search">
<form class="col-sm-8 col-sm-push-2" action="http://www.baidu.com/baidu" target="_blank">
<div class="form-inline text-center">
<input type="text" class="form-control" size="55" name="word" baiduSug=1>
<input class="form-control" type="submit" value="百度一下">
</div>
</form>
</div>
<!-- 百度搜索框提示 -->
<!-- <script charset="gbk" src="http://www.baidu.com/js/opensug.js"></script> -->
<!-- 百度搜索 -->
<!-- one row -->
<div class="row main">
<!-- a piece -->
<div class="col-sm-6 col-lg-4 com_piece">
<div class="row title">
<div class="col-xs-5">
<h2>学习 · 生活</h2>
</div>
</div>
<ul class="row">
<li class="col-xs-4"><a href="https://www.icourse163.org/">MOOC</a></li>
<li class="col-xs-4"><a href="https://www.runoob.com/">菜鸟教程</a></li>
<li class="col-xs-4"><a href="https://www.bilibili.com/">哔哩哔哩</a></li>
<li class="col-xs-4"><a href="http://www.imooc.com">慕课网</a></li>
<li class="col-xs-4"><a href="https://developer.mozilla.org/zh-CN/">MDN</a></li>
<li class="col-xs-4"><a href="https://www.educoder.net">Educoder</a></li>
<li class="col-xs-4"><a href="https://www.w3cschool.cn/">W3C</a></li>
<li class="col-xs-4"><a href="https://study.163.com/">云课堂</a></li>
<li class="col-xs-4"><a href="https://www.tmall.com">淘宝</a></li>
</ul>
</div>
<!--/ a piece -->
<!-- a piece -->
<div class="col-sm-6 col-lg-4 com_piece">
<div class="row title">
<div class="col-xs-5">
<h2>常用 · 社区</h2>
</div>
</div>
<ul class="row">
<li class="col-xs-4"><a href="https://www.cnblogs.com/">博客园</a></li>
<li class="col-xs-4"><a href="https://www.csdn.net/">CSDN</a></li>
<li class="col-xs-4"><a href="https://www.zhihu.com/">知乎</a></li>
<li class="col-xs-4"><a href="https://gitee.com/">码云</a></li>
<li class="col-xs-4"><a href="https://github.com">github</a></li>
<li class="col-xs-4"><a href="https://i.qq.com/">QQ空间</a></li>
<li class="col-xs-4"><a href="https://tieba.baidu.com/">贴吧</a></li>
<li class="col-xs-4"><a href="https://www.douban.com/">豆瓣</a></li>
<li class="col-xs-4"><a href="https://juejin.im/">掘金</a></li>
</ul>
</div>
<!--/ a piece -->
<!-- a piece -->
<div class="col-sm-6 col-lg-4 com_piece">
<div class="row title">
<div class="col-xs-5">
<h2>在线 · 工具</h2>
</div>
</div>
<ul class="row">
<li class="col-xs-4"><a href="https://www.webdesignrankings.com/resources/lolcolors/">color</a></li>
<li class="col-xs-4"><a href="http://khroma.co/train/">Khroma</a></li>
<li class="col-xs-4"><a href="https://www.processon.com">ProcessOn</a></li>
<li class="col-xs-4"><a href="https://jx.idc126.net/">VIP视频</a></li>
<li class="col-xs-4"><a href="https://cowtransfer.com/">收发文件</a></li>
<li class="col-xs-4"><a href="https://www.materialtools.com/">临时短信</a></li>
<li class="col-xs-4"><a href="https://convertio.co/zh/">格式转换</a></li>
<li class="col-xs-4"><a href="http://www.hiwenku.com/">文档下载</a></li>
<li class="col-xs-4"><a href="https://weibomiaopai.com/">视频下载</a></li>
</ul>
</div>
<!--/ a piece -->
</div>
<!--/ one row -->
</div>
<div class="clearfix"></div>
<div class="container footer">
<div class="row text-center">
<p>Copyright © 2020 mingyue </p>
</div>
</div>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script charset="gbk" src="http://www.baidu.com/js/opensug.js"></script>
<script>
$(function(){
var width = window.screen.width;
if(width < 500){
$(".main").css("marginTop", 20);
$(".search").css("marginTop", 40);
}
})
</script>
</body>
</html>
喜欢的话不要白嫖哦~~
浙公网安备 33010602011771号