收藏
Guanhui批改状态：合格
老师批语：注意一下每个功能块之间的间距！
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link href="./css/common.css" type="text/css" rel="stylesheet" /><link href="./css/index.css" type="text/css" rel="stylesheet" /><title>仿html.cn-PC页面</title></head><body><header id="mainHeader" class="flexDis"><div class="logo" ><a title="htlm中文网" href="/"><img src="./images/logo.png" alt="logo" /></a></div><ul><li><a href="#">首页</a></li><li><a href="#">课程</a></li><li><a href="#">路径</a></li><li><a href="#">资源</a></li><li><a href="#">文章</a></li></ul><div class="searchInfo"><input type="text" placeholder="请输入关键字" value="" /><ahref="#"></a></div><p><a href="#">登录</a><a href="#">注册</a></p></header><header id="mainHeader1" class="flexDis"><ul><li><a class="all" href="#">全部课程</a></li><li><a href="#">视频</a></li><li><a href="#">手册</a></li><li><a href="#">直播</a></li><li><a href="#">技术</a></li><li><a href="#">工具</a></li></ul></header><section class="contrain secCon1 flexDis"><ul><li><a href="#">HTML html html5</a></li><li><a href="#">CSS css css3</a></li><li><a href="#">JS javaScript Ajax</a></li><li><a href="#">JS框架 jQuery Vue.js</a></li><li><a href="#">前端框架 Bootstrap Layui</a></li><li><a href="#">移动开发 小程序开发</a></li><li><a href="#">开发工具</a></li><li><a href="#">软件下载</a></li></ul><!-- 图片父容器给个类名,preview --><div class="preview applyFlex"><p><a href="#"></a><a href="#"></a></p><!-- 把图片应用flex,进行自由伸缩，图片给个类名 --><div class="applyFlex"><img src="./images/banner2.jpg" alt="" /><img src="./images/banner5.jpg" alt="" /><img src="./images/banner6.jpg" alt="" /></div><div class="img1 " ><img src="./images/1.jpg" alt="" /><img src="./images/1.jpg" alt="" /><img src="./images/1.jpg" alt="" /><img src="./images/1.jpg" alt="" /></div></div></section><!-- 实战课程 --><section class="secCon2 contrain"><h1 class="flexDis flexAlignC">实战课程 | <small>全程实战学习，快速掌握web前端开发技术</small><p><a href="#">更多</a></p></h1><!-- 水平居中对齐 --><div class="flexDis flexContentB"><div class="img2"><img src="./images/2.jpg" alt="" /><br><span>内容1的文字介绍</span></div><div class="img2"><img src="./images/2.jpg" alt="" /><br><span>内容1的文字介绍</span></div><div class="img2"><img src="./images/2.jpg" alt="" /><br><span>内容1的文字介绍</span></div><div class="img2"><img src="./images/2.jpg" alt="" /><br><span>内容1的文字介绍</span></div></div></section><!-- 三列布局 --><div class="container"><div class="left"><h3><a href="#">前端工具</a></h3><ul><div class="img3"><li><div class="flexDis flexAlignC"><img src="./images/3.jpg" alt="" /><a href="#">Notepad++</a></li></div><div class="img3"><li><div class="flexDis flexAlignC"><img src="./images/3.jpg" alt="" /><a href="#">Notepad++</a></li></div><div class="img3"><li><div class="flexDis flexAlignC"><img src="./images/3.jpg" alt="" /><a href="#">Notepad++</a></li></div><div class="img3"><li><div class="flexDis flexAlignC"><img src="./images/3.jpg" alt="" /><a href="#">Notepad++</a></li></div><div class="img3"><li><div class="flexDis flexAlignC"><img src="./images/3.jpg" alt="" /><a href="#">Notepad++</a></li></div><div class="img3"><li><div class="flexDis flexAlignC"><img src="./images/3.jpg" alt="" /><a href="#">Notepad++</a></li></div><div class="img3"><li><div class="flexDis flexAlignC"><img src="./images/3.jpg" alt="" /><a href="#">Notepad++</a></li></div><div class="img3"><li><div class="flexDis flexAlignC"><img src="./images/3.jpg" alt="" /><a href="#">Notepad++</a></li></div><div class="img3"><li><div class="flexDis flexAlignC"><img src="./images/3.jpg" alt="" /><a href="#">Notepad++</a></li></div><div class="img3"><li><div class="flexDis flexAlignC"><img src="./images/3.jpg" alt="" /><a href="#">Notepad++</a></li></div></ul></div><div class="main"><h3><a href="#">文章</a><a href="#">视频</a> <a href="#">资源</a><a href="#">教程</a></h3><ul><li><a href="#">CSS教程</a><a href="#">神奇的CSS3混合模式---制作高级特效的必备技巧！</a><input type="date" name="birthday" /></li><li><a href="#">CSS教程</a><a href="#">神奇的CSS3混合模式---制作高级特效的必备技巧！</a><input type="date" name="birthday" /></li><li><a href="#">CSS教程</a><a href="#">神奇的CSS3混合模式---制作高级特效的必备技巧！</a><input type="date" name="birthday" /></li><li><a href="#">CSS教程</a><a href="#">神奇的CSS3混合模式---制作高级特效的必备技巧！</a><input type="date" name="birthday" /></li><li><a href="#">CSS教程</a><a href="#">神奇的CSS3混合模式---制作高级特效的必备技巧！</a><input type="date" name="birthday" /></li><li><a href="#">CSS教程</a><a href="#">神奇的CSS3混合模式---制作高级特效的必备技巧！</a><input type="date" name="birthday" /></li><li><a href="#">CSS教程</a><a href="#">神奇的CSS3混合模式---制作高级特效的必备技巧！</a><input type="date" name="birthday" /></li><li><a href="#">CSS教程</a><a href="#">神奇的CSS3混合模式---制作高级特效的必备技巧！</a><input type="date" name="birthday" /></li><li><a href="#">CSS教程</a><a href="#">神奇的CSS3混合模式---制作高级特效的必备技巧！</a><input type="date" name="birthday" /></li><li><a href="#">CSS教程</a><a href="#">神奇的CSS3混合模式---制作高级特效的必备技巧！</a><input type="date" name="birthday" /></li></ul></div><div class="right"><h3><a href="#">前端手册</a></h3><ul><div class="img3"><li><div class="flexDis flexAlignC"><img src="./images/4.jpg" alt="" /><a href="#">html中文参考手册</a></li></div><div class="img3"><li><div class="flexDis flexAlignC"><img src="./images/4.jpg" alt="" /><a href="#">html中文参考手册</a></li></div><div class="img3"><li><div class="flexDis flexAlignC"><img src="./images/4.jpg" alt="" /><a href="#">html中文参考手册</a></li></div><div class="img3"><li><div class="flexDis flexAlignC"><img src="./images/4.jpg" alt="" /><a href="#">html中文参考手册</a></li></div><div class="img3"><li><div class="flexDis flexAlignC"><img src="./images/4.jpg" alt="" /><a href="#">html中文参考手册</a></li></div><div class="img3"><li><div class="flexDis flexAlignC"><img src="./images/4.jpg" alt="" /><a href="#">html中文参考手册</a></li></div><div class="img3"><li><div class="flexDis flexAlignC"><img src="./images/4.jpg" alt="" /><a href="#">html中文参考手册</a></li></div><div class="img3"><li><div class="flexDis flexAlignC"><img src="./images/4.jpg" alt="" /><a href="#">html中文参考手册</a></li></div><div class="img3"><li><div class="flexDis flexAlignC"><img src="./images/4.jpg" alt="" /><a href="#">html中文参考手册</a></li></div><div class="img3"><li><div class="flexDis flexAlignC"><img src="./images/4.jpg" alt="" /><a href="#">html中文参考手册</a></li></div></ul></div></div></div></div><section class="secCon3 contrain"><h1 class="flexDis flexAlignC">课程推荐 | <small>定期课程推荐，只推荐优质的WEB开发课程</small><p><a href="#">更多</a></p></h1><!-- 水平居中对齐 --><div class="flexDis flexContentB"><div class="img2"><img src="./images/5.jpg" alt="" /><br><span>内容1的文字介绍</span></div><div class="img2"><img src="./images/5.jpg" alt="" /><br><span>内容1的文字介绍</span></div><div class="img2"><img src="./images/5.jpg" alt="" /><br><span>内容1的文字介绍</span></div><div class="img2"><img src="./images/5.jpg" alt="" /><br><span>内容1的文字介绍</span></div></div><div class="flexDis flexContentB"><div class="img2"><img src="./images/5.jpg" alt="" /><br><span>内容1的文字介绍</span></div><div class="img2"><img src="./images/5.jpg" alt="" /><br><span>内容1的文字介绍</span></div><div class="img2"><img src="./images/5.jpg" alt="" /><br><span>内容1的文字介绍</span></div><div class="img2"><img src="./images/5.jpg" alt="" /><br><span>内容1的文字介绍</span></div></div></section><section class="secCon4 contrain"><h1 class="flexDis flexAlignC">最新课程 | <small>前端学习路径，助力web前端工程师快速成长</small><p><a href="#">更多</a></p></h1><!-- 水平居中对齐 --><div class="flexDis flexContentB"><div class="img2"><img src="./images/5.jpg" alt="" /><br><span>内容1的文字介绍</span></div><div class="img2"><img src="./images/5.jpg" alt="" /><br><span>内容1的文字介绍</span></div><div class="img2"><img src="./images/5.jpg" alt="" /><br><span>内容1的文字介绍</span></div><div class="img2"><img src="./images/5.jpg" alt="" /><br><span>内容1的文字介绍</span></div></div></div></section><section class="secCon5 contrain"><h1 class="flexDis flexAlignC">学习路径 | <small>前端学习路径，助力web前端工程师快速成长</small><p><a href="#">更多</a></p></h1><!-- 水平居中对齐 --><div class="flexDis flexContentB"><div class="img2"><img src="./images/6.jpg" alt="" /><br><span>内容1的文字介绍</span></div><div class="img2"><img src="./images/6.jpg" alt="" /><br><span>内容1的文字介绍</span></div><div class="img2"><img src="./images/6.jpg" alt="" /><br><span>内容1的文字介绍</span></div><div class="img2"><img src="./images/6.jpg" alt="" /><br><span>内容1的文字介绍</span></div></div></div></section></body><div class="panel-title"><p>友情链接(QQ:123456)</p><div class="frendlink_second flexDis flexAlignC"><ul><li><a href="#" target="_blank">链接1</a><a href="#" target="_blank">链接1</a><a href="#" target="_blank">链接1</a><a href="#" target="_blank">链接1</a><a href="#" target="_blank">链接1</a><a href="#" target="_blank">链接1</a><a href="#" target="_blank">链接1</a><a href="#" target="_blank">链接1</a><a href="#" target="_blank">链接1</a></li></ul></div></div><div class="mainFooter "><div class="main-widt "><dl class="logo2"><dd><img src="images/logo.png"></dd><dd></dd><dd>HTML中文网</dd><dd></dd><dd>联系QQ:88526</dd><dd></dd></dl></div><dl class="docs"><dt>网站导航</dt><dd><a href="/sitemap.html" target="_blank">标签地图</a></dd><dd></dd><dd><a href="/path/" target="_blank">学习路径</a></dd><dd></dd><dd><a href="/study/" target="_blank">视频教程</a></dd><dd></dd><dd><a href="/down/" target="_blank">开发软件</a></dd><dd></dd></dl><dl class="docs"><dt>旗下子站</dt><dd></dd><dd><a href="#" target="_blank">phpstudy</a></dd><dd></dd><dd><a href="#" target="_blank">php中文网</a></dd><dd></dd><dd><a href="#" target="_blank">技术文章</a></dd><dd></dd><dd><a href="#" target="_blank">文档工具</a></dd><dd></dd></dl><dl class="tool"><dt>关于我们</dt><dd></dd><dd><a href="#" target="_blank">企业合作</a></dd><dd></dd><dd><a href="#" target="_blank">人才招聘</a></dd><dd></dd><dd><a href="#" target="_blank">联系我们</a></dd><dd></dd><dd><a href="#" target="_blank">讲师招募</a></dd><dd></dd></dl><dl class="about-us"><dt>QQ交流群</dt><img src="./images/qq.png" alt="QQ官方交流群" width="110"></dl><dl class="qcode"><dt>微信公众号</dt><img src="./images/weixin.png" alt="QQ官方交流群" width="110"></dl></div><div class="footer"><div class="content"><p>Copyright ©2018-2020 html中文网 All Rights html中文网，专注于大前端知识，一站式WEB前端开发自学平台！ </p><p>工信部备案号： 皖ICP备18014864号-5 </p></footer></div></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
