前端只是做网站吗,wordpress仿站实战,企业网站价格花,上海最专业的集团网站建设一、案例如图 该案例设计条件#xff1a; 左侧时间 和竖线、点、内容都是居中对其的#xff0c;上下时间点中间要有一段距离 二、编写逻辑 1. 布局结构#xff1a;一共三个元素#xff0c;左侧是时间和黑点#xff0c;中间是线条#xff0c;右侧是内容 2. 样式难点#…一、案例如图 该案例设计条件 左侧时间 和竖线、点、内容都是居中对其的上下时间点中间要有一段距离 二、编写逻辑 1. 布局结构一共三个元素左侧是时间和黑点中间是线条右侧是内容 2. 样式难点让子元素撑满父元素高度通过给父元素 align-items: stretch; 如何让内容居中对其 答以左侧为例子左侧高度为父元素高度它里有开始时间、结束时间、黑点只需要设置 justify-content: center;aligns-item:center;右侧同理 如何让线条line边长让上下内容有一段距离 答只能单独设置一个div让它的样式与 线的样式相同有一个高度用来隔开一段距离暂时想到这个方法有点麻烦 三、代码案例没时间一步一步去写如何思考的太忙了赶着开发
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title盛满父元素高度/titlestyle.father {display: flex;flex-direction: row;align-items: stretch;}.son1 {background-color: yellowgreen;width: 4px;padding: 60px 0; /* 通过padding 让线条变长使上下模块产生距离 */margin: 0 10px;}.son2 {width: 200px;background-color: #d3e3fd;display: flex;justify-content: center;align-items: center;}.circle {width: 8px;height: 8px;border-radius: 50%;background-color: #000;position: relative;left: 47px;}.time {width: 40px;display: flex;flex-direction: column;justify-content: center;}.jianxi{background-color: yellowgreen;width: 4px;margin: 0 10px;height: 20px;position: relative;left: 40px;}/style/headbodydiv classfatherdiv classtimediv9:30/divdiv classcircle/divdiv9:45/div/divdiv classson1/divdiv classson2这是子元素son2它里面有很多内容可以撑起一个高度/div/divdiv classjianxi/divdiv classfatherdiv classtimediv10:30/divdiv classcircle/divdiv10:45/div/divdiv classson1/divdiv classson2这是子元素son2它里面有很多内容可以撑起一个高度,这是子元素son2它里面有很多内容可以撑起一个高度这是子元素son2它里面有很多内容可以撑起一个高度/div/div/body
/html
