|
|
@@ -55,17 +55,61 @@
|
|
|
}
|
|
|
/* 文章内容 */
|
|
|
.content{
|
|
|
- padding:40px 0;
|
|
|
+ padding-top:40px;
|
|
|
}
|
|
|
.content p{
|
|
|
line-height: 1.8;
|
|
|
font-size: 16px;
|
|
|
color: #444;
|
|
|
+ margin-bottom: 30px;
|
|
|
}
|
|
|
.content p .text-style-one{
|
|
|
font-weight: 700;
|
|
|
color: #e74c3c;
|
|
|
}
|
|
|
+ .content p .text-style-two{
|
|
|
+ background-color: #fff3cd;
|
|
|
+ padding: 0 5px;
|
|
|
+ border-radius: 3px;
|
|
|
+ }
|
|
|
+ .content p .text-style-three{
|
|
|
+ color: #e74c3c;
|
|
|
+ background-color: #f4f4f4;
|
|
|
+ border-radius: 3px;
|
|
|
+ padding: 0 5px;
|
|
|
+ }
|
|
|
+ .content .img-content{
|
|
|
+ text-align: center;
|
|
|
+ line-height: 1.8;
|
|
|
+ }
|
|
|
+ .content img{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .content .img-content i{
|
|
|
+ font-size: 14px;
|
|
|
+ color: #888;
|
|
|
+
|
|
|
+ }
|
|
|
+ .content h2{
|
|
|
+ font-size: 24px;
|
|
|
+ border-bottom: 2px solid #3498db;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ }
|
|
|
+ .content p .text-style-four{
|
|
|
+ color: #3498db;
|
|
|
+ }
|
|
|
+ .content .text-content{
|
|
|
+ background-color: #f8f9fa;
|
|
|
+ color: #666;
|
|
|
+ border-left: 4px solid #e74c3c;
|
|
|
+ padding: 30px 40px;
|
|
|
+ text-indent: 30px;
|
|
|
+ font-style: italic;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ .content p .text-style-five{
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
@@ -78,6 +122,19 @@
|
|
|
</div>
|
|
|
<div class="content">
|
|
|
<p>在快速发展的前端领域，技术更新迭代速度越来越快。作为一名前端工程师，如何在激烈的竞争中保持核心竞争力？答案很简单：<span class="text-style-one">持续学习</span>与<span class="text-style-one">深度思考</span>。本文将分享我在前端成长道路上的一些经验和思考。</p>
|
|
|
+ <p>技术栈的选择很重要，但更重要的是<span class="text-style-two">基础扎实</span>。很多初学者热衷于追逐新技术，却忽视了HTML、CSS、JavaScript这些基础知识的学习。实际上，<span class="text-style-three">Vue</span>、<span class="text-style-three">React</span>等框架只是工具，底层能力才是决定你走多远的关键。</p>
|
|
|
+ <div class="img-content">
|
|
|
+ <img src="https://picsum.photos/800/400" alt="图片">
|
|
|
+ <i>图1：持续学习是前端工程师的必修课</i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <h2>为什么要注重基础？</h2>
|
|
|
+ <p>前端开发看似门槛不高，但要真正做到<u class="text-style-four">精通</u>，需要扎实的功底。以CSS为例，很多人觉得它简单，但实际项目中遇到的布局问题、响应式设计、性能优化等，都需要深入理解CSS的原理。</p>
|
|
|
+ <div class="text-content">
|
|
|
+ <span>"根基不牢，地动山摇。只有把基础打扎实，才能在技术的道路上走得更远"</span>
|
|
|
+ </div>
|
|
|
+ <p>学习过程中，我建议大家<del class="text-style-five">只追求广度</del>，而是要在某个领域<span class="text-style-two">深耕细作</span>。比如你对动画感兴趣，就可以深入研究CSS动画、Canvas、WebGL等相关知识。</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</body>
|
