图文混排实操

此次完成如下的效果图此次运用到了外链式以及相对定位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">&nbsp;&nbsp;&nbsp;&nbsp;<span class="s1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
	<p class="p1">更新时间:<span class="s1">202006061726</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> &nbsp;&nbsp;&nbsp;文章分类:<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;
}

以上就是制作图文混排实操过程。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值