# 制作一些有趣的效果

# 课程目标

学习如何将 web 字体应用到 web 页面，使用第三方服务，编写自己的代码。
掌握字体溢出处理，和字体方向设置
掌握 CSS 层次选择器，伪类选择器含义和用法
实践并掌握 CSS 的颜色、字体、圆角边框等样式的定义方式
实践并掌握掌握外边距，内边距设置
实践并掌握列表和链接的样式美化。

# 阅读学习

# 字体

昨天学习了字体文本一些基本样式设置，今天学习如何引入 WEB 字体，以及控制文本方向和溢出

打开你的代码编辑器，尝试一下以下属性：

# 外边距&内边距

# 边框

Border-Radius (opens new window)
MDN 边框 (opens new window)
Border Generator (opens new window) 你可以在这里在线操作 border 属性体验一下 border 效果

# 列表

打开你的代码编辑器，尝试一下以下属性：

list-style
list-style-type
list-style-image

# 链接

# 层次选择器

# 伪类选择器

# 编码一

# 用 writing-mode 进行创意排布布局,实现类似报纸排版的文章

HTML 模板

<div class="moby">
  <h2>Title Loomings</h2>
  <p>
    Call me Ishmael. Some years ago- never mind how long precisely- having
    little or no money in my purse, and nothing particular to interest me on
    shore, I thought I would sail about a little and see the watery part of the
    world. It is a way I have of driving off the spleen and regulating the
    circulation. Whenever I find myself growing grim about the mouth; whenever
    it is a damp, drizzly November in my soul; whenever I find myself
    involuntarily pausing before coffin warehouses, and bringing up the rear of
    every funeral I meet; and especially whenever my hypos get such an upper
    hand of me, that it requires a strong moral principle to prevent me from
    deliberately stepping into the street, and methodically knocking people's
    hats off- then, I account it high time to get to sea as soon as I can. This
    is my substitute for pistol and ball. With a philosophical flourish Cato
    throws himself upon his sword; I quietly take to the ship. There is nothing
    surprising in this. If they but knew it, almost all men in their degree,
    some time or other, cherish very nearly the same feelings towards the ocean
    with me.
  </p>

  <p>
    There now is your insular city of the Manhattoes, belted round by wharves as
    Indian isles by coral reefs- commerce surrounds it with her surf. Right and
    left, the streets take you waterward. Its extreme downtown is the battery,
    where that noble mole is washed by waves, and cooled by breezes, which a few
    hours previous were out of sight of land. Look at the crowds of water-gazers
    there.
  </p>
</div>

# 提示

这里引用了 WEB FONT Architects Daughter. 你可以前往Google Font (opens new window)找到Architects Daughter字体
<h2>的内容使用 writing-mode 竖向显示
第二段内容很长，用省略号代替显示剩下部分内容,如下图所示。你需要思考使用哪些属性来完成这个省略号显示功能
如果你不会引入 WEB 字体请重新阅读我们的学习材料进行学习

# 编码二

# 自己编码练习，利用链接结合伪类选择器生成如下图所示图形

案例需要的 HTML 模板如下

<div id="content">
  <h1>CSS TEMPLATES using border radius</h1>
  <div>Blue</div>
  <div><span class="text">TRIANGLE</span></div>
  <div>Red</div>
</div>