建设化工网站的功能,建设互联网地方垂直网站,上杭网站制作,免备案空间哪家好突然安排让速写这样的一个布局#xff0c;重点就是CSS画一条虚线,并且还要灵活设置虚线的宽度和虚线之间的间隔和虚线的颜色。 注#xff1a;订单里面的金额都是随意写的 !DOCTYPE html
html langzh-CNheadmeta charsetUTF-8重点就是CSS画一条虚线,并且还要灵活设置虚线的宽度和虚线之间的间隔和虚线的颜色。 注订单里面的金额都是随意写的 !DOCTYPE html
html langzh-CNheadmeta charsetUTF-8 /title机票订单详情/titlestylebody {font-family: Arial, sans-serif;margin: 0;padding: 20px;}.passenger-box {display: flex;width: 100%;margin-top: 16px;}.passenger-info {display: flex;width: 100%;}.passenger-box .title {width: 36px;}.passenger-box .dashed {background: repeating-linear-gradient(to right,#000,#000 3px,transparent 7px); /* 创建一条虚线背景 */height: 1px; /* 设置元素的高度为1像素 */flex: auto;margin-top: 10px;}.passenger-box .price {text-align: right;}.passenger-box .passenger {text-align: right;width: 56px;}.cate-box {display: flex;margin-top: 16px;justify-content: space-between;}.cate-box .price{margin-right: 50px;}.total-line {background: repeating-linear-gradient(to right,#000,#000 3px,transparent 7px); /* 创建一条虚线背景 */height: 1px; /* 设置元素的高度为1像素 */margin-top: 20px;}.total {display: flex;justify-content: space-between;margin-top: 16px;}.total-price {color: #ff6600;}/style/headbodyh1订单详情/h1div classpassenger-boxdiv classpassenger-infodiv classtitle成人/divdiv classdashed/divdiv classprice9999/div/divdiv classpassengerX1人/div/divdiv classcate-boxdiv classtitle机票/divdiv classprice899/div/divdiv classcate-boxdiv classtitle机建/divdiv classprice50/div/divdiv classcate-boxdiv classtitle燃油/divdiv classprice70/div/divdiv classpassenger-boxdiv classpassenger-infodiv classtitle儿童/divdiv classdashed/divdiv classprice9999/div/divdiv classpassengerX1人/div/divdiv classcate-boxdiv classtitle机票/divdiv classprice8888/div/divdiv classcate-boxdiv classtitle机建/divdiv classprice50/div/divdiv classcate-boxdiv classtitle燃油/divdiv classprice70/div/divdiv classtotal-line/divdiv classtotaldiv订单金额总计/divdiv classtotal-price1050/div/div/body
/html
重点介绍一下虚线的实现的css代码 background: repeating-linear-gradient(to right, #000, #000 3px, transparent 7px); /*创建一条虚线背景 */height: 1px; /* 设置元素的高度为1像素 */主要是 background: repeating-linear-gradient(to right, #44928E, #44928E 15px, transparent 15px, transparent 20px);
属性说明
to right 渐变色的方向
#44928E, #44928E 渐变色的颜色数值
15px, transparent 15px 虚线的线条渐变的色值的宽度及虚线的宽度不需要渐变的话这两个值设置成一样就行就是虚线的宽度
transparent 20px 虚线的间隔 如果这篇文章对你有所帮助欢迎点赞、分享和留言让更多的人受益。感谢你的细心阅读如果你发现了任何错误或需要补充的地方请随时告诉我我会尽快处理。
