1 Star 0 Fork 0

Pooh/webStudy

Create your Gitee Account
Explore and code with more than 12 million developers,Free private repositories !:)
Sign up
文件
This repository doesn't specify license. Please pay attention to the specific project description and its upstream code dependency when using it.
Clone or Download
myhome.html 21.15 KB
Copy Edit Raw Blame History
Pooh authored 2024-06-18 00:06 . 修改CDN文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="icon" href="img/html.svg">
<!-- 引入css -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- 引入js -->
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/vue2.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.js"></script>
<link rel="stylesheet" href="css/index.css">
<style>
html::-webkit-scrollbar {
width: 0;
}
body::-webkit-scrollbar {
width: 0;
}
* {
margin: 0;
padding: 0;
}
.active {
font-weight: bolder;
}
</style>
</head>
<body>
<!-- 导航条开始 -->
<nav class="navbar navbar-expand-lg py-4 sticky-top container-fluid" id="header_nav"
>
<!-- 网站名字logo -->
<a href="#" class="navbar-brand ms-4">前端探索者</a>
<!-- 右边折叠按钮 -->
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar"
aria-controls="offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- 中间部分 -->
<div class="navbar-collapse collapse d-none">
<ul class="navbar-nav m-auto ">
<!-- 左边菜单 -->
<li class="nav-item ">
<a href="index.html" class="nav-link active" role="button" aria-expanded="false">首页</a>
</li>
<li class="nav-item dropdown" id="QDBD">
<a href="#" class="nav-link dropdown-toggle " role="button" data-bs-toggle="dropdown"
aria-expanded="false">前端榜单</a>
<ul class="dropdown-menu" id="QDBD_Web">
<li><a href="study.html" class="dropdown-item">Bootstrap</a></li>
<li><a href="#" class="dropdown-item">Layui</a></li>
<li><a href="#" class="dropdown-item">React</a></li>
<li><a href="#" class="dropdown-item">Vue</a></li>
</ul>
</li>
<li class="nav-item dropdown" id="XXGL">
<a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown"
aria-expanded="false">学习攻略</a>
<ul class="dropdown-menu" id="XXGL_Web">
<li><a href="#" class="dropdown-item">零基础学Bootstrap</a></li>
<li><a href="#" class="dropdown-item">零基础学Layui</a></li>
<li><a href="#" class="dropdown-item">零基础学React</a></li>
<li><a href="#" class="dropdown-item">零基础学Vue</a></li>
</ul>
</li>
</ul>
<!-- 中间搜索 -->
<form class="d-flex d-inline-block " role="search" id="sousuo">
<input class="form-control rounded-0" id="sousuoneirong" type="search" placeholder="Search"
aria-label="Search"
>
<button class="btn btn-outline-primary rounded-0" type="submit">搜索</button>
</form>
<!-- 右边菜单 -->
<ul class="navbar-nav m-auto d-none d-xxl-flex">
<li class="nav-item ">
<a href="myhome.html" class="nav-link " role="button" aria-expanded="false">论坛中心</a>
</li>
<li class="nav-item ">
<a href="#" class="nav-link " role="button" aria-expanded="false">我的笔记</a>
</li>
<li class="nav-item ">
<a href="#" class="nav-link " role="button" aria-expanded="false">联系我们</a>
</li>
</ul>
<!-- 用户头像 -->
<a role="button" class="btn me-1 yonghu" href="login.html">
<img src="img/weekend.awebp" class="rounded-circle">
</a>
</div>
</nav>
<!-- 折叠按钮侧导航 -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel"
>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<h6 class="dropdown-header">Menu</h6>
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">首页</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
前端榜单
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Bootstrap</a></li>
<li><a class="dropdown-item" href="#">Layui</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">更多</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
学习攻略
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">教你七天学会Bootstrap</a></li>
<li><a class="dropdown-item" href="#">零基础学Js</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">更多</a></li>
</ul>
</li>
<div class="dropdown-divider my-4"></div>
<h6 class="dropdown-header">More</h6>
<li class="nav-item ">
<a class="nav-link" aria-current="page" href="#">论坛中心</a>
</li>
<li class="nav-item ">
<a class="nav-link" aria-current="page" href="#">我的笔记</a>
</li>
<li class="nav-item ">
<a class="nav-link" aria-current="page" href="#">联系我们</a>
</li>
</ul>
<div class="d-grid gap-2 col-6 mx-auto">
<button class="btn btn-primary" type="button">登录</button>
</div>
</div>
</div>
<!-- 内容开始 -->
<div class="container mt-4">
<div class="row">
<!-- 侧导航开始 -->
<div class="col-xl-2 col-md-3 d-none d-md-flex">
<div class="nav flex-column nav-pills rounded-3 position-fixed" role="tablist"
aria-orientation="vertical" style="background-color: #ffffff;">
<button class="nav-link active" data-bs-toggle="pill" type="button" role="tab" aria-selected="true">
<div class="d-flex align-items-center py-1 ps-1">
<img src="./img/zonghe.svg" width="20">
<div class="ms-2">
综合
</div>
</div>
</button>
<button class="nav-link" data-bs-toggle="pill" type="button" role="tab" aria-selected="false">
<div class="d-flex align-items-center py-1 ps-1">
<img src="./img/bootstrap.svg" width="20">
<div class="ms-2">
Bootstrap
</div>
</div>
</button>
<button class="nav-link" data-bs-toggle="pill" type="button" role="tab" aria-selected="false">
<div class="d-flex align-items-center py-1 ps-1">
<img src="./img/vue.svg" width="20">
<div class="ms-2">
Vue
</div>
</div>
</button>
<button class="nav-link" data-bs-toggle="pill" type="button" role="tab" aria-selected="false">
<div class="d-flex align-items-center py-1 ps-1">
<img src="./img/react.svg" width="20">
<div class="ms-2">
React
</div>
</div>
</button>
<button class="nav-link" data-bs-toggle="pill" type="button" role="tab" aria-selected="false">
<div class="d-flex align-items-center py-1 ps-1">
<img src="./img/know_more.svg" width="20">
<div class="ms-2">
More
</div>
</div>
</button>
</div>
</div>
<!-- 侧导航结束 -->
<!-- 文章开始 -->
<div class="col-xl-7 px-3 rounded-3 h-100 col-md-9 col-12 " style="background-color: #ffffff;"
id="article">
<!-- 标题开始 -->
<div class="border-bottom ps-3 d-flex" style="justify-content: space-between;">
<ul class="nav nav-underline pb-2">
<li class="nav-item" id="recommend">
<a class="nav-link active" aria-current="page" href="#">推荐</a>
</li>
<li class="nav-item" id="new">
<a class="nav-link" href="#">最新</a>
</li>
</ul>
<button class=" btn my-2" data-bs-toggle="modal" data-bs-target="#articleadd">添加文章</button>
<div class="modal fade" id="articleadd" tabindex="-1" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">添加文章</h1>
<!-- 关闭按钮 -->
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- 文章标题 -->
<div class="form-floating">
<input type="text" class="form-control" id="articleaddtitle"
placeholder="articleaddtitle">
<label for="articleaddtitle">文章标题</label>
</div>
<!-- 文章内容 -->
<div class="form-floating mt-3">
<input type="text" class="form-control" id="articleaddcontent"
placeholder="articleaddcontent">
<label for="articleaddcontent">内容</label>
</div>
<!-- 文章作者 -->
<div class="form-floating mt-3">
<input type="text" class="form-control" id="articleaddzuozhe"
placeholder="articleaddzuozhe">
<label for="articleaddzuozhe">作者</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" data-bs-dismiss="modal"
id="addbtn">添加
</button>
</div>
</div>
</div>
</div>
</div>
<!-- 结束 -->
<!-- 帖子开始 -->
<div class="lists">
<div class="ps-3 mt-3 border-bottom " v-for="item in items">
<!-- 标题名字 -->
<div
class="fatiebiaoti">
<!-- {{item.articleTitle}} -->
{{item.articleTitle}}
</div>
<!-- 帖子内容 -->
<div
class="mt-2 fatieneirong">
{{item.articleContent}}
</div>
<!-- 发帖人信息 -->
<div class="py-2">
<div class="d-flex align-items-center py-1 ps-1 justify-content-between"
id="fatieren">
<div>
作者:{{item.articleAuthor}}
</div>
<div class="d-flex">
<img src="img/point.svg" width="20" class="point_p">
<div class="ms-2 point_num">{{item.num}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 文章结束 -->
<!-- 广告开始 -->
<div class="col-xl-3 px-3 d-none d-xl-flex">
<div style="height: 400px;">
<img src="img/advertisement.jpg" class="rounded-3 guanggao"
id="advertisement">
<button type="button" class="btn-close" aria-label="Close" style="position: absolute;"
id="closebtn"></button>
</div>
</div>
<!-- 广告结束 -->
</div>
</div>
<!-- 底部开始 -->
<div class="container">
<hr>
<footer class="pt-5">
<div class="row">
<div class="col-6 col-md-2 mb-3">
<h5>前端探索者</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">首页</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">前端榜单</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">学习攻略</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">软件下载</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">了解更多</a></li>
</ul>
</div>
<div class="col-6 col-md-2 mb-3">
<h5>编辑器推荐</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">VsCode</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">WebStorm</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Sublime</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">KindEditor</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">...</a></li>
</ul>
</div>
<div class="col-6 col-md-2 mb-3">
<h5>框架官方连接</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="https://getbootstrap.com/" target="_blank"
class="nav-link p-0 text-muted">BootStrap</a></li>
<li class="nav-item mb-2"><a href="https://cn.vuejs.org/" target="_blank"
class="nav-link p-0 text-muted">Vue</a></li>
<li class="nav-item mb-2"><a href="https://react.dev/" target="_blank"
class="nav-link p-0 text-muted">React</a></li>
<li class="nav-item mb-2"><a href="https://www.ilayuis.com/" target="_blank"
class="nav-link p-0 text-muted">Layui</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">...</a></li>
</ul>
</div>
<!-- 列偏移 -->
<div class="col-md-5 offset-md-1 mb-3">
<h5>有疑问请私信官方</h5>
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">您的邮箱地址</label>
<input type="email" class="form-control" id="exampleFormControlInput1"
placeholder="1844494570@qq.com">
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">请输入</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div class="d-flex justify-content-end mt-3">
<button class="btn btn-primary" type="submit" id="submit">发送</button>
</div>
</div>
</div>
<hr>
<p class="text-center text-muted">&copy; 2023-12-19 2022080188 Pooh 制作,有事联系18658491360</p>
</footer>
</div>
<!-- 底部结束 -->
<script>
new Vue({
el: "#article",
data: {
items: []
},
methods: {
handleLoad() {
axios.get('api/article.json').then(res => {
this.items = res.data
})
}
},
//加载结束
mounted() {
this.handleLoad()
}
})
</script>
<script>
$(function () {
// 1.鼠标经过显示菜单 移出隐藏 淡入淡出
$("#QDBD").mouseover(function () {
$("#QDBD_Web").fadeIn()
})
$("#QDBD").mouseleave(function () {
$("#QDBD_Web").fadeOut()
})
$("#XXGL").mouseover(function () {
$("#XXGL_Web").fadeIn()
})
$("#XXGL").mouseleave(function () {
$("#XXGL_Web").fadeOut()
})
// 5.切换状态
$("#new").click(function () {
$("#new a").addClass("active")
$("#recommend a").removeClass("active")
})
$("#recommend").click(function () {
$("#recommend a").addClass("active")
$("#new a").removeClass("active")
})
// 6.关闭广告
$("#closebtn").click(function () {
$("#advertisement").hide()
$("#closebtn").hide()
})
//7.获取所有添加的内容
//文章标题
$("#articleaddtitle").val()
//文章内容
$("#articleaddcontent").val()
// 文章作者
$("#articleaddzuozhe").val()
let num = 0
// let content=document.querySelector("#articleaddcontent").html()
// let zuozhe=document.querySelector("#articleaddzuozhe").html()
$("#addbtn").click(function () {
//创造
let $list = $(`<div class="ps-3 mt-3 border-bottom">
<!-- 标题名字 -->
<div
style="white-space: nowrap;; text-overflow: ellipsis; overflow: hidden;font-size: 18px;font-weight: 600;">
${$("#articleaddtitle").val()}
</div>
<!-- 帖子内容 -->
<div style="white-space: nowrap;; text-overflow: ellipsis; overflow: hidden; font-size: 14px;"
class="mt-2">
${$("#articleaddcontent").val()}
</div>
<!-- 发帖人信息 -->
<div class="py-2">
<div class="d-flex align-items-center py-1 ps-1 justify-content-between"
style="font-size: 12px;">
<div>
作者:${$("#articleaddzuozhe").val()}
</div>
<div class="d-flex">
<img src="img/point.svg" width="20" class="point_p">
<div class="ms-2 point_num">${num}</div>
</div>
</div>
</div>
</div>`)
//添加
$('.lists').prepend($list)
//添加完后输入框清空
$("#articleaddtitle").val("")
$("#articleaddcontent").val("")
$("#articleaddzuozhe").val("")
})
// 8.点赞
$(".point_p").click(function () {
if ($(this).attr('src') == 'img/point.svg') {
$(this).attr('src', 'img/point01.svg')
$(this).siblings().html(parseInt($(this).siblings().html()) + 1)
} else {
$(this).attr('src', 'img/point.svg')
$(this).siblings().html(parseInt($(this).siblings().html()) - 1)
}
//获取数量
console.log($(this).siblings().html())
// console.log($(".point_num").html())
})
})
</script>
</body>
</html>
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/peng-hao-pooh/web-study.git
git@gitee.com:peng-hao-pooh/web-study.git
peng-hao-pooh
web-study
webStudy
master

Search

0d507c66 1850385 C8b1a773 1850385