网页文案双代码 - QQMCC论坛 - Powered by Discuz! Archiver

论坛 › 表格设计院 › 网页文案双代码

屿风发表于 2026-10-11 19:55:27

网页文案双代码

<style>
.wrap {
box-sizing: border-box;
max-width: 1000px;
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/06/140632qf0csc088qxjosbr.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/06/140633tzfefw8kk1uixxis.jpg.thumb.jpg') center/cover no-repeat;
border:4px solid #e8e4dd;
}

/* 两栏均分，文字自动高度对齐，无卡片底色 */
.two-col{
display:grid;
grid-template-columns: 1fr 1fr;
gap:24px;
margin-bottom:30px;
}
.col-item{
display:flex;
flex-direction:column;
justify-content:flex-start;
}
.col-item h3{
font-size:20px;
font-weight:700;
color:#222;
margin:0 0 12px;
}
.col-item p{
font-size:15px;
color:#555;
line-height:1.6;
margin:0;
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){
.two-col{grid-template-columns:1fr;}
.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="two-col">
   <div class="col-item">
         <h3>今日聊点什么</h3>
         <p>话题库暂时清空，今天不设主题。
不想聊宏大的道理，也不讨论是非对错，只是单纯找个地方闲谈。
你可以分享最近的心情、看过的影视剧、喜欢的歌，吐槽遇到的小麻烦，或是抛出一个莫名其妙的疑问。</p>
   </div>
   <div class="col-item">
         <h3>今日心情如何</h3>
         <p>日子藏着细碎的情绪，想轻声一问：今天心情怎么样？
或许是微风带来的松弛，或许是琐事堆积的疲惫。
不必强求永远保持乐观，允许情绪起伏，允许自己普通。愿意的话，说说此刻的心境。</p>
   </div>
</div>

<div class="btns">
   <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>
   <span class="btn-skip">Skip for now</span>
</div>
</div>

屿风发表于 2026-10-11 20:11:24

<style>
.wrap {
box-sizing: border-box;
max-width: 1000px;
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/06/140632qf0csc088qxjosbr.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/06/140633tzfefw8kk1uixxis.jpg.thumb.jpg') center/cover no-repeat;
border:4px solid #e8e4dd;
}

/* 两栏均分，文字自动高度对齐，无卡片底色 */
.two-col{
display:grid;
grid-template-columns: 1fr 1fr;
gap:24px;
margin-bottom:30px;
}
.col-item{
display:flex;
flex-direction:column;
justify-content:flex-start;
}
.col-item h3{
font-size:20px;
font-weight:700;
color:#222;
margin:0 0 12px;
}
.col-item p{
font-size:15px;
color:#555;
line-height:1.6;
margin:0;
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){
.two-col{grid-template-columns:1fr;}
.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="two-col">
   <div class="col-item">
         <h3>今日聊点什么</h3>
         <p>话题库暂时清空，今天不设主题。
不想聊宏大的道理，也不讨论是非对错，
只是单纯找个地方闲谈。
你可以分享最近的心情、看过的影视剧、喜欢的歌，
吐槽遇到的小麻烦，或是抛出一个莫名其妙的疑问。</p>
   </div>
   <div class="col-item">
         <h3>今日心情如何</h3>
         <p>日子藏着细碎的情绪，想轻声一问：今天心情怎么样？
或许是微风带来的松弛，或许是琐事堆积的疲惫。
不必强求永远保持乐观，允许情绪起伏，允许自己普通。
愿意的话，说说此刻的心境。</p>
   </div>
</div>

<div class="btns">
   <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>
   <span class="btn-skip">Skip for now</span>
</div>
</div>

页: [1]

查看完整版本: 网页文案双代码