如何用 CSS 创建笔记本设计 | CSS-Tricks

来自 Chris： 嘿，各位！今天是一篇来自 14 岁开发者 Allen Lawson 的客座文章。我注意到越来越多的年轻人参与到 web 社区，我觉得这很棒，我想尽我所能鼓励他们。

本教程将向您展示如何仅使用 CSS 创建一个笔记本主题网站。

首先，我们将通过创建基本的包装器开始，指定 body 标签应具有以下 CSS 属性

body {
  background-color: #f5f5f5;
  width: 600px;
  margin: 0 auto;
  padding: 0;
}

接下来，我们将创建一个无序列表，我将其命名为 list

.list {
  color: #555;
  font-size: 22px;
  padding: 0 !important;
  width: 500px;
  font-family: courier, monospace;
  border: 1px solid #dedede;
}

添加 padding:0; 的原因是，在教程的后面，当我们添加红色笔记本线条时，事情会变得乱七八糟。宽度可以指定为任何你想要的值；我只是使用了 600px，因为它最合适。另一个关键属性是边框。这使它看起来干净整洁。

接下来，我们对 li 进行样式设置

.list li {
  list-style: none;
  border-bottom: 1px dotted #ccc;
  text-indent: 25px;
  height: auto;
  padding: 10px;
  text-transform: capitalize;
}

这几乎是不言自明的。确保添加 border-bottom: 1px dotted #ccc;。对我来说，这确实赋予了它“笔记本纸”主题。

如果您愿意，您可以在 li 上使用伪类 :hover，使其看起来更干净。谁不喜欢一个好的悬停效果呢？

.list li:hover {
  background-color: #f0f0f0;
  -webkit-transition: all 0.2s;
  -moz-transition:    all 0.2s;
  -ms-transition:     all 0.2s;
  -o-transition:      all 0.2s;
}

以下是我们到目前为止的 HTML

<!DOCTYPE HTML>
<html> 

<head>
   <meta charset="UTF-8">
   <title>CSS Theme: Notepad</title>
   <link rel="stylesheet" href="style.css">
</head>

<body>

  <h4>Notes</h4>

  <ul id="List">
    <li>Eat Breakfeast</li>
    <li>Feed Pugsly, the cow</li>
    <li>Sit Down</li>
    <li>Eat lunch</li>
    <li>Call mom</li>
    <li>Tweet about feeding my cow, pugsly</li>
    <li>Join a hangout in google+</li>
    <li>Prepare Dinner</li>
    <li>Eat Dinner</li>
    <li>Get ready for bed</li>
    <li>Go to bed</li>
  </ul>

</body>

</html>

最后，我们将添加垂直红色线条

.lines {
  border-left: 1px solid #ffaa9f;
  border-right: 1px solid #ffaa9f;
  width: 2px;
  float: left;
  height: 495px;
  margin-left: 40px;
}

这可能是本教程中最漂亮的东西，但也是我最讨厌的东西，因为我无法让它在添加新列表项时自动调整大小。所以每次添加新的 li 时，您都必须增加红色线条的高度 - 这非常令人头疼。除此之外，确保您指定 width 为 2px，否则它将只是一条线。

最后一点，您必须为列表项添加 text-indent 为 25px，这样文本就不会直接在红色线条旁边呈现。

准备添加红色线条后，将此代码插入在 <ul> 之前。

<div class="lines"></div>

您的最终 CSS 将如下所示

body {
  background-color: #f5f5f5;
  width: 600px;
  margin: 0 auto;
  padding: 0;
}
h4 {
  color: #cd0000;
  font-size: 42px;
  letter-spacing: -2px;
  text-align: left;
}
.list {
  color: #555;
  font-size: 22px;
  padding: 0 !important;
  width: 500px;
  font-family: courier, monospace;
  border: 1px solid #dedede;
}
.list li {
  list-style: none;
  border-bottom: 1px dotted #ccc;
  text-indent: 25px;
  height: auto;
  padding: 10px;
  text-transform: capitalize;
}
.list li:hover {
  background-color: #f0f0f0;
  -webkit-transition: all 0.2s;
  -moz-transition:    all 0.2s;
  -ms-transition:     all 0.2s;
  -o-transition:      all 0.2s;
}
.lines {
  border-left: 1px solid #ffaa9f;
  border-right: 1px solid #ffaa9f;
  width: 2px;
  float: left;
  height: 495px;
  margin-left: 40px;
}

