屿风 发表于 2026-10-11 20:44:08

网页文案单代码

<style>
.wrap {
    box-sizing: border-box;
    max-width: 1100px;
    margin: 0 auto;
    padding:30px;
    background:#f6f2eb;
    font-family:system-ui,sans-serif;
    color:#222;
}
.topbar{
    display:flex;justify-content:space-between;align-items:center;
    padding-bottom:12px;border-bottom:2px solid #222;margin-bottom:40px;
}
.topbar .left{font-size:24px;font-weight:700;}
.topbar .right{font-size:16px;color:#444;display:flex;gap:40px;}
.meta{font-size:18px;color:#555;margin-bottom:12px;}

.banner{
    width:100%;height:320px;position:relative;overflow:hidden;border-radius:2px;margin-bottom:24px;
}
.banner .bg{
    position:absolute;left:0;top:0;width:100%;height:100%;
    background:url('https://www.qqmcc.net/data/attachment/forum/202610/09/131415upmrbzxpxlqlbllq.jpg.thumb.jpg') center/cover no-repeat;
    filter:blur(6px);transform:scale(1.04);
}
.banner .avatar{
    width:120px;height:120px;border-radius:50%;position:absolute;right:40px;top:40px;z-index:2;
    background:url('https://www.qqmcc.net/data/attachment/forum/202610/09/131415upmrbzxpxlqlbllq.jpg.thumb.jpg') center/cover no-repeat;
    border:4px solid #e8e4dd;
}

/* 单栏文案，支持手动回车换行 + 自动容器换行 */
.single-text{
    margin-bottom:30px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.single-text h3{
    font-size:26px;
    font-weight:700;
    color:#222;
    margin:0 0 12px;
    word-wrap: break-word;
}
.single-text p{
    font-size:16px;
    color:#555;
    line-height:1.6;
    margin:0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-line; /* 关键：识别你手动敲的回车换行，同时容器变窄自动换行 */
}

.btns{display:flex;align-items:center;gap:24px;}
.btn-go{
    display:inline-block;padding:18px 40px;background:#111;color:#fff!important;
    font-size:20px;font-weight:600;text-decoration:none!important;border-radius:2px;
}
.btn-skip{font-size:20px;font-weight:600;color:#333;cursor:default;}

@media(max-width:768px){
    .wrap{
      padding:20px;
    }
    .single-text h3{
      font-size:22px;
    }
    .single-text p{
      font-size:15px;
    }
    .banner{height:220px;}
    .banner .avatar{width:80px;height:80px;right:20px;top:20px;}
}
</style>
<div class="wrap">
    <div class="topbar">
      <div class="left">Miller Design</div>
      <div class="right"><span>Without a Grid</span><span>没有信号</span></div>
    </div>
    <div class="meta">Today · 星期二</div>
    <h1 style="font-size:52px; font-weight:800; line-height:1.1; margin:0 0 30px;">Good morning.</h1>

    <div class="banner">
      <div class="bg"></div>
      <div class="avatar"></div>
    </div>

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

    <div class="btns">
      <a href="https://你的Continue跳转地址" class="btn-go" target="_blank">Continue</a>
      <span class="btn-skip">Skip for now</span>
    </div>
</div>

屿风 发表于 2026-10-11 20:44:26

<style>
.wrap {
    box-sizing: border-box;
    max-width: 1100px;
    margin: 0 auto;
    padding:30px;
    background:#f6f2eb;
    font-family:system-ui,sans-serif;
    color:#222;
}
.topbar{
    display:flex;justify-content:space-between;align-items:center;
    padding-bottom:12px;border-bottom:2px solid #222;margin-bottom:40px;
}
.topbar .left{font-size:24px;font-weight:700;}
.topbar .right{font-size:16px;color:#444;display:flex;gap:40px;}
.meta{font-size:18px;color:#555;margin-bottom:12px;}

.banner{
    width:100%;height:320px;position:relative;overflow:hidden;border-radius:2px;margin-bottom:24px;
}
.banner .bg{
    position:absolute;left:0;top:0;width:100%;height:100%;
    background:url('https://你的顶部底图地址.jpg') center/cover no-repeat;
    filter:blur(6px);transform:scale(1.04);
}
.banner .avatar{
    width:120px;height:120px;border-radius:50%;position:absolute;right:40px;top:40px;z-index:2;
    background:url('https://你的头像地址.jpg') center/cover no-repeat;
    border:4px solid #e8e4dd;
}

/* 单栏文案，支持手动回车换行 + 自动容器换行 */
.single-text{
    margin-bottom:30px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.single-text h3{
    font-size:26px;
    font-weight:700;
    color:#222;
    margin:0 0 12px;
    word-wrap: break-word;
}
.single-text p{
    font-size:16px;
    color:#555;
    line-height:1.6;
    margin:0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-line; /* 关键：识别你手动敲的回车换行，同时容器变窄自动换行 */
}

.btns{display:flex;align-items:center;gap:24px;}
.btn-go{
    display:inline-block;padding:18px 40px;background:#111;color:#fff!important;
    font-size:20px;font-weight:600;text-decoration:none!important;border-radius:2px;
}
.btn-skip{font-size:20px;font-weight:600;color:#333;cursor:default;}

@media(max-width:768px){
    .wrap{
      padding:20px;
    }
    .single-text h3{
      font-size:22px;
    }
    .single-text p{
      font-size:15px;
    }
    .banner{height:220px;}
    .banner .avatar{width:80px;height:80px;right:20px;top:20px;}
}
</style>
<div class="wrap">
    <div class="topbar">
      <div class="left">Miller Design</div>
      <div class="right"><span>Without a Grid</span><span>没有信号</span></div>
    </div>
    <div class="meta">Today · 星期二</div>
    <h1 style="font-size:52px; font-weight:800; line-height:1.1; margin:0 0 30px;">Good morning.</h1>

    <div class="banner">
      <div class="bg"></div>
      <div class="avatar"></div>
    </div>

    <div class="single-text">
      <h3>清晨设计灵感</h3>
      <p>每天精选一组极简排版、配色与布局思路
帮助你快速建立清爽的页面视觉。</p>
    </div>

    <div class="btns">
      <a href="https://你的Continue跳转地址" class="btn-go" target="_blank">Continue</a>
      <span class="btn-skip">Skip for now</span>
    </div>
</div>
页: [1]
查看完整版本: 网页文案单代码