Question

我想用CSS和HTML完成这个布局。

enter image description here

我开始fiddle这是一个开始，但我不知道如何使字体看起来更像目标。

<!DOCTYPE html>   

<html>
<head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <title>Register</title>

    <script src="/scripts/jquery/jquery-1.9.1.js" type="text/javascript"></script>

    <script src="/scripts/application.js" type="text/javascript"></script>
    <link href="/css/style.css" rel="stylesheet" type="text/css">
</head>
<body>

<h3 class="marg-left title"><img src="/images/logga.png"> Account Administration</h3>
<hr />

<a href="/admin/adduser">Add new account</a> <br> <a href="/admin/search">Search account</a> <br> <a href="/admin/search">Export</a> <br> <a href="/admin/search">Import</a> <br>  <a href="/admin/search">Setup</a> <br> <a href="/admin/adminmenu">Log out</a>
</body>
</html>

Answer 1

我创建了一个与您的UI模型紧密匹配的小提琴。遗憾的是，futura不是一个可以自由访问的网页字体，所以我使用的是一种名为Raleway的谷歌字体。

对于侧边栏上的单个按钮链接，我创建了按钮模块，只需根据需要添加或删除它们。希望你觉得它很有用！

<!-- SINGLE BUTTON MODULE -->
<a href="#"><div class="navigation-button">
<div class="navigation-header">Add new account</div>
<div class="navigation-desc">Add new user account</div>
</div></a>

http://jsfiddle.net/HEue6/1/

Answer 2

我不认为 futura 是默认字体。您需要包含要使用的字体。我建议谷歌字体，因为它过去对我很有用，但有很多这样的服务。以下是将其包含在您的页面中的简要说明：

转到此处：

http://www.google.com/fonts
找到你想要的字体（futura不在谷歌，它是外部的）。
点击“添加到收藏集”。
点击页面右下角的“使用”

然后在您的网页（css之前）复制这样的内容：

<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans+SC' rel='stylesheet' type='text/css'>

最后把它放在你的css中：

font-family: 'Alegreya Sans SC', sans-serif;

如何使用CSS和HTML完成此布局？

2 个答案: