仿PHP中文网首页头部

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';}

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

实例

实例

实例

更多相关文章

随机推荐