|
|
@@ -10,22 +10,75 @@
|
|
|
/* body 有默认8px的外边距，需要重置 */
|
|
|
margin: 0;
|
|
|
}
|
|
|
+ h1{
|
|
|
+ margin:0;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ margin:0;
|
|
|
+ }
|
|
|
/* 页面背景色 */
|
|
|
body{
|
|
|
background-color: #FAFAFA;
|
|
|
}
|
|
|
/* 文章容器 */
|
|
|
.container{
|
|
|
- width: 720px;
|
|
|
+ width: 600px;
|
|
|
background-color: #ffffff;
|
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
|
|
- margin:0 auto;
|
|
|
+ margin:50px auto;
|
|
|
+ padding: 50px 60px;
|
|
|
+ }
|
|
|
+ /* 文章标题 */
|
|
|
+ .title{
|
|
|
+ font-size: 36px;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ /* 文章信息 */
|
|
|
+ .articl-info{
|
|
|
+ border-bottom: 1px solid #E5E5E5;
|
|
|
+ padding:20px 0;
|
|
|
+ font-size: 14px;
|
|
|
+
|
|
|
+ }
|
|
|
+ .articl-info .author{
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ .articl-info .time{
|
|
|
+ color: #888;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ .articl-info .category{
|
|
|
+ color: #e74c3c;
|
|
|
+ letter-spacing: 5px;
|
|
|
+ }
|
|
|
+ /* 文章内容 */
|
|
|
+ .content{
|
|
|
+ padding:40px 0;
|
|
|
+ }
|
|
|
+ .content p{
|
|
|
+ line-height: 1.8;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #444;
|
|
|
+ }
|
|
|
+ .content p .text-style-one{
|
|
|
+ font-weight: 700;
|
|
|
+ color: #e74c3c;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="container">
|
|
|
- <h1>文章标题</h1>
|
|
|
+ <h1 class="title">前端工程师的自我修养：持续学习与深度思考</h1>
|
|
|
+ <div class="articl-info">
|
|
|
+ <span class="author">作者：张三</span>
|
|
|
+ <span class="time">2026年5月23日</span>
|
|
|
+ <span class="category">技术博客</span>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <p>在快速发展的前端领域，技术更新迭代速度越来越快。作为一名前端工程师，如何在激烈的竞争中保持核心竞争力？答案很简单：<span class="text-style-one">持续学习</span>与<span class="text-style-one">深度思考</span>。本文将分享我在前端成长道路上的一些经验和思考。</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</body>
|
|
|
</html>
|
