HTML练习之路09

最新推荐文章于 2023-02-13 22:22:20 发布

沐曦可期

最新推荐文章于 2023-02-13 22:22:20 发布

阅读量3k

点赞数 5

文章标签： html 前端 css css3

本文链接：https://blog.csdn.net/qq_62714412/article/details/122632590

版权

本次的题目是完成如图所示的效果：

首先，我们分析一下界面结构，可以看作上下两部分，该界面的上部由主标题和副标题共同构成，

下部的左侧为图片，右侧为多个段落文本夹杂一根水平线。整个文本中有多出特殊颜色的文字，我们用<em>标签将其标出，并设置好对应颜色的类（class）,方便CSS设置颜色。

我们可以将主标题和副标题作为一个整体，方便居中显示：

<div>
		<h2>把握<em class="blue">移动端字体设计</em>的七大准则</h2>
		<p id="settop">更新时间:<em class="blue">2020年06月06日17时26分</em> 来源:<em class="blue">问答精灵</em></p>
		</div>

左侧的图片直接用<img>引入，为了能让右边显示多个文本信息，所以需要设置图片所在的水平方向：

<img src="../../../Documents/muxishiye/room.jpg" align="left" >

接下来我们将多段文本写入：

<p class="setmargin">
			♠  <em>留足空间，字体并非弯弯曲曲的线条排列</em>，它主要在于周围和相互间的空间。
			</p><p class="setmargin">
			♠ 行宽是一行文字的长度，<em>是一行文字的理想长度</em>，因为很难让每一行都精确吻合。
			</p><p class="setmargin">
			♠ 行距是行之间的空间，行距太紧凑，<em>会让视线难以从行尾扫视到下一行首。</em>
			</p><p class="setmargin">
			♠ 所有字体至少都有一种最佳状态，<em>使字体在浏览器中最能保持字形的抗锯齿选项。</em>
			</p><p class="setmargin">
			♠ 你读的多数内容是<em>居左对齐，且右边沿参差不齐，</em>这样看起来更<em>有节奏。</em>
			</p><p class="setmargin">
			♠ 增强文字与背景对比的同时，我们也要<em>减少不同层次文字间的反差</em>。
			</p><p class="setmargin">
			♠ <em>按比例调整字间距</em>，为移动端调整字号时，要意识到字间距发生了必要的变化。
			</p>

接下来，需要我们写入水平线和最后一段文本：

<hr>
<p class="setmargin"><em>
			原文链接：<em class="blue">http://www.woshipm.com/pd/136680.html</em> 文章分类：<em class="blue">艺术设计</em>
			</em></p>

接下来，我们来编写我们的CSS源码，首先，我们使用链入式引用CSS代码，既然要引入CSS代码，就需要先新建CSS文件，CSS文件新建过程与html文件新建过程几乎一样，只是在如下界面将Html选项选择Css即可：

然后紧接着</title>标签下一行引入Css文件：

<link href="index_1_22_test01.css" rel="stylesheet" type="text/css">

接下来我们来到CSS文件，第一步，祖传艺能，初始化边距：

*{
	margin: 0px;
	padding: 0px;
}

我们将标记的斜体文本正常显示：

em{
	font-style: normal;
}

我们对div设置居中显示和外边距，并对副标题设置向上的边距，让主标题和副标题之间产生一定空隙：

div{
	text-align: center;
	margin-top: 15px;
	padding-bottom: 5px;
}

#settop{margin-top: 14px;}

接下来设置图片的边距，达到文本和图片各占一半的效果（多次调试得到）：

img{
	margin-right: 10px;
	margin-top: 4px;
	margin-left:8%;
}

最后设置下面部分右侧文本的外边距，多次调试，达到理想结果，我们的基本框架就算搭建完成：

.setmargin{
	margin-top: 13px;
}

hr{margin-top: 10px;  color: #272727; width: 560px; }

接下来，开始设置界面的样式，对照设置好的class名称设置颜色即可，最后一个段落文本还需要设置斜体和灰色：

.blue{color: #0C10D5;}

.italik{
	font-style: italic;
	color: #9E9595;
	margin-top: 10px;
}

我们的显示结果如下：

完整.html文件源码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>动手实践3</title>
	<link href="index_1_22_test01.css" rel="stylesheet" type="text/css">
</head>

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

完整.css源码如下：

@charset "utf-8";
/* CSS Document */

*{
	margin: 0px;
	padding: 0px;
}

em{
	font-style: normal;
	color: red;
}

div{
	text-align: center;
	margin-top: 15px;
	padding-bottom: 5px;
}

#settop{margin-top: 14px;}

img{
	margin-right: 10px;
	margin-top: 4px;
	margin-left:8%;
}

.setmargin{
	margin-top: 13px;
}

hr{margin-top: 10px;  color: #272727; width: 560px; }

.blue{color: #0C10D5;}

.italik{
	font-style: italic;
	color: #9E9595;
	margin-top: 10px;
}

如果你认为我的分享还不错，欢迎加入我们的大家庭一起学习，无限进步。

（QQ群：937864538 欢迎入群~）

沐曦可期

关注

5
点赞
踩
34

收藏

觉得还不错? 一键收藏
打赏
2
评论
HTML练习之路09

本次的题目是完成如图所示的效果：首先，我们分析一下界面结构，可以看作上下两部分，该界面的上部由主标题和副标题共同构成，下部的左侧为图片，右侧为多个段落文本夹杂一根水平线。整个文本中有多出特殊颜色的文字，我们用<em>标签将其标出，并设置好对应颜色的类（class）,方便CSS设置颜色。我们可以将主标题和副标题作为一个整体，方便居中显示：<div> <h2>把握<em class="blue">移动端字体设计</em>的七大
复制链接

扫一扫