以下是完成主题的演示

查看演示

来自 Chris：再次感谢 Allen Lawson！本文可能有一些地方可以做得更好或不同，因此让我们在评论中进行建设性的讨论并使其变得更好。

Enrique Moreno

# 2012 年 2 月 23 日

做得很好，Allen。保持良好的工作！

Miles Baltrusaitis

# 2012 年 2 月 23 日

这正是我在 1998 年开始设计网站之前想象的东西。然后，我意识到这有多么困难。

感谢您让它看起来如此简单！

Anton Simonov

# 2012 年 2 月 23 日

在这种情况下，text-indent 是一个不好的解决方案。在长而多行的文本中，文本将粘贴到红色线条。左侧的填充，加上左边缘和填充的总和，将解决这个问题。

Conor Haining

# 2012 年 2 月 23 日

14 岁？我以为只有我这样！

Jamie L.

评论永久链接# 2012 年 2 月 23 日

我也是！
pie

评论永久链接# 2012 年 2 月 23 日

我也是
Kevin G

评论永久链接# 2012 年 2 月 23 日

有人应该为对 web 开发感兴趣的青少年创建一个网站，让他们可以一起做一些随机的事情 :)
Enrique de Larrazabal

评论永久链接# 2012 年 2 月 24 日

所以我不是唯一一个？
Chris Frees

评论永久链接# 2012 年 2 月 24 日

我 15 岁！
Conor Haining

评论永久链接# 2012 年 2 月 25 日

所以，我肯定不是唯一一个。
Druid of Lûhn

评论永久链接# 2012 年 2 月 25 日

我们有很多！
Ian

评论永久链接# 2012 年 2 月 26 日

哇！我还以为只有我这个年龄的 CSS 开发人员。 @kevin：同意
David

评论永久链接# 2012 年 2 月 27 日

我在大约 15 岁的时候也开始了前端设计/开发，信不信由你，我已经做了 10 多年了！很高兴听到年轻人仍然积极参与前端开发。作为一名前端开发者，你可以赚很多钱，而且，它很有趣！祝大家在该领域好运。
Conor Organ

评论永久链接# 2012 年 2 月 27 日

尽量不要在类和 id 中添加句子大小写字母，这使得在 Linux 服务器上更容易工作 :D

顺便说一句，我 15 岁了，所以我们真的应该开始那个博客。我可能会在完成一些客户工作后尽快开始
Ryan G

评论永久链接# 2012 年 2 月 28 日

是啊，我 17 岁了，已经做了 5 年的 web 开发了。如果有人想开始那个博客，我一定会参与的。我之前创建过自己的博客，但我讨厌它的设计，所以我希望成为更大项目的一部分。
Ian

评论永久链接# 2012 年 2 月 29 日

@Ryan：开始吧！我完成之后会发布。
Alex Forey

评论永久链接# 2012 年 3 月 5 日

很高兴看到这么多和我年龄一样的人在做我感兴趣的事情。如果有人感兴趣，我的网站是 alexforey.com，它是我自己从头开始编写的。

总之，我只想说声感谢，这种内容在当今的网络上非常重要，感谢 CSS-Tricks 让这一切成为可能。
Ryan G

评论永久链接# 2012 年 3 月 5 日

@Ian：好的，告诉我你有什么想法。我也正在和我的朋友一起制作一个版本。让我们看看谁赢得了比赛 ;)
Tom Pointon

评论永久链接# 2012 年 4 月 12 日

有人知道那个博客真的做出来了？ :)
Julian Cizmic

评论永久链接# 2012 年 4 月 22 日

我只有 13 岁，但我从 9 岁就开始学习了。

Matt Zimmermann

# 2012 年 2 月 23 日

Allen，很棒的教程，感谢您的分享。

@Miles，我完全理解你的意思…我也想要一样的东西。

Tanner Nelson

# 2012 年 2 月 23 日

哇，三年前我肯定没有这么厉害！哈哈。

向你致敬，Allen 先生。

我想到一个想法，就是写 .list::before 而不是 .lines。这样我们就不用在那里添加额外的元素了。只要在 css 中添加另一个参数 content:''; 就可以了。

cnwtx

