Let me tell you in advance that only some fragments have been implemented! as follows:
Front-end: html+css+js realizes CSDN homepage
1. Achieve results
My implementation effect is:
the original interface is as follows, the URL is: csdn
2. Front-end knowledge you need to know
- The use of block-level elements and inline elements, such as block-level elements div, p, inline elements img, span, etc.
- css sets float, css style float:left floats left, float:right floats right, clear:both clears float
- Absolute positioning, relative positioning, fixed positioning: position:relative、absolute、fixed
- animation transition effect transition
- Box model, content (content), padding (inner margin), border (border), margin (outer margin)
- Solution when margin-top fails: set border, set overflow:hidden, etc. to its parent element
- js knowledge set listener addEventListener
3. Use of fixed positioning
This part is considered the navigation bar! The implementation of the original website uses js monitoring, fixed positioning, etc. Initially, the navigation bar is not fixedly positioned, but becomes fixedly positioned after moving the scroll bar downwards. When the scroll bar is moved upwards to a certain position, it will be fixed again. Restore to the initial style, as follows:
I used fixed positioning directly for this part without setting up monitoring. In addition, except for the font and text style, which are copied from the original website, the other parts are all designed by the editor according to my own ideas!
4. Use of js monitoring
These two icons will change as the mouse moves in and out. It is not as simple as simply changing the src attribute of an img. Refer to the implementation principle of the original website.
4. Reference code and running results
operation result:
html+css+js realizes csdn home page
Reference Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSDN - 专业开发者社区</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="main-2.css">
<link rel="icon" href="./imgs/favicon32.ico">
<link rel="stylesheet" href="main-3.css">
</head>
<body style="background-color:hsla(0,0%,98%,.8);">
<header>
<div class="main">
<div class="main-1">
<a href="">
<img src="./imgs/20201124032511.png" alt="">
</a>
<ul>
<li><a href="">博客</a></li>
<li><a href="">下载</a></li>
<li>
<a href="">学习
<img style="margin-left: -6px" class="width-19 height-auto verfity-middle" src="./imgs/20230523100320.png" alt="">
</a>
</li>
<li><a href="">社区</a></li>
<li><a href="">插件</a></li>
<li><a href="">GitCode</a></li>
<li><a href="">InsCode</a></li>
</ul>
</div>
<div class="main-2">
<div>
<div class="main-2-inner">
<input type="text" placeholder="小红书">
<button class="font-weight-500 font-14" style="color: white">
<i></i>
<span>搜索</span>
</button>
</div>
</div>
</div>
<div class="main-3"></div>
</div>
</header>
<!-- 导航栏的样式-->
<main>
<div class="m-1">
<div class="ts-div">
<img src="./imgs/20220107105619.png" alt="">
</div>
<ul class="height-24">
<li><a href="">后端</a></li>
<li><a href="">前端</a></li>
<li><a href="">移动开发</a></li>
<li><a href="">编程语言</a></li>
<li><a href="">Java</a></li>
<li><a href="">Python</a></li>
<li><a href="">人工智能</a></li>
<li><a href="">AIGC</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>
<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>
<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>
<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>
<li><a href="">学习和成长</a></li>
<li><a href="">搜索</a></li>
<li><a href="">开发工具</a></li>
<li><a href="">游戏</a></li>
<li><a href="">HarmonyOS</a></li>
<li><a href="">区块链</a></li>
<li><a href="">数学</a></li>
<li><a href="">3C硬件</a></li>
<li><a href="">资讯</a></li>
<!-- 特殊li标签-->
<li class="ts-li">
<img src="./imgs/20220107105622.png" alt="">
</li>
</ul>
</div>
<div class="m-2">
<!-- 什么都不是-->
</div>
<div class="m-3">
<div class="m-3-l">
<div class="m3l-l">
<div class="m3ll-t">
<img src="./imgs/20220107104621.png" alt="">
<h3 class="public-css">头条</h3>
</div>
<div class="m3ll-b">
<a href="">
<img src="./imgs/20231229102229.jpg" alt="">
</a>
<a href="" class="public-css margin-top-8 font-17">
看程序员雷军如何用 1003 天，造年轻人的第一台智能汽车
</a>
<a href="" class="margin-top-6">
雷军公开了除了售价以外的实车、设计理念、重要参数和技术性能等诸多细节。他在发布会上强调，小米汽车将专注于技术研发，并表达出小米汽车的目标是：在未来 15 到 20 年内成为全球前五的汽车厂商，并为中国汽车工业的全面崛起而努力。
</a>
</div>
</div>
<div class="m3l-r">
<div class="m3lr-l">
<div class="m3lr-top">
<div>
<img src="./imgs/20220107104919.png" alt="">
<img src="./imgs/20220107104954.png" alt="">
</div>
</div>
<div class="m3lr-bottom">
<a href="">
<p>2023 AI开发者生态报告</p>
<p>技术生态、开发范式与应用案例全景</p>
</a>
<a href="">
<p>Vue 2 生命周期即将结束！</p>
<p>Vue 2 将于 2023 年 12 月 31 日达到生命周期结束 (EOL)</p>
</a>
<a href="">
<p>代码量锐减 80%，一次祖传代码重构实践</p>
<p>本文将分享重构过程中碰到的代码坏味道，并分析这样写的动机、预防和拯救措施。</p>
</a>
<a href="">
<p>6小时学会玩迷宫，这个AI机器人不仅打破人类记录</p>
<p>竟顺便把作弊也学了？！...</p>
</a>
<a href="">
<p>2023各编程语言最受欢迎的许可证</p>
<p>文章分析了 2023 年最受欢迎的开源许可证</p>
</a>
</div>
</div>
<div class="m3lr-r">
<div class="m3lr-top">
<div class="m3lr-top-1">
<img src="./imgs/20220107104836.png" alt="">
<h3 class="public-css">热点</h3>
</div>
<div>
<img src="./imgs/20220107104919.png" alt="">
<img src="./imgs/20220107104954.png" alt="">
</div>
</div>
<div class="m3lr-bottom">
<a href="">
<p>文心一言用户规模破1亿</p>
<p>Julia 1.0 发布｜极客头条</p>
</a>
<a href="">
<p>Kuasar成为CNCF官方项目</p>
<p>探索容器运行时新纪元</p>
</a>
<a href="">
<p>PC 端鸿蒙操作系统已接近完成</p>
<p>雷军：小米 SU7 确实有点贵|极客头条</p>
</a>
<a href="">
<p>2024 年软件开发新趋势！</p>
<p>软件是科技行业的基石。</p>
</a>
<a href="">
<p>低时延，可扩展的 l4s 拥塞控制算法</p>
<p>最好的拥塞控制算法是维持不拥塞状态。</p>
</a>
</div>
</div>
</div>
</div>
<!-- 左边部分-->
<div class="m-3-r m3r">
<div class="m3r-t">
<div class="m3rt-l">
<img src="./imgs/20220107105446.png" alt="">
<h3 class="public-css">直播</h3>
</div>
<div class="m3rt-r">
<a href="">更多 ></a>
</div>
</div>
<div class="m3r-b">
<a href="">
<div class="a-l">
<img class="live-img" src="./imgs/1703048006545.jpg" alt="">
<img class="other-img" src="./imgs/livemake.ed2b6426.png" alt="">
<div class="live-img2">
<img src="./imgs/play.9956ea53.png" alt="">
</div>
<p class="live-txt">
直播预约
</p>
</div>
<div class="a-r">
<h3>
一起学习生成式人工智能（三）｜用 Python OpenAI SDK 玩转生成式人工智能
</h3>
<p>
01/10 19:30
</p>
</div>
</a>
<a href="">
<div class="a-l">
<img class="live-img" src="./imgs/1703048006545.jpg" alt="">
<img class="other-img" src="./imgs/livemake.ed2b6426.png" alt="">
<div class="live-img2">
<img src="./imgs/play.9956ea53.png" alt="">
</div>
<p class="live-txt">
直播预约
</p>
</div>
<div class="a-r">
<h3>
一起学习生成式人工智能（四）｜用低代码实现人工智能应用
</h3>
<p>
01/17 19:30
</p>
</div>
</a>
<a href="">
<div class="a-l">
<img class="live-img" src="./imgs/1703142372745.jpg" alt="">
<img class="other-img" src="./imgs/livemake.ed2b6426.png" alt="">
<div class="live-img2">
<img src="./imgs/play.9956ea53.png" alt="">
</div>
<p class="live-txt">
直播预约
</p>
</div>
<div class="a-r">
<h3>
无界创新：2024年首场AIGC与低代码发展沙龙
</h3>
<p>
01/06 10:00
</p>
</div>
</a>
<a href="">
<div class="a-l">
<img class="live-img" src="./imgs/183996c4f54d4bd78d6cbfb2e8356631.jpg" alt="">
<img class="other-img" src="./imgs/livemake.ed2b6426.png" alt="">
<div class="live-img2">
<img src="./imgs/play.9956ea53.png" alt="">
</div>
<p class="live-txt">
直播预约
</p>
</div>
<div class="a-r">
<h3>
LangChain 表达式语言 LCEL 初探
</h3>
<p>
01/04 19:30
</p>
</div>
</a>
</div>
</div>
<!-- 右边部分-->
</div>
</main>
</body>
<script type="text/javascript" src="main.js">
</script>
</html>