一个非常好看的单页,可塑性强

[复制链接]

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?立即注册

×
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>cnlm.net该域名已被西部数码用户抢先注册,如您有兴趣请前往西部数码</title>
  8. <style>
  9.     /* Reset some default browser styles */
  10.     html, body, h1, h2, h3, h4, h5, h6, hr, p, iframe, dl, dt, dd, ul, ol, li, pre, form, button, input, textarea, th, td {
  11.         margin: 0;
  12.         padding: 0;
  13.     }

  14.     body, th, td, button, input, select, textarea {
  15.         font: 14px Verdana,"Microsoft YaHei",Arial;
  16.         -webkit-font-smoothing: antialiased;
  17.         -moz-font-smoothing: antialiased;
  18.         resize: none;
  19.     }

  20.     ul, ol, li, dl {
  21.         list-style-type: none;
  22.     }

  23.     label {
  24.         cursor: pointer;
  25.     }

  26.     fieldset, img {
  27.         border: 0;
  28.     }

  29.     button, h1, h2, h3, h4, h5, h6, input, select, textarea {
  30.         font-size: 100%;
  31.     }

  32.     a {
  33.         text-decoration: none;
  34.         cursor: pointer;
  35.         color: #222;
  36.     }

  37.     a:hover, a:active, a:focus {
  38.         text-decoration: none;
  39.         outline: none;
  40.     }

  41.     img {
  42.         border: 0;
  43.     }

  44.     i {
  45.         display: inline-block;
  46.         font-style: normal;
  47.     }

  48.     i, s, b, em {
  49.         font-weight: normal;
  50.         font-style: normal;
  51.     }

  52.     /* Flex container for centering content */
  53.     .container {
  54.         display: flex;
  55.         flex-direction: column;
  56.         min-height: 100vh;
  57.     }

  58.     .westgrab_head {
  59.         height: 80px;
  60.         background: #000;
  61.         line-height: 80px;
  62.         text-align: center;
  63.         position: sticky;
  64.         top: 0;
  65.         z-index: 1000;
  66.     }

  67.     .westgrab_head img {
  68.         width: 125px;
  69.         vertical-align: middle;
  70.     }

  71.     .westgrab_head span {
  72.         color: rgba(255, 255, 225, 1.0);
  73.         font-size: 18px;
  74.     }

  75.     .main-content {
  76.         flex: 1;
  77.         display: flex;
  78.         justify-content: center;
  79.         align-items: center;
  80.         text-align: center;
  81.         background: url(logo_bg.png) no-repeat center 46px;
  82.         background-size: 508px;
  83.         padding: 0 20px;
  84.     }

  85.     .content {
  86.         max-width: 1200px;
  87.     }

  88.     .content h1{
  89.         margin-bottom: 40px;
  90.         font-size: 60px;
  91.         color: #037CFF;
  92.     }

  93.     .content .p1{
  94.         font-size: 24px;
  95.         color: #181C29;
  96.     }

  97.     .content .p2{
  98.         margin-top: 20px;
  99.         margin-bottom: 50px;
  100.         font-size: 16px;
  101.         color: #181C29;
  102.     }

  103.     .content .b1, .content .b2 {
  104.         display: block;
  105.         width: 250px;
  106.         height: 60px;
  107.         background: #037CFF url(next.png) 200px no-repeat;
  108.         background-size: 22px 24px ;
  109.         border-radius: 8px;
  110.         margin: 0 auto 10px;
  111.         color: #fff;
  112.         font-size: 20px;
  113.         text-align: left;
  114.         text-indent: 59px;
  115.         line-height: 60px;
  116.         transition: all .3s;
  117.     }

  118.     .content .b2 {
  119.         width: 300px;
  120.         background-position: 260px center;
  121.     }

  122.     .footer {
  123.         text-align: center;
  124.         padding: 10px 0;
  125.         color: #666;
  126.     }

  127.     .p1 span {
  128.         color: #c81e1e;
  129.     }

  130.     .p1 span a {
  131.         color: #037CFF;
  132.     }
  133. </style>
  134. </head>
  135. <body>
  136. <div class="container">
  137.     <div class="westgrab_head">
  138.         <a href="https://www.west.cn/"><img src="./index_files/logo.png" alt="west.cn"></a>
  139.         <a href="https://www.west.cn/news/list.asp?newsid=942"> <span>到西部数码抢注过期域名,金牌客户返点60%</span></a>
  140.     </div>
  141.     <div class="main-content">
  142.         <div class="content">
  143.             <h1>cnlm.net</h1>
  144.             <p class="p1">该域名已被 <span>西部数码用户</span> 抢先注册,如您有兴趣购买此 <span><a href="https://www.west.cn/services/domain">域名</a></span> 请前往 <span><a href="https://www.west.cn/">西部数码</a></span> 委托代购!</p>
  145.             <p class="p2">This domain name has been dropcatch by west.cn, if you are interested please go to west.cn!</p>
  146.             <a class="b1" href="https://www.west.cn/jiaoyi/broker.asp">前往西部数码</a>
  147.             <a class="b2" href="https://www.west.cn/services/paimai/expire.asp">挑选下其他过期域名</a>
  148.         </div>
  149.     </div>
  150.     <div class="footer">
  151.         版权所有 © 2024 西部数码有限公司
  152.     </div>
  153. </div>
  154. </body>
  155. </html>
复制代码

一个非常好看的单页,可塑性强

一个非常好看的单页,可塑性强
全部回复0 显示全部楼层
暂无回复,精彩从你开始!

快速回帖

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于楼主

超级版主
  • 主题

    592
  • 回答

    194
  • 积分

    1770
虚位以待,此位置招租

商务推广

    网盘拉新-短剧推广 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租