评论永久链接# 2012 年 2 月 24 日

然后您可以将 .list 设置为 position:relative，将 :before 设置为 height:100%；现在您不必担心每次添加或删除列表项时更改 .lines 的高度了。

而且，我只有 16 岁，我还以为只有我这样...

Shane Hudson

# 2012 年 2 月 23 日

非常好的文章，我喜欢结果。我想在这里感谢 Chris... 我很早就开始做 Web 开发，我唯一记得经常访问的博客是 Eric Meyer 的博客，所以很高兴看到你在这里做的所有事情不仅在帮助其他年轻开发者（好吧，我现在 18 岁了，所以不算太年轻了！），而且还给他们一个在这里发布文章的机会。

我能看到几种不同的实现方法，你认为哪种方法更好？

我建议，对于红色线条，使用 4px 双线可能效果很好。

Chris Coyier

# 2012 年 2 月 23 日

我以为我会自己尝试一些更新 =)

http://jsfiddle.net/chriscoyier/KVjFQ/42/

差异

– 没有固定宽度，只需让笔记本填充可用空间，周围有填充。
– 使所有列表项都为单行，并使用省略号隐藏溢出。只是一个设计选择。移除 text-indent 绝对是最好的方法。如果需要换行，请使用填充，使它们在左侧保持对齐。
– 红色线条是一个伪元素，这意味着更少的无用标记，并且可以拉伸到高度，因此不需要手动调整。
– 阴影用于深度。

我可以看到，这是一个有趣、以开发者为中心的扩展，可以将 contenteditable 属性添加到列表项，并将更改保存到数据库中。

再次感谢 Allen！

Joe Savage

评论永久链接# 2012 年 2 月 24 日

如果有一种简单的方法可以使所有列表点都有一个“title”属性，其值为其内容，这样悬停在过长的点上就会显示其完整内容，那就太好了。
Scott

评论永久链接# 2012 年 2 月 24 日

额外更新：使用 `border-left: 4px double #ffaa9f;` 代替两个单独的边框。你也不需要在这个属性中使用宽度属性。

Getzel Rubashkin

# 2012 年 2 月 23 日

与其使用 `text-indent` 属性，它只应用于第一行，你应该使用 `padding-left` 属性来推动文本，无论文本长度如何，都要将其推到红色线条之外。

多行 `li` 的可能性也意味着你应该重新考虑由边框创建的线条。一个解决方案（使用 CSS3）可能是使用背景线性渐变，将其与你的行高绑定。

仔细想想，你可能可以使用与应用于 `ul` 相同的技术来创建这些红色线条，并完全删除 `.lines` div。

你怎么看呢？

Allen Lawson

# 2012 年 2 月 23 日

感谢大家对评论的贡献，我希望将来能做得更好，这只是一个小的副项目。
@Chris –
我真的很感谢你在你的网站上推荐我，真的很有意义！

Romain Gonord

# 2012 年 2 月 23 日

@Chris Coyier
你可以删除伪元素，并用 `.list` 块的渐变背景替换它

