响应式网页设计 - 模板

W3.CSS 网站模板

我们已经用 W3.CSS 框架创建了一些响应模板。

您可以在所有项目中自由修改、保存、共享和使用它们。

艺术模板

代码如下：

<!DOCTYPE html>
<html>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/example/css3/ms.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" type="text/css">
<style>
body {font-family: "Raleway", Arial, sans-serif}
.ms-row img {margin-bottom: -8px}
</style>
<body>
<!-- !PAGE CONTENT! -->
<div class="ms-content" style="max-width:1500px">
  <!-- Header -->
  <header class="ms-container ms-xlarge ms-padding-24">
    <a href="#" class="ms-left ms-button ms-white">MY ART</a>
    <a href="#about" class="ms-right ms-button ms-white">About</a>
  </header>
  <!-- Photo Grid -->
  <div class="ms-row">
    <div class="ms-half">
      <img src="/images/streetart.jpg" style="width:100%">
      <img src="/images/streetart2.jpg" style="width:100%">
      <img src="/images/streetart5.jpg" style="width:100%">
    </div>
    <div class="ms-half">
      <img src="/images/streetart3.jpg" style="width:100%">
      <img src="/images/streetart4.jpg" style="width:100%">
    </div>
  </div>
<!-- End Page Content -->
</div>
<!-- Footer / About Section -->
<footer class="ms-light-grey ms-padding-64 ms-center" id="about">
  <h2>About</h2>
  <img src="/images/boy.jpg" class="ms-image ms-padding-32" width="300" height="300">
  <form style="margin:auto;width:60%" action="/example/html/action_page.aspx" target="_blank">
    <p>Just me, myself and I, exploring the universe of unknownment. I have a heart of love and an interest of lorem ipsum and mauris neque quam blog. I want to share my world with you. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
    <p class="ms-large ms-text-pink">Do not hesitate to contact me!</p>
    <div class="ms-section">
      <label><b>Name</b></label>
      <input class="ms-input ms-border" type="text" required name="Name">
    </div>
    <div class="ms-section">
      <label><b>Email</b></label>
      <input class="ms-input ms-border" type="text" required name="Email">
    </div>
    <div class="ms-section">
      <label><b>Message</b></label>
      <input class="ms-input ms-border" required name="Message">
    </div>
    <button type="submit" class="ms-button ms-block ms-dark-grey">Send</button>
  </form>
</footer>

运行一下

响应式网页设计 - 模板

W3.CSS 网站模板

艺术模板

分类导航