html代码
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <linkrel="stylesheet"href="static/css/reset.css"> <linkrel="stylesheet"href="//at.alicdn.com/t/font_3279499_8w6uumzxpz.css"> <linkrel="stylesheet"href="static/css/header.css"> <linkrel="stylesheet"href="static/css/main-nav.css"> <title>仿php中文网首页</title> </head> <body> <!--页眉--> <header> <!--顶部--> <divclass="top"> <divclass="content"> <divclass="title">php中文网,程序员梦开始的地方!</div> <divclass="right"> <ahref=""class="iconfonticon-tixing"></a> <ahref=""><imgsrc="static/images/user-pic.jpeg"alt=""/></a> </div> </div> </div> <divclass="navs"> <divclass="content"> <ahref=""class="logo"><imgsrc="static/images/logo.png"alt=""></a> <!--<nav>标签定义导航链接的部分--> <nav><ahref=""class="active">首页</a> <ahref="">视频教程</a> <ahref="">学习路径</a> <ahref="">php培训</a> <ahref="">资源下载</a> <ahref="">技术文章</a> </nav> <divclass="search"> <inputtype="search"placeholder="输入关键字搜索"> <spanclass="iconfonticon-fangdajingfdj"></span> </div> </div> </div> </header> <!--主体--> <main> <divclass="navs"> <divclass="left"> <ahref="">php开发</a> <ahref="">大前端</a> <ahref="">后端开发</a> <ahref="">数据库</a> <ahref="">移动端</a> <ahref="">运维开发</a> <ahref="">UI设计</a> <ahref="">计算机基础</a> </div> <divclass="slider"> <ahref=""> <imgsrc="static/images/slider.jpeg"alt=""> </a> </div> <divclass="right"> <divclass="userinfo"> <ahref="#"><imgclass="img"src="static/images/dgjj.png"alt="用户名"></a> <ahref="">用户名</a> <span>P豆12.00</span> <ahref=""class="xuexi">我的学习</a> </div> <divclass="wdsq"> <divclass="title"><span>问答社区</span><ahref="">答疑</a></div> <divclass="toutiao"> <span>头条</span> <marqueedirection="up"> <i><ahref="/toutiao-490161.html"target="_blank">首个采用中文编写的操作系统出现了！</a></i><br> <i><ahref="/toutiao-489943.html"target="_blank">Web3现状如何？能否在政策助推下复刻互联网辉煌？</a></i><br> <i><ahref="/toutiao-489887.html"target="_blank">JetBrains和Gitlab均表明暂停在俄罗斯的业务，国内网友对此有何看法？</a></i><br> <i><ahref="/toutiao-489859.html"target="_blank">美国Figma封停大疆等被制裁中国公司账号，国内就没替代了？</a></i> </marquee> </div> <div><span>新课</span><ahref="">3.9公益直播课</a></div> <div><span>新班</span><ahref="">19期PHP直播班</a></div> <div><span>招募</span><ahref="">课程合作计划</a></div> <div><span>公告</span><ahref="">APP上线啦</a></div> </div> </div> <divclass="botton-left"> <divclass="desc"> <divclass="title">学习路径</div> <span>全部7个></span> </div> <ulclass="detail"> <lionclick=""> <imgsrc="static/images/dgjj.png"alt=""> <ahref="">独孤九贱</a> <span>9门课程</span> </li> <lionclick=""> <imgsrc="static/images/ynxj.png"alt=""> <ahref="">独孤九贱</a> <span>9门课程</span> </li> <lionclick=""> <imgsrc="static/images/phpkjkf.png"alt=""> <ahref="">独孤九贱</a> <span>9门课程</span> </li> <lionclick=""> <imgsrc="static/images/phpksrm.png"alt=""> <ahref="">独孤九贱</a> <span>9门课程</span> </li> <lionclick=""> <imgsrc="static/images/dgjj.png"alt=""> <ahref="">独孤九贱</a> <span>9门课程</span> </li> </ul> </div> <divclass="bottom-rifht"> <ulclass="phpXxljMenu"> <liclass="ylwTopBox"onmouseover="showModal()"><ahref="javascript:;"class="aBlack"><spanclass="iconfonticon-weixin-copy"></span><h2>官方公众号</h2></a> <fieldsetstyle="display:none;"class="ylwTopSub"onmouseout="closeModal()"><imgsrc="/static/images/phpcn_erwei.jpg"alt="php中文网官方公众号"><p>微信扫码</p></fieldset></li> <li><ahref="https://jq.qq.com/?_wv=1027&k=jwfj0dXp"target="_blank"class="aBlack"><spanclass="iconfonticon-QQ-circle-fill"></span><h2>官方QQ群</h2></a></li> </ul> </div> </div> </main> <scriptsrc="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.contentimg{
width:50%;
border-radius:50%;
}
header.top.content{
width:1200px;
display:grid;
grid-template-columns:400px100px;
grid-auto-rows:40px;
place-content:space-between;
place-items:centerstart;
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:140px1fr200px;
grid-auto-rows:90px;
gap:10px;
margin:auto;
place-items:centerstart;
}
header.navs.contentimg{
width:100%;
}
header.navs.contentnava.active,
header.navs.contentnava:hover{
color:red;
font-weight:bold;
}
header.navs.content.search{
display:flex;
}
header.navs.contentnava{
padding:010px;
}
header.navs.content.searchinput[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:160px810px190px;
grid-template-rows:400px80px;
gap:20px;
place-content:center;
margin:30px0;
}
main.navs>*{
background-color:#fff;
border-radius:20px;
}
main.navs.botton-left{
grid-column:span2;
}
main.navs.sliderimg{
width:100%;
border-radius:20px;
}
main.navs.left{
display:grid;
place-items:center;
padding:20px0;
}
main.navs.lefta:hover{
color:red;
background-color:rgb(250,223,227);
}
main.navs.lefta{
border-radius:20px;
padding:10px20px;
}
main.navs.botton-left{
display:grid;
grid-template-columns:100px1fr;
}
main.navs.botton-left.desc{
display:grid;
place-items:center;
padding:16px;
}
main.navs.botton-left.detailimg{
width:100%;
grid-row:span2;
}
main.navs.botton-left.detail{
display:flex;
place-items:center;
place-content:space-between;
}
main.navs.botton-left.detailli{
display:grid;
grid-template-columns:36px85px;
gap:010px;
place-items:centerstart;
}
main.navs.botton-left.detaillia{
font-size:14px;
}
main.navs.botton-left.detaillia:hover{
color:red;
}
main.navs.botton-left.detaillispan,
main.navs.botton-left.descspan{
font-size:12px;
color:#999;
}
main.navs.right{
display:grid;
grid-template-rows:140px1fr;
}
main.navs.right.userinfo{
display:grid;
grid-template-columns:70px1fr;
grid-template-rows:41px40px34px1fr;
place-items:centerstart;
padding:10px15px;
}
main.navs.right.userinfoa:nth-of-type(1){
grid-row:span2;
place-self:center;
}
main.navs.right.userinfo.img{
width:40px;
height:40px;
border-radius:50%;
}
main.navs.right.userinfoa:nth-of-type(2){
font-size:18px;
font-weight:bolder;
float:left;
margin-top:10px;
}
main.navs.right.userinfospan{
height:16px;
line-height:16px;
overflow:hidden;
font-size:12px;
color:#999999;
place-self:start;
}
main.navs.right.userinfoa:nth-of-type(2):hover{
color:red;
}
main.navs.right.userinfo.xuexi{
display:block;
width:150px;
height:34px;
color:#fff;
grid-column:span2;
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:10px15px;
}
main.navs.right.wdsqmarquee{
height:2rem;
width:110px;
font-size:12px;
}
main.navs.right.wdsq.toutiao{
display:flex;
}
main.navs.right.wdsqspan{
font-size:14px;
font-family:"微软雅黑";
font-weight:bolder;
padding-right:1em;
color:rgb(104,103,103);
}
main.navs.right.wdsq.titlea{
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.wdsqa:hover{
color:#f11717;
}
main.navs.right.wdsq.titlea:hover{
color:#ffffff;
}
main.navs.bottom-rifhtul{
display:grid;
grid-template-columns:95px95px;
place-items:center;
}
main.navs.bottom-rifhtulli{
float:left;
width:70px;
margin-top:13px;
text-align:center;
}
main.navs.bottom-rifhtullispan{
font-size:30px;
color:#999999;
}
main.navs.bottom-rifhtullih2{
font-size:12px;
font-weight:bold;
height:16px;
line-height:16px;
overflow:hidden;
margin-top:5px;
}
main.navs.bottom-rifhtullih2:hover{
color:#e11717;
}
main.navs.bottom-rifhtullifieldset{
display:grid;
grid-template-columns:95px;
grid-template-rows:95px,20px;
place-items:center;
position:absolute;
top:650px;
right:110px;
}
main.navs.bottom-rifhtullifieldsetimg{
width:95px;
}点击 "运行实例" 按钮查看在线实例
js代码
functionshowModal(){
//获取模态框元素
constmodal=document.querySelector('.ylwTopSub');
//显示模态框
modal.style.display='block';
}
functioncloseModal(){
//获取模态框元素
constmodal=document.querySelector('.ylwTopSub');
//关闭模态框
modal.style.display='none';
}点击 "运行实例" 按钮查看在线实例
相关推荐