![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
PHPzCorrection status：qualified
Teacher's comments：尽量使用markdown，更加实用
Collection
Collection
html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="static/css/reset.css"> <link rel="stylesheet" href="//at.alicdn.com/t/font_3279499_8w6uumzxpz.css"> <link rel="stylesheet" href="static/css/header.css"> <link rel="stylesheet" href="static/css/main-nav.css"> <title>仿php中文网首页</title> </head> <body> <!-- 页眉 --> <header> <!-- 顶部 --> <div class="top"> <div class="content"> <div class="title">php中文网,程序员梦开始的地方!</div> <div class="right"> <a href="" class="iconfont icon-tixing"></a> <a href=""><img src="static/images/user-pic.jpeg" alt="" /></a> </div> </div> </div> <div class="navs"> <div class="content"> <a href="" class="logo"><img src="static/images/logo.png" alt=""></a> <!-- <nav> 标签定义导航链接的部分 --> <nav><a href="" class="active">首页</a> <a href="">视频教程</a> <a href="">学习路径</a> <a href="">php培训</a> <a href="">资源下载</a> <a href="">技术文章</a> </nav> <div class="search"> <input type="search" placeholder="输入关键字搜索"> <span class="iconfont icon-fangdajing fdj"></span> </div> </div> </div> </header> <!-- 主体 --> <main> <div class="navs"> <div class="left"> <a href="">php开发</a> <a href="">大前端</a> <a href="">后端开发</a> <a href="">数据库</a> <a href="">移动端</a> <a href="">运维开发</a> <a href="">UI设计</a> <a href="">计算机基础</a> </div> <div class="slider"> <a href=""> <img src="static/images/slider.jpeg" alt=""> </a> </div> <div class="right"> <div class="userinfo"> <a href="#"><img class="img" src="static/images/dgjj.png" alt="用户名"></a> <a href="">用户名</a> <span>P豆12.00</span> <a href="" class="xuexi">我的学习</a> </div> <div class="wdsq"> <div class="title"><span>问答社区</span><a href="">答疑</a></div> <div class="toutiao"> <span>头条</span> <marquee direction="up"> <i><a href="/toutiao-490161.html" target="_blank">首个采用中文编写的操作系统出现了！</a></i><br> <i><a href="/toutiao-489943.html" target="_blank">Web3现状如何？能否在政策助推下复刻互联网辉煌？</a></i><br> <i><a href="/toutiao-489887.html" target="_blank">JetBrains和Gitlab均表明暂停在俄罗斯的业务，国内网友对此有何看法？</a></i><br> <i><a href="/toutiao-489859.html" target="_blank">美国Figma封停大疆等被制裁中国公司账号，国内就没替代了？</a></i> </marquee> </div> <div><span>新课</span><a href="">3.9公益直播课</a></div> <div><span>新班</span><a href="">19期PHP直播班</a></div> <div><span>招募</span><a href="">课程合作计划</a></div> <div><span>公告</span><a href="">APP上线啦</a></div> </div> </div> <div class="botton-left"> <div class="desc"> <div class="title">学习路径</div> <span>全部7个></span> </div> <ul class="detail"> <li onclick=""> <img src="static/images/dgjj.png" alt=""> <a href="">独孤九贱</a> <span>9门课程</span> </li> <li onclick=""> <img src="static/images/ynxj.png" alt=""> <a href="">独孤九贱</a> <span>9门课程</span> </li> <li onclick=""> <img src="static/images/phpkjkf.png" alt=""> <a href="">独孤九贱</a> <span>9门课程</span> </li> <li onclick=""> <img src="static/images/phpksrm.png" alt=""> <a href="">独孤九贱</a> <span>9门课程</span> </li> <li onclick=""> <img src="static/images/dgjj.png" alt=""> <a href="">独孤九贱</a> <span>9门课程</span> </li> </ul> </div> <div class="bottom-rifht"> <ul class="phpXxljMenu"> <li class="ylwTopBox" onmouseover="showModal()"><a href="javascript:;" class="aBlack"><span class="iconfont icon-weixin-copy"></span> <h2>官方公众号</h2></a> <fieldset style="display: none;" class="ylwTopSub" onmouseout="closeModal()"><img src="/static/images/phpcn_erwei.jpg" alt="php中文网官方公众号"><p>微信扫码</p></fieldset></li> <li><a href="https://jq.qq.com/?_wv=1027&k=jwfj0dXp" target="_blank" class="aBlack"><span class="iconfont icon-QQ-circle-fill"></span><h2>官方QQ群</h2></a></li> </ul> </div> </div> </main> <script src="static/js/moda1.js"></script> </body> </html>
点击 "运行实例" 按钮查看在线实例
header.css代码
header .top{
width: 100vw;
height: 40px;
background-color: rgb(52,52,52);
color: #aaa;
}
header .top .content img{
width: 50%;
border-radius: 50%;
}
header .top .content{
width: 1200px;
display: grid;
grid-template-columns: 400px 100px;
grid-auto-rows: 40px;
place-content: space-between;
place-items: center start;
margin: auto;
}
header .top .content .right .iconfont {
color: #eee;
font-size: larger;
}
header .top .content .right {
display: grid;
grid-template-columns: repeat(2,1fr);
place-items: center;
}
/* 导航 */
header .navs {
width: 100vw;
height: 90px;
background-color: #fff;
}
header .navs .content{
width: 1200px;
display: grid;
grid-template-columns: 140px 1fr 200px;
grid-auto-rows: 90px;
gap:10px;
margin: auto;
place-items: center start;
}
header .navs .content img{
width: 100%;
}
header .navs .content nav a.active,
header .navs .content nav a:hover{
color: red;
font-weight: bold;
}
header .navs .content .search{
display: flex;
}
header .navs .content nav a{
padding: 0 10px;
}
header .navs .content .search input[type='search']{
width: 200px;
height: 36px;
border: none;
outline: none;
background-color: #f7f8fa;
border-radius: 20px;
padding-left: 10px;
}
header .navs .content .search .fdj{
font-size: 22px;
color:#ccc;
position: relative;
left: -40px;
top:5px;
}点击 "运行实例" 按钮查看在线实例
main-nav.css代码
main{
font-size: 14px;
}
main .navs {
display: grid;
grid-template-columns: 160px 810px 190px;
grid-template-rows: 400px 80px;
gap:20px;
place-content: center;
margin: 30px 0;
}
main .navs>*{
background-color: #fff;
border-radius: 20px;
}
main .navs .botton-left{
grid-column: span 2;
}
main .navs .slider img {
width: 100%;
border-radius:20px;
}
main .navs .left {
display: grid;
place-items: center;
padding: 20px 0;
}
main .navs .left a:hover {
color:red;
background-color: rgb(250,223,227);
}
main .navs .left a {
border-radius: 20px;
padding: 10px 20px;
}
main .navs .botton-left {
display: grid;
grid-template-columns: 100px 1fr;
}
main .navs .botton-left .desc {
display: grid;
place-items: center;
padding:16px;
}
main .navs .botton-left .detail img{
width: 100%;
grid-row: span 2;
}
main .navs .botton-left .detail {
display: flex;
place-items: center;
place-content: space-between;
}
main .navs .botton-left .detail li {
display: grid;
grid-template-columns: 36px 85px;
gap:0 10px;
place-items: center start;
}
main .navs .botton-left .detail li a {
font-size: 14px;
}
main .navs .botton-left .detail li a:hover {
color:red;
}
main .navs .botton-left .detail li span,
main .navs .botton-left .desc span {
font-size: 12px;
color:#999;
}
main .navs .right {
display: grid;
grid-template-rows: 140px 1fr;
}
main .navs .right .userinfo{
display: grid;
grid-template-columns: 70px 1fr;
grid-template-rows: 41px 40px 34px 1fr;
place-items: center start;
padding: 10px 15px;
}
main .navs .right .userinfo a:nth-of-type(1){
grid-row: span 2;
place-self: center;
}
main .navs .right .userinfo .img{
width: 40px;
height: 40px;
border-radius: 50%;
}
main .navs .right .userinfo a:nth-of-type(2){
font-size: 18px;
font-weight: bolder;
float: left;
margin-top: 10px;
}
main .navs .right .userinfo span{
height: 16px;
line-height: 16px;
overflow: hidden;
font-size: 12px;
color: #999999;
place-self: start;
}
main .navs .right .userinfo a:nth-of-type(2):hover{
color: red;
}
main .navs .right .userinfo .xuexi {
display: block;
width: 150px;
height: 34px;
color: #fff;
grid-column: span 2;
background-color: #e11717;
border-radius: 100px;
line-height: 34px;
text-align: center;
}
main .navs .right .userinfo .xuexi:hover{
background-color: #d80101;
}
main .navs .right .wdsq{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(7,1/7fr);
border-top-style:solid;
border-top-color: rgb(190, 190, 188);
border-top-width:thin;
padding: 10px 15px;
}
main .navs .right .wdsq marquee{
height: 2rem;
width: 110px;
font-size: 12px;
}
main .navs .right .wdsq .toutiao{
display:flex;
}
main .navs .right .wdsq span{
font-size: 14px;
font-family:"微软雅黑";
font-weight:bolder;
padding-right: 1em;
color: rgb(104, 103, 103);
}
main .navs .right .wdsq .title a{
display: inline-block;
width: 31px;
height: 16px;
background: #ff583d;
border-radius: 2px;
font-size: 12px;
color: #ffffff;
line-height: 16px;
text-align: center;
}
main .navs .right .wdsq a:hover{
color: #f11717;
}
main .navs .right .wdsq .title a:hover{
color: #ffffff;
}
main .navs .bottom-rifht ul{
display: grid;
grid-template-columns: 95px 95px;
place-items: center;
}
main .navs .bottom-rifht ul li{
float: left;
width: 70px;
margin-top: 13px;
text-align: center;
}
main .navs .bottom-rifht ul li span{
font-size:30px;
color:#999999;
}
main .navs .bottom-rifht ul li h2{
font-size: 12px;
font-weight: bold;
height: 16px;
line-height: 16px;
overflow: hidden;
margin-top: 5px;
}
main .navs .bottom-rifht ul li h2:hover{
color: #e11717;
}
main .navs .bottom-rifht ul li fieldset{
display: grid;
grid-template-columns: 95px;
grid-template-rows: 95px,20px;
place-items: center;
position:absolute;
top:650px;
right:110px;
}
main .navs .bottom-rifht ul li fieldset img{
width: 95px;
}点击 "运行实例" 按钮查看在线实例
js代码
function showModal() {
// 获取模态框元素
const modal = document.querySelector('.ylwTopSub');
// 显示模态框
modal.style.display = 'block';
}
function closeModal() {
// 获取模态框元素
const modal = document.querySelector('.ylwTopSub');
// 关闭模态框
modal.style.display = 'none';
}点击 "运行实例" 按钮查看在线实例
