Question

我做了一个小的登陆页面，客户希望：“文本，采购和交易，闭路电视安全。想使用过度打击。然后一切都会好起来的。”我在Google搜索过什么，我不得不承认我对该概念有些迷惑，不确定在CSS上如何实现它。

我尝试过的代码在下面的代码段中。预先感谢。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Welcome</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <style>
    footer{
  position: fixed;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height:100px;
  line-height: 10px; /* Vertically center the text there */
  padding-top:10px;
  background-color: #f5f5f5;
  margin-top: 10px;
    }
    .main-buttons {
      width: 400px;
      height: 50px;
      margin: 0  auto;
      text-decoration: line-through;
    }
    span{
      margin-left: 5px;
      margin-top: 5px;
      margin-bottom: 5px;
    }
    .main-container {
      background-image: url('http://wenshin.ltd/wp-content/uploads/2018/07/logisticsworldmap-1024x586.png');
      height: 100vh;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      opacity: 0.9;
      filter: alpha(opacity=90); /* For IE8 and earlier */
    }
    .middle{
      top: 50%;
    }
    .btn-lg {
      box-shadow: 3px 3px #888888;
    }
    h1 {
      text-shadow: 1px 1px #888888;
    }
    .logo {
      width: 50%;
    }
  </style>
</head>
<body class="main-container">
  <div class="container middle">
    <div class="row ">
      <div class="col-md-12 text-center ">
        <div class="intro"> <br> <br>  <br> <br>
          <img src="http://wenshin.ltd/wp-content/uploads/2018/08/WS-01.png" class="img-fluid logo" alt="Logo"> <br> <br>
          <h1 class="">WELCOME TO WENSHIN <br> INDUSTRIAL CO LIMITED</h1>
          <p>
            <a href="http://www.wenshin.ltd/index.php">
                <button class=" main-buttons btn btn-light btn-lg mt-3">Sourcing & Trading</button> 
            </a>
            </p>
            <p>
            <a  href="http://www.cctvcamerahd.com/">
                <button class="main-buttons btn btn-light btn-lg mt-3">CCTV Security</button>
            </a>
          </p>
        </div>
      </div>
    </div>
  </div>
  <footer class="footer">
      <div class="container">
        <span class="text-center"><p><strong>Choose your language:</strong></p></span>
        <span class="text-center"><p><span>English</span>	<span>繁體中文</span>	<span>Español</span>	<span>Português</span> 	<span>Deutsch</span> 	<span>Français</span>	<span>Italiano</span> 	<span>Pусский</span> 	<span>한국어</span> 	<span>日本語</span> 	<span>Nederlands</span> <span>غة العربية 
          </span>	<span>Indonesian</span>
          </p></span>
      </div>
    </footer>
</body>
</html>

我用过：

text-decoration: line-through;

我想知道是不是还是有其他选择。

Answer 1

首先，我要问我的客户他的意思是什么。大多数人说过罢工是指删除线。

您只需将这些按钮添加到CSS中即可。

text-decoration: line-through;

对于过分敲击，这是打字机时代在“键盘”上不在的地方写字母的一种古老技术。真的不再有意义了。

干杯！

如何使用CSS实现改写文字效果？

1 个答案: