想获得如下图所示的效果:段落前有蓝色小球装饰,且小球被一条细长渐变背景的线串联
第一次是用的div元素包裹各元素做出上述两段工作经历效果
<div class="work-item"> <div class="circleLine"></div> <div class="item"> <p class="item-title"> 2014.08——至今 <br>腾讯科技(深圳)有限公司/产品策划 </p> <p class="item-content"> 负责腾讯课堂教研功能的策划;能熟练对接用户及运营侧,规划版本,推进需求落地,并根据数据及用户反馈优化功能;所负责功能覆盖PC客户端、PCWeb、APP、H5。</p> </div> <div class="item"> <p class="item-title"> 2013.07——2013.10 <br>腾讯科技(深圳)有限公司/产品实习生 </p> <p class="item-content">QQ群商业化探索(在线教育方向) 负责QQ群商业化探索,调研用户使用QQ群进行在线教育的情况,由于实习期间表现良好得以留用。调研结果帮助项目组决策,加大投入在线教育的资源,并在之后成立了腾讯课堂项目。</p> </div>
后来经老师指导,推荐使用ul+li的方式来实现,把工作经历看作是一个列表
注意:要习惯根据结构使用合适的元素
修改HTML结构后如下
<div class="work"> <div class="work-title"> <h2>工作经历</h2> </div> <ul class="work-list"> <li> <p>time</p> <h3>公司名称</h3> <p>具体工作内容。。。</p> </li> <li> 。。下一条工作经历</li> </ul> .... </div>
经过上述的结构调整后,将div换成ul之后,只需要设置ul的背景渐变即可实现那条渐变的灰色细线效果。
注:竖线应该由灰色到透明,这样当背景色改变时,有更好的适应性。
即为:
ul{ background: linear-gradient(to bottom,#ccc 90%,transparent 100%) no-repeat left top/1px 100%; }
理解linear-gradient时常常对于其中的位置部分产生疑惑,如上面的 left top/1px 100%; 部分
可拆解为
background-size: 1px 100%; //第一个值为宽度,第二个值为高度
background-position: left top; //第一个值是水平位置,第二个值是垂直位置
定义和用法
-
background-position 属性设置背景图像的起始位置。
这个属性设置背景原图像(由 background-image 定义)的位置,背景图像如果要重复,将从这一点开始。
- background-size 属性规定背景图像的尺寸
在chrome调试工具中删去这两个性质后,显示效果如下:
ul{ background: linear-gradient(to bottom,#ccc 90%,transparent 100%) no-repeat; }
W3School相关资料:
background-size:http://www.w3school.com.cn/cssref/pr_background-size.asp
background-position:http://www.w3school.com.cn/cssref/pr_background-position.asp