css Vivaldi通讯代码，用于演示网页设计。

Posted 2021-05-13

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css Vivaldi通讯代码，用于演示网页设计。相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="UTF-8">
    <title>Vivaldi Newsletter</title>
	<link rel="stylesheet" type="text/css" href="vivaldi-newsletter.css">
</head>
<body>

<div id="signup">
    <form>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31 24" height="24" width="31">
          <g fill-rule="evenodd" fill="#EF3939">
            <path d="M15.5 2.26L29 9.684v12.34H2V9.686L15.5 2.26m0-2.26L0 8.526V24h31V8.526L15.5 0"/>
            <path d="M20.442 16.07l8.056-6.304L27.86 9l-8.272 6.47-4.27-2.998-4.296 3.01L2.736 9l-.64.766 8.07 6.314L0 23.2l.596.8 14.722-10.31L30 24l-.032-1.24-9.526-6.69"/>
          </g>
        </svg>
         
        <span>Subscribe to our newsletter:</span>
        <input type="email" placeholder="Enter your email address">
        <input type="submit" value="Send">
    </form>
</div>

</body>
</html>

body {
  font: 300 16px/1.4 "Helvetica Neue","Segoe UI","Ubuntu","Arial",sans-serif;
}

#signup {
  border-top: 1px dotted rgba(0, 0, 0, 0.1);
  border-bottom: 1px dotted rgba(0, 0, 0, 0.1);
  margin-top: 30px;
  margin-bottom: 30px;
  padding-top: 30px;
  padding-bottom: 30px;
  text-align: center;
  width: 100%;
  font-size: .75em;
  color: #666;
}

#signup form svg {
  margin-right: 16px;
  vertical-align: middle;
}

#signup form span {
  font-weight: 700;
  margin-right: 12px;
}

#signup form input[type="email"] {
  background-color: #f6f6f6;
  border: 0 none;
  box-sizing: border-box;
  height: 31px;
  margin: 0;
  outline: 0 none;
  padding-left: 8px;
  width: 250px;
  font-size: 0.8rem;
  color: #666;
  letter-spacing: 0.045em;
}

form input[type="email"]:focus {
  background-color: white;
  color: rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 0 2px #00caa7 inset;
}

form input[type="submit"] {
  background-color: #00caa7;
  border: 0 none;
  color: #fff;
  font-weight: 600;
  height: 31px;
  margin: 0;
  padding: 7px 14px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 50ms ease 0s, box-shadow 50ms ease 0s;
  vertical-align: top;
}

以上是关于css Vivaldi通讯代码，用于演示网页设计。的主要内容，如果未能解决你的问题，请参考以下文章

如何将开发者工具停靠在 Vivaldi 网页浏览器中？

使 Firefox 和 Vivaldi 只在新标签页显示书签栏

css CSS用于时事通讯小部件区域。

I2c通讯介绍及代码演示

css 用于CSS链接演示的嵌入式CSS