html：写网站时遇到的问题及解决

---

01 绝对路径改相对路径出错：图片无法显示

dw中可以找到图片，但就是在网站上无法显示

出错：

<img src="/source/img/pc.jpg" alt="闪销客户端" id="content-1-img-desktop" />

修改后：

<img src="source/img/pc.jpg" alt="闪销客户端" id="content-1-img-desktop" />

错误原因：
在同一个路径下，source前不必再加 /

02 两端文字空开，且每行这两端文字对齐

使用 display: inline-block
效果：

css：

#content-5 {
   
  padding: 226px 236px 114px 243px;
  background: #f7f9fb url('https://cdn.sc-edu.com/img/2019/08/21/17/05b34d0bed0e343e87863b993847decf.jpg') no-repeat;
  background-size: contain;
  background-position-y: 432.8px;
  height: 736px;
}
.content-5-detail {
   
  width: 366px;
  font-size: 14px;
  line-height: 2;
  color: #54565a;
  margin-top: 20px;
}
.content-5-detail > p {
   
  margin: 0;
}
.content-5-detail-blank {
   
  display: inline-block;
  width: 26px;
}

html

<div class="content-5-detail">
    <p>活动制作<span class="content-5-detail-blank"></span>商品售卖</p>
    <p>
        口碑营销<span class="content-5-detail-blank"></span>全民拼团
    </p>
    <p>招生数据统计<span class="content-5-detail-blank"></span>学员画像分析</p>
    <p>全渠道传播裂变</p>
</div>

03 在一行，一侧显示文字，一侧显示图片

效果：

• 通过表格形式完成：
  https://blog.csdn.net/weixin_45677047/article/details/104416031
• html+css完成
  https://blog.csdn.net/zhao_hong_ran/article/details/80710891

04 动画效果，文字乱跑

• 一开始，4行动画，第一行显示，第二行文字只有一半，第三、四行文字没有了
  解决： 我将这些文字css样式中的 overflow:hidden; 注释掉，然后发现本希望在同一行的文字，每一行逐渐往上移动
• 对文字乱跑效果改了很久，一直有错
  解决： 我对这行文字规定了字体大小，就莫名其妙的好了？？？
  可能是因为字体大了，跑动就没那么明显了

css

/*第5页*/
.value{
   
	background-color:#f2f5f7;
	padding: 115px 200px;
	align-items: center;
	text-align:center;
}
.value h3{
   
	margin-bottom:42px;
	text-align:center;
	padding-bottom:7px; 
}
.value .pc{
   display:block;}
.value .mobile{