此次完成如下的效果图此次运用到了外链式以及相对定位Position:relative,有序标签ul。先用在站点底下创建好文件夹,将新建的css文件存在里面,然后用link调用并使用,下面是代码解析,大部分都很类似。
接下来是css代码,具体解析看下图。
这里是html代码。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简单的艺术页面设计</title>
<link rel="stylesheet" href="css/简单的艺术页面设计css.css">
</head>
<body>
<h2 class="bt">把 握 <span class="s1">移 动 端 字 体 设 计 </span>的 七 大 推 测</h2>
<p class="p1">更新时间:<span class="s1">2020年06月06日17时26分</span> 来源:<span class="s1">问答精灵</span></p>
<div class="box1">
<img src="img/2 (2).jpg" class="tp">
<div class="box2">
<ul type="square">
<li><span class="s2">留足空间字体并非弯弯曲曲的线条排列</span>,它主要在于周围和相互间的空间。</li>
<li>行宽是一行文字的长度,<span class="s2">是一行文字的理想长度</span>,因为很难让每一行都精确吻合。</li>
<li>行距是行之间的空间,行距太紧凑,<span class="s2">会让视线难以从行尾扫视到下一行首</span>。</li>
<li>所有字体至少都有一种最佳状态,<span class="s2">使字体在浏览器中最能保持字形的抗锯齿选项。</span></li>
<li>你读的多数内容是<span class="s2">居左对齐</span>,右边沿参差不齐的,这样看起来更有<span class="s2">节奏</span>。</li>
<li>增强文字与背景对比的同时,我们也要<span class="s2">减少不同层次文字间的反差。</span></li>
<li><span class="s2">按比例调整字间距</span>,为移动端调整字号时,要意识到字间距发生了必要的变化。</li>
<hr>
<p><em>原文链接:<span class="s1"> http://www.woshipm.com/pd/136680.html</span> 文章分类:<span class="s1">艺术设计</span></em></p>
</ul></div>
</div>
</body>
</html>
这里是css代码
@charset "utf-8";
/* CSS Document */
.bt{
text-align: center;
}
.p1{
font-size: 15px;
text-align: center;
}
.tp{
position: relative;
left: 10%;
float: left;
}
.box1{
}
.box2{
Position:relative;
left: 10%;
line-height: 30px;
float: left;
}
.s1{
color:#2CABDD;
}
.s2{
color: red;
}
以上就是制作图文混排实操过程。