网页文案双代码

屿风

Miller Design

Without a Grid没有信号

Today · 星期二

Good morning.

今日聊点什么

话题库暂时清空，今天不设主题。 不想聊宏大的道理，也不讨论是非对错，只是单纯找个地方闲谈。 你可以分享最近的心情、看过的影视剧、喜欢的歌，吐槽遇到的小麻烦，或是抛出一个莫名其妙的疑问。

今日心情如何

日子藏着细碎的情绪，想轻声一问：今天心情怎么样？ 或许是微风带来的松弛，或许是琐事堆积的疲惫。 不必强求永远保持乐观，允许情绪起伏，允许自己普通。愿意的话，说说此刻的心境。

Continue Skip for now

屿风

1. <style>
   
2. .wrap {
   
3.     box-sizing: border-box;
   
4.     max-width: 1000px;
   
5.     margin: 0 auto;
   
6.     padding:30px;
   
7.     background:#f6f2eb;
   
8.     font-family:system-ui,sans-serif;
   
9.     color:#222;
   
10. }
    
11. .topbar{
    
12.     display:flex;justify-content:space-between;align-items:center;
    
13.     padding-bottom:12px;border-bottom:2px solid #222;margin-bottom:40px;
    
14. }
    
15. .topbar .left{font-size:24px;font-weight:700;}
    
16. .topbar .right{font-size:16px;color:#444;display:flex;gap:40px;}
    
17. .meta{font-size:18px;color:#555;margin-bottom:12px;}
    
18. 
    
19. .banner{
    
20.     width:100%;height:320px;position:relative;overflow:hidden;border-radius:2px;margin-bottom:24px;
    
21. }
    
22. .banner .bg{
    
23.     position:absolute;left:0;top:0;width:100%;height:100%;
    
24.     background:url('https://www.qqmcc.net/data/attachment/forum/202610/06/140632qf0csc088qxjosbr.jpg.thumb.jpg') center/cover no-repeat;
    
25.     filter:blur(6px);transform:scale(1.04);
    
26. }
    
27. .banner .avatar{
    
28.     width:120px;height:120px;border-radius:50%;position:absolute;right:40px;top:40px;z-index:2;
    
29.     background:url('https://www.qqmcc.net/data/attachment/forum/202610/06/140633tzfefw8kk1uixxis.jpg.thumb.jpg') center/cover no-repeat;
    
30.     border:4px solid #e8e4dd;
    
31. }
    
32. 
    
33. /* 两栏均分，文字自动高度对齐，无卡片底色 */
    
34. .two-col{
    
35.     display:grid;
    
36.     grid-template-columns: 1fr 1fr;
    
37.     gap:24px;
    
38.     margin-bottom:30px;
    
39. }
    
40. .col-item{
    
41.     display:flex;
    
42.     flex-direction:column;
    
43.     justify-content:flex-start;
    
44. }
    
45. .col-item h3{
    
46.     font-size:20px;
    
47.     font-weight:700;
    
48.     color:#222;
    
49.     margin:0 0 12px;
    
50. }
    
51. .col-item p{
    
52.     font-size:15px;
    
53.     color:#555;
    
54.     line-height:1.6;
    
55.     margin:0;
    
56.     white-space: pre-line; /* 核心：识别手动回车 + 自适应自动换行 */
    
57. }
    
58. 
    
59. .btns{display:flex;align-items:center;gap:24px;}
    
60. .btn-go{
    
61.     display:inline-block;padding:18px 40px;background:#111;color:#fff!important;
    
62.     font-size:20px;font-weight:600;text-decoration:none!important;border-radius:2px;
    
63. }
    
64. .btn-skip{font-size:20px;font-weight:600;color:#333;cursor:default;}
    
65. 
    
66. @media(max-width:768px){
    
67.     .two-col{grid-template-columns:1fr;}
    
68.     .banner{height:220px;}
    
69.     .banner .avatar{width:80px;height:80px;right:20px;top:20px;}
    
70. }
    
71. </style>
    
72. <div class="wrap">
    
73.     <div class="topbar">
    
74.         <div class="left">Miller Design</div>
    
75.         <div class="right"><span>Without a Grid</span><span>没有信号</span></div>
    
76.     </div>
    
77.     <div class="meta">Today · 星期二</div>
    
78.     <h1 style="font-size:52px; font-weight:800; line-height:1.1; margin:0 0 30px;">Good morning.</h1>
    
79. 
    
80.     <div class="banner">
    
81.         <div class="bg"></div>
    
82.         <div class="avatar"></div>
    
83.     </div>
    
84. 
    
85.     <!-- 左右均分两栏文案 -->
    
86.     <div class="two-col">
    
87.         <div class="col-item">
    
88.             <h3>今日聊点什么</h3>
    
89.             <p>话题库暂时清空，今天不设主题。
    
90. 不想聊宏大的道理，也不讨论是非对错，
    
91. 只是单纯找个地方闲谈。
    
92. 你可以分享最近的心情、看过的影视剧、喜欢的歌，
    
93. 吐槽遇到的小麻烦，或是抛出一个莫名其妙的疑问。</p>
    
94.         </div>
    
95.         <div class="col-item">
    
96.             <h3>今日心情如何</h3>
    
97.             <p>日子藏着细碎的情绪，想轻声一问：今天心情怎么样？
    
98. 或许是微风带来的松弛，或许是琐事堆积的疲惫。
    
99. 不必强求永远保持乐观，允许情绪起伏，允许自己普通。
    
100. 愿意的话，说说此刻的心境。</p>
     
101.         </div>
     
102.     </div>
     
103. 
     
104.     <div class="btns">
     
105.         <a href="https://www.qqmcc.net/home.php?mod=space&uid=3&do=thread&view=me&from=space" class="btn-go" target="_blank">Continue</a>
     
106.         <span class="btn-skip">Skip for now</span>
     
107.     </div>
     
108. </div>
     

复制代码