网页文案单代码

屿风

Miller Design

Without a Grid没有信号

Today · 星期二

Good morning.

今日心情如何

想问问大家，今天心情怎么样？ 不用强行说开心，也不必勉强掩饰低落。可以是平淡无波，忙忙碌碌，没有大喜大悲；也可以是被小事治愈，或是藏着一点说不出的烦闷。 不必编造漂亮的情绪，如实说说就好。今天心情怎么样，愿意的话，在这里分享你的片刻感受。

Continue Skip for now

屿风

1. <style>
   
2. .wrap {
   
3.     box-sizing: border-box;
   
4.     max-width: 1100px;
   
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://你的顶部底图地址.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://你的头像地址.jpg') center/cover no-repeat;
    
30.     border:4px solid #e8e4dd;
    
31. }
    
32. 
    
33. /* 单栏文案，支持手动回车换行 + 自动容器换行 */
    
34. .single-text{
    
35.     margin-bottom:30px;
    
36.     word-wrap: break-word;
    
37.     overflow-wrap: break-word;
    
38. }
    
39. .single-text h3{
    
40.     font-size:26px;
    
41.     font-weight:700;
    
42.     color:#222;
    
43.     margin:0 0 12px;
    
44.     word-wrap: break-word;
    
45. }
    
46. .single-text p{
    
47.     font-size:16px;
    
48.     color:#555;
    
49.     line-height:1.6;
    
50.     margin:0;
    
51.     word-wrap: break-word;
    
52.     overflow-wrap: break-word;
    
53.     white-space: pre-line; /* 关键：识别你手动敲的回车换行，同时容器变窄自动换行 */
    
54. }
    
55. 
    
56. .btns{display:flex;align-items:center;gap:24px;}
    
57. .btn-go{
    
58.     display:inline-block;padding:18px 40px;background:#111;color:#fff!important;
    
59.     font-size:20px;font-weight:600;text-decoration:none!important;border-radius:2px;
    
60. }
    
61. .btn-skip{font-size:20px;font-weight:600;color:#333;cursor:default;}
    
62. 
    
63. @media(max-width:768px){
    
64.     .wrap{
    
65.         padding:20px;
    
66.     }
    
67.     .single-text h3{
    
68.         font-size:22px;
    
69.     }
    
70.     .single-text p{
    
71.         font-size:15px;
    
72.     }
    
73.     .banner{height:220px;}
    
74.     .banner .avatar{width:80px;height:80px;right:20px;top:20px;}
    
75. }
    
76. </style>
    
77. <div class="wrap">
    
78.     <div class="topbar">
    
79.         <div class="left">Miller Design</div>
    
80.         <div class="right"><span>Without a Grid</span><span>没有信号</span></div>
    
81.     </div>
    
82.     <div class="meta">Today · 星期二</div>
    
83.     <h1 style="font-size:52px; font-weight:800; line-height:1.1; margin:0 0 30px;">Good morning.</h1>
    
84. 
    
85.     <div class="banner">
    
86.         <div class="bg"></div>
    
87.         <div class="avatar"></div>
    
88.     </div>
    
89. 
    
90.     <div class="single-text">
    
91.         <h3>清晨设计灵感</h3>
    
92.         <p>每天精选一组极简排版、配色与布局思路
    
93. 帮助你快速建立清爽的页面视觉。</p>
    
94.     </div>
    
95. 
    
96.     <div class="btns">
    
97.         <a href="https://你的Continue跳转地址" class="btn-go" target="_blank">Continue</a>
    
98.         <span class="btn-skip">Skip for now</span>
    
99.     </div>
    
100. </div>
     

复制代码