HTML5网页设计基础——图文混排升级版

NedK7 · 2022年10月15日

代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style>
		#one{
			font-family:"微软雅黑"	/*设置字体*/
		}
		.hui{
			color: #999;
		}
		h2{		
		letter-spacing: 5px /*设置标题字间距*/
		}
		.red{
			color: red;
		}
		.blue{
			color:#05A9F2;
		}
		.center{
			text-align: center;/*标题居中*/
		}
		img{
			margin:0px 30px;	/*给图片上下外边距设置为0左右外边距设置为30*/			
		}
		p{
			white-space: nowrap;/*设置空格空行无效，强制文本不能换行*/
		}
		em{
			white-space: nowrap;/*设置空格空行无效，强制文本不能换行*/ 
		}
	</style>
</head>

<body>
	
	<spen class="center">
		<h2 class="hui">把握<font class="blue">移动端字体设计</font>的七大准则</h2>
	</spen>
	<spen class="center" id="one">
		<p class="hui">更新时间:
			<font class="blue">2020年06月06日17时26分</font>
			&emsp;来源:
			<font class="blue">问答精灵</font>
		</p>
	</spen>
	<span>
		<img src="2.jpg" align="left">
		<p>♠&nbsp;<font class="red">留足空间,字体并非穹曲曲的线条排列</font>，它主要在于周围和相互间的空间。</p>
		<p>♠&nbsp;行宽是行文字的长度,<font class="red">是一行文字的理想长度</font>，因为很难让每行都精确吻合，</p>
		<p>♠&nbsp;行距是行之间的空间,行距太紧凑,<font class="red">会让视线难以从行尾扫视到下一行首。</font></p>
		<p>♠&nbsp;所有字体至少都有一种最佳状态, <font class="red">使字体在浏览器中最能保持字形的抗据齿选项。</font></p>
		<p>♠&nbsp;你读的多数内容是<font class="red">居左对齐,右边沿参差不齐的</font>，这样看起来<font class="red">更有节奏。</font></p>
		<p>♠&nbsp;增强文字与背景对比的同时,我们也要<font class="red">减少不同层次文字间的反差。</font></p>
		<p>♠&nbsp;<font class="red">按比例调整字问距</font>,为移动端调整字号时，要意识到字间距发生了必要的变化。</p>		
		<hr size="2" color="#E3E3E3"  >
		<em class="hui">
			原文链按:
			<em class="blue">http://www.woshipm.compd/136680.html</em>
			&emsp;&emsp;&emsp;文章分类:
			<em class="blue">艺术设计</em>
		</em>	
	</span>
</body>
</html>

Pcasd · 2022年10月17日

谢谢分享

登录

游客您好，欢迎来到黑客世界论坛！您可以在这里进行注册。

HTML5网页设计基础——图文混排升级版

推荐的帖子

NedK7

代码：

链接帖子

意见的链接

分享到其他网站

Pcasd

链接帖子

意见的链接

分享到其他网站

黑客攻防讨论组

黑客攻防讨论组

最近浏览 0位会员

黑客世界站内导航 (SITE MAP)