background:linear-gradient(left, #f5f5f5 0%, #f5f5f5 24px, #ffaa9f 25px, #f5f5f5 26px,#f5f5f5 27px, #ffaa9f 28px,#f5f5f5 29px, #f5f5f5 100%) ;

线性渐变可能需要针对你的浏览器进行前缀。

Ben Hubbard

# 2012 年 2 月 23 日

有可能添加勾号/叉号/或某种方式让它看起来像一个半完成的清单吗？

Getzel Rubashkin

评论永久链接# 2012 年 2 月 23 日

… 作为 `li` 的背景图片

Matthew P.

# 2012 年 2 月 23 日

我喜欢它。

让红色线条更自动地出现的一种方法是在 CSS 中使用数据 URI。所需的图像非常小，我认为它很适合这种情况，虽然我认为从技术上讲它不是“纯”CSS，因为你不能真正编辑它，除非使用特殊的工具。


body, .list li:hover {
  background-image: url(data:image/gif;base64,R0lGODlhBAABAIABAP+qn////yH5BAEAAAEALAAAAAAEAAEAAAIDRAIFADs=);
  background-repeat: repeat-y;
  background-position: 20px 0;  
}

如果你直接将它插入演示中，由于过渡被设置为“all”，你将看到一些奇怪的悬停效果，而且图像在悬停时也没有完全对齐 - 这些问题都很容易解决。

Beben Koben

评论永久链接# 2012 年 2 月 23 日

`.list:before` 中的等效宽度 ;) qiqiqiqi…
谢谢 ☻

Kzqai

# 2012 年 2 月 23 日

该死，14 岁就已经比我设计得好了，现在我沮丧了。

Rick Beckman

# 2012 年 2 月 23 日

看起来你似乎可以通过利用 `outline` 属性（我认为是 CSS3）来实现两个左边界（外侧笔记边框和双红色线条）。

这将允许红色线条随着容器一起增长，并消除对空 `div` 的需求。

我绝不是设计师，我对 `outline` 在当今浏览器中的支持情况一无所知。这些人比我更了解它！

Nathan

# 2012 年 2 月 23 日

Allen，我想看看你的网站，但我发现除了首页之外，所有其他页面都显示（做得很好的）404 页面。

Allen Lawson

评论永久链接# 2012 年 2 月 23 日

对此我深感抱歉，我知道它看起来很糟糕！你看，我刚在本月的 2 号发布了网站，我一直忙于各种事情，还没有写完那些文章。除此之外，我正在重新设计 http://allenlawson.net，所以当外观改变时，文章就会被写出来，并正常工作。

非常感谢。
OrganizedFellow

评论永久链接# 2012 年 2 月 27 日

网站看起来很棒。
我很想读几篇你的文章。尤其是关于你选择不使用 WordPress 的文章。
你是否估计了重新发布的日期？
Ryan G

评论永久链接# 2012 年 2 月 28 日

我也是，我真的很想读你的文章！希望你很快能把网站弄好，Allen。

Max Terpstra

# 2012 年 2 月 23 日

更进一步… http://dabblet.com/gist/1896726

akhil

# 2012 年 2 月 23 日

感谢您提供最棒的文章……太棒了……

# 2012 年 2 月 23 日

我发现我必须将 `ul id=List` 更改为 `ul class=list` 才能使它正常工作

illufox

评论永久链接# 2012 年 2 月 24 日

很棒的文章，虽然 HTML 代码中有一个错误。太可惜 Allen 的网站坏了，我真想读读他的文章。

kenrick beckett

# 2012 年 2 月 23 日

哇，Chris，时间真巧，我两天前就在 bullet.planimus.com 上做了这个！:( 而且它让我很头疼。

Gary

# 2012 年 2 月 23 日

总是很高兴看到 CSS 被用来代替过去可能使用的图像。

Rajiv Dutta

# 2012 年 2 月 24 日

这个东西有缺陷……如果文本无法在一行内显示会发生什么……容器会拉伸，而这在原始笔记本中是不可能的:)……你必须以这样的方式制作它，如果文本溢出，它应该在新的一行中显示，下面的列表应该向下移到下一行。

Joe

# 2012 年 2 月 24 日

很棒的教程！
我是一个 16 岁的网页开发人员/设计师，希望将来能在这个博客上露面（我会写一两篇文章，并把它们发给 Chris，看看他怎么想）。
我倾向于同意大多数关于停止列表为固定宽度和将 `.lines` div 更改为伪元素的观点 - 但除此之外，做得很好！

Chris

# 2012 年 2 月 24 日

酷，谢谢！

sai krishna

# 2012 年 2 月 24 日

你的博客加载速度真快。上面的 CSS 技巧很有效，看起来很漂亮。我认为它在个人博客中看起来很好

Michael Gunner

# 2012 年 2 月 24 日

我不知道其他人是怎么想的，但我对无法点击并编辑列表感到失望。这个想法简直是在呼唤“内容可编辑”和一个巧妙的 HTML5 存储解决方案来保存用户所做的更改。

我知道这不是最初的想法，但这只是我的脑海中浮现的东西，是我潜意识中所期望的。

Allen Lawson

评论永久链接# 2012 年 2 月 24 日

最初在我的设计中，我确实添加了内容可编辑。我把它拿出来了。在我把文件发给 Chris 之前最后一分钟，因为我真的不喜欢它。我的整个想法是做一个以笔记本为主题的列表，我并没有专注于功能。但没错，这个项目简直是在呼唤 HTML5 和 CSS3

Niall McMahon

# 2012 年 2 月 24 日

做得好，Allen。我 15 岁的时候就开始做网页开发，但那个时候绝对没有你这么厉害。很棒！

Aniket Pant

# 2012 年 2 月 24 日

很高兴看到年轻的网页社区也开始做出贡献。虽然我现在 18 岁了，但我从来没有想过要做出像这样的东西。

向你的孩子致敬:)

