ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2022-01-25 21:33:11  阅读:362  来源: 互联网

标签:文字 设置 color emsp 字体 nbsp 图文混排 升级版 HTML5


案例:

代码:

<!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>

标签:文字,设置,color,emsp,字体,nbsp,图文混排,升级版,HTML5
来源: https://blog.csdn.net/shengming_tutou/article/details/122691955

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有