黑马程序员编著的教材 HTML+CSS+JavaScript网页制作案例教程
第三章：宣传页面效果展示-课后习题参考代码
。。。。。。。。
记得 关注，收藏，评论哦，作者将持续更新。。。。
我自己做的效果如下：
参考代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>移动端字体设的七大准则计</title>
<style type="text/css">
h2{text-align:center; font-size:36px; font-family:"方正正中黑简体","黑体"; color:#666; letter-spacing:10px;}
h2 span,.author span{color:#076BBC;}
.author{text-align:center; color:#666; font-family:"楷体";}
p{font-family:"微软雅黑","黑体";}
span{color:#f00;}
.phone{font-family:"楷体"; font-style:italic; color:#666; font-size:16px; }
.phone span{color:#076BBC;}
hr{color:#ddd;}
</style>
</head>
<body>
<h2>把握<span>移动端字体设计</span>的七大准则</h2>
<p class="author">更新时间:<span>2020年06月06日17时26分</span> 来源:<span>问答精灵</span></p>
<img src="images/2.jpg" hspace="30" align="left" />
<p>♠ <span> 留足空间，字体并非弯弯曲曲的线条排列</span>，它主要在于周围和相互间的空间。</p>
<p>♠ 行宽是一行文字的长度，<span>是一行文字的理想长度</span>，因为很难让每一行都精确吻合。</p>
<p>♠ 行距是行之间的空间，行距太紧凑，<span>会让视线难以从行尾扫视到下一行首。</span></p>
<p>♠ 所有字体至少都有一种最佳状态，<span>使字体在浏览器中最能保持字形的抗锯齿选项。</span></p>
<p>♠ 你读的多数内容是<span>居左对齐，且右边沿参差不齐</span>，这样看起来更<span>有节奏。</span></p>
<p>♠ 增强文字与背景对比的同时，我们也要<span>减少不同层次文字间的反差</span>。</p>
<p>♠ <span>按比例调整字间距</span>，为移动端调整字号时，要意识到字间距发生了必要的变化。</p><hr/>
<p class="phone"> 原文链接：<span>http://www.woshipm.com/pd/136680.html</span> 文章分类：<span>艺术设计</span></p>
</body>
</html>
如上用到的图片如下：
记得把图片放到images文件夹里边，否则会提示找不到图片。
6974
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
