一.仿html.cn-PC页面
- 效果图如下:
- 代码如下:
<!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="" /><a
href="#"
></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>
- 部分功能目前掌握的知识,实现不了,比如文章发布时间