David Potter

# 2012 年 2 月 24 日

完美，正是我想要的！

zbrukas

# 2012 年 2 月 24 日

我对你代码做了一些微调:)

添加了 CSS

.choose { float: right;
position: relative;}

.checkbox {
content: “”;
width: 0.55em;
height: 1em;
top: 50%;
left: auto;
-webkit-transform: rotate(45deg) skew(5deg);
-webkit-transform-origin: 50% 50%;
-moz-transform: rotate(45deg) skew(5deg);
-moz-transform-origin: 50% 50%;
-o-transform:rotate(45deg) skew(5deg);
-o-transform-origin:50% 50%;
-ms-transform: rotate(45deg) skew(5deg);
-ms-transform-origin: 50% 50%;
right: 1.1em;
border: .35em solid;
border-top: none;
border-left: none;
margin-top: -0.35em;
margin-right: 0.5em;
border-color: #DDD;
}

.checked { border-color: #06AB06;}

.strikeout { text-decoration: line-through;}

添加了 HTML：在每个 `li` 内添加 `

`
<`

`
`

添加了 JS（jQuery）

$(“.list”).find(“.checkbox”).each(function(i, el) {
$(this).click(function(){
$(this).toggleClass(‘checked’);
$(this).parent().parent().toggleClass(‘strikeout’);
});
});

试试看:) 很棒的练习，Allen :D

jake

# 2012 年 2 月 24 日

对于一个“年轻人”来说，这真是令人印象深刻的工作！或者说“老家伙”也是如此。

Lea Verou

# 2012 年 2 月 24 日

您不需要避免填充，只需使用 `background-origin` 来正确地将背景相对于内容框定位。

我在两个月前做了一个类似的演示：http://dabblet.com/gist/1560717

stephen

# 2012 年 2 月 24 日

我使用 CSS 渐变和多个背景图像为我的 Apache 目录索引制作了一个类似的外观页面。

CSS 演示

Anita

# 2012 年 2 月 24 日

Allen，干得漂亮。祝贺你，并继续努力！

william malo

# 2012 年 2 月 24 日

有一个更好的方法，不需要更改高度，也不需要虚拟 div。

ul{list-style:none;padding:0;background:#ffe;box-shadow:0 0 7px #000}
li{height:36px;border-bottom:solid 1px #bba}
li:before{content:””;border-right:2px solid #ffaa9f;width:60px;float:left;height:100%;margin-right:10px}

在任何列表上试试 =)

Jon

# 2012 年 2 月 24 日

很棒的教程！我迫不及待地想尝试这个想法……

Kieran G

# 2012 年 2 月 25 日

嗨，Allen，我不会评论你在这篇很棒的文章中可以做出的改进等等，我想告诉你的是，你才 14 岁，正处于网络技术真正的突破时刻。你对这件事有着明确的热情，在 14 岁的时候，你正在开发、思考和解决这项技术中的问题。抓住这个机会，继续做下去，你一定会成功的。四年后你将年满 18 岁，如果你现在 14 岁的时候就做这件事，并不断学习和发展，到那时你将成为一名真正的专家，一个真正的专家。
干得好，很高兴看到网络社区正确地鼓励你。
PS：你应该读一读《异类》这本书，尤其是关于 10000 小时规则的内容，你们这一代人拥有一个光明的未来，你们所处的时代非常棒。

Allen Lawson

评论永久链接# 2012 年 2 月 25 日

像这样的评论让我坚持下去（;）确实让我的一天变得美好。

Julian Gaviria

# 2012 年 2 月 25 日

想想 14 年前我创建了我的第一个网站。很高兴看到鼓舞人心的年轻头脑。继续努力，干得好。

Taufik Nurrohman

# 2012 年 2 月 25 日

将列表应用为线条是一个非常好的想法。虽然我更喜欢使用渐变作为纸张线条。但是，使用列表作为辅助元素将给我们一个新想法：**嘿，如果在其中插入锚标签，我们可以将其用作某种小型菜单** :)

**PS：**嗯……我认为您指的是 `<ul class="list">` 而不是 `<ul id="list">`

purispace web studio

# 2012 年 2 月 26 日

嗨，Allen，我感到非常兴奋和惊讶。当我 14 岁的时候，我还没有你那么好。你将成为一名专家，并且将拥有改变未来网络技术的专业知识。继续努力，做出伟大的作品。四年后，你将成为一名超级专家开发人员。干得好。

ALEX

# 2012 年 2 月 26 日

DoofyDesigns.com

# 2012 年 2 月 26 日

很棒的技巧，伙计，非常棒的效果！
-Chris

Stepan

# 2012 年 2 月 27 日

我认为您的解决方案不是最好的——首先，它在 FF10 中似乎有点问题，因为“lines” div 比列表本身短。为什么不直接将灰色轮廓放在元素上，为其分配 40px 的左侧填充，并为元素提供左侧的“双”红色边框？这样您甚至不需要 .lines 元素。哦，如果文本被分成多行，文本缩进似乎也不完全按预期工作，也许使用填充会更好？

Martin

# 2012 年 2 月 27 日

我喜欢这个设计看起来多么简单……

我尝试在 Google Chrome 上测试它，它与 IE6 兼容吗？

william malo

评论永久链接# 2012 年 2 月 27 日

ie6？哇，真的吗？

Farzad

# 2012 年 2 月 27 日

非常酷，经典的主题在现代设备上看起来很棒。

egiova

# 2012 年 2 月 28 日

我永远没有足够的时间来开发这些东西，即使我正在考虑。
感谢人口统计（以及其他因素），让年轻人有时间和足够的想象力来做到这一点。
很酷的文章。是的。

egiova

# 2012 年 2 月 28 日

记录在案：我 14 岁的时候在画画。
电脑是科幻电影里的东西。

tambo

# 2012 年 2 月 28 日

http://kougiland.com/css3-notebook.html

Nimsrules

# 2012 年 2 月 29 日

一个 14 岁的孩子能做到这一点，真是令人着迷。不仅结果很棒，而且 CSS 也经过了优化。干得好，Allen！

Raksaka Indra

# 2012 年 2 月 29 日

哇……14 岁？我 16 岁开始学习 web 开发。干得好，Allen！

malachi

# 2012 年 2 月 29 日

你真棒

Jhansi

# 2012 年 3 月 2 日

嗨，Allen，
我没有得到线条，它只是显示了带有红色边距的文本列表。您的代码看起来不像上面的图片…………

迪拜 Web 设计师

# 2012 年 3 月 5 日

好文章。这就是我一直在寻找的东西。非常感谢。

Dan DiGangi

# 2012 年 3 月 7 日

我个人会使用 `outside` 的列表位置，以便文本换行具有相同的左侧对齐。否则，这是一个不错的效果，Chris！

最好的，
Dan DiGangi
@ddigangi

jhansi

评论永久链接# 2012 年 3 月 7 日

大家好，
我的要求是，我必须在文本区域框中输入文本，但它应该看起来像笔记本中的页面…………你们能帮我解决这个问题吗？

Chris Heilmann

# 2012 年 3 月 13 日

线条也可以使用 `::after` 来完成，以避免使用额外的 DIV

http://jsfiddle.net/codepo8/KVjFQ/1953/

我从 Converge SE 的一位很棒的演讲者那里学到了这一点

Tom Pointon

# 2012 年 4 月 12 日

英国还有其他年轻（14 岁）的 web 开发人员吗？我精通 CSS/HTML/JS（包括 jQuery）/PHP，如果您有类似的才能，请在 Twitter 上添加我 (@tompntn)，我们可以互相帮助并讨论彼此的作品等等……我知道这很渺茫，但值得一试 :)

coder

# 2013 年 10 月 1 日

我 13 岁，我知道：html5、css3、javascript、jquery 和 asp.net，我住在德国，我是美国人，我正在制作一个网站，让年轻的青少年学习 web 开发等等，我有两名员工，他们也都是 13 岁，想加入编码团队吗？

coder

# 2013 年 10 月 1 日

@Tom Pointon 那就是你的意思 xD

此评论线程已关闭。如果您有重要信息要分享，请联系我们。