<!DOCTYPE html>

<html lang="en">

	<head>

		<meta charset="UTF-8">

		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<meta http-equiv="X-UA-Compatible" content="ie=edge">

		<title>Document</title>

		<style>

			.menu-list {

				display: flex;

				flex-direction: row;

				justify-content: space-between;

				width: 600px;

				flex: 1;

			}

		</style>

	</head>

	<body>

		<div class="menu-list">

			<div>猪肉大葱饺子</div>

			<hr style="border-top:1px dashed #000; height:1px;flex:1">

			<div>10元</div>

		</div>

		<div class="menu-list">

			<div>鸡蛋水饺</div>

			<hr style="border-top:1px dashed #000; height:1px;flex:1">

			<div>10元</div>

		</div>

		<div class="menu-list">

			<div>土豆丝</div>

			<hr style="border-top:1px dashed #000; height:1px;flex:1">

			<div>10元</div>

		</div>

		<div class="menu-list">

			<div>宫保鸡丁</div>

			<hr style="border-top:1px dashed #000; height:1px;flex:1">

			<div>10元</div>

		</div>

	</body>e

</html>

css实现中间横线俩边文字效果的更多相关文章

  1. 用css实现在横线中间插入文字

    在一些登录或者注册界面中常常可看到,一个大框框上面的横线中有插入文字,大概示意图如下: 这种现象其实是相对位置作用的结果,可以通过相对定位,是某元素恰好出现在div的边框上. position: re ...

  2. css文字效果（文字剪贴蒙版，text-shodow的应用，文字排版等…）

    .katex { display: inline-block; text-align: initial; } .katex { font-family: Consolas, Inconsolata, ...

  3. CSS Gradient文字效果

    你想创建的标题没有渲染和Photoshop每个标题吗?这里是一个简单的CSS技巧向您展示如何创建渐变文字效果,PNG图像(纯CSS,没有Javascript或Flash).你所需要的是一个空的< ...

  4. 精通CSS+DIV网页样式与布局--CSS文字效果

    上篇文章,小编简单的介绍了一下CSS的一些基本语法,学习内容不是很复杂,都是CSS的一些入门知识,但是万丈高楼平地起,搭好地基,高楼大厦不在话下,学习任何课程,都必须从基础开始,一步一个脚印,踏实坚定 ...

  5. css鼠标滑过出现文字效果

    模仿淘宝上鼠标移动到商品图片时,出现的文字效果. 1.效果图                                鼠标移动到粉红色的区域,则出现黄色部分. 2.代码 <!DOCTYPE ...

  6. CSS和JS两种颜色渐变文字效果代码

    js实现颜色渐变文字效果代码: <!-- js颜色渐变色文字 --> <div id="moml"> <div style="text-al ...

  7. CSS 奇技淫巧 | 妙用混合模式实现文字镂空波浪效果

    本文将介绍一个小技巧,通过混合模式 mix-blend-mode 巧妙的实现文字的镂空波浪效果. 起因 一日,一群友私聊问我.如何使用 CSS 实现下述效果,一个文字的波浪效果: 我当时想都没想,就回 ...

  8. 精通CSS+DIV网页样式与布局--图片效果

    提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过 ...

  9. CSS3动画：流彩文字效果+图片模糊效果+边框伸展效果实现

    前言 首先第一步,先布局html代码如下: <div class="wrap"> <img src="images/1.jpg" class= ...

随机推荐

  1. 万字长文，以代码的思想去详细讲解yolov3算法的实现原理和训练过程，Visdrone数据集实战训练

    以代码的思想去详细讲解yolov3算法的实现原理和训练过程,并教使用visdrone2019数据集和自己制作数据集两种方式去训练自己的pytorch搭建的yolov3模型,吐血整理万字长文,纯属干货 ...

  2. idea导入spring源码

    1.环境: Intellij idea 2018.2 gradle 4.10.2 spring framework:5.2.0 注意版本不符合可能会导致编译失败. 参考版本: 1.首先下载安装 Int ...

  3. Flash 0day(CVE-2018-4878)复现过程

    一.前言介绍 2018年2月1号,Adobe官方发布安全通报(APSA18-01),声明Adobe Flash 28.0.0.137及其之前的版本,存在高危漏洞(CVE-2018-4878). 从Ad ...

  4. charles安装破解步骤

    访问该地址https://www.zzzmode.com/mytools/charles/ 安装——生成破解工具charles.jar——替换

  5. 论文：Bottom-Up and Top-Down Attention for Image Captioning and Visual Question Answering-阅读总结

    Bottom-Up and Top-Down Attention for Image Captioning and Visual Question Answering-阅读总结 笔记不能简单的抄写文中 ...

  6. [LeetCode]404. 左叶子之和(递归)、938. 二叉搜索树的范围和(递归)（BST）

    题目 404. 左叶子之和 如题 题解 类似树的遍历的递归 注意一定要是叶子结点 代码 class Solution { public int sumOfLeftLeaves(TreeNode roo ...

  7. asp.net中的日志添加和未处理异常的记录

    1.第一次写博客如有错误欢迎纠正.邮箱:Jiangwenyuan0217@163.com: 2.此博客可能对初学者有些帮助,对哪些骨灰级的程序员来说都是分分钟的事了,所以就不用在这里费时间了. 环境说 ...

  8. 使用GO实现Paxos分布式一致性协议

    什么是Paxos分布式一致性协议 最初的服务往往都是通过单体架构对外提供的,即单Server-单Database模式.随着业务的不断扩展,用户和请求数都在不断上升,如何应对大量的请求就成了每个服务都需 ...

  9. react项目结合echarts,百度地图实现热力图

    一.最近在一个react项目(antd pro)中需要展示一个热力地图.需求是: 1.热力地图可缩放: 2.鼠标点击可以展示该点地理坐标,及热力值. 3.初始化时候自适应展示所有的热力点. 4.展示热 ...

  10. Docker之概述

    我们常常需要将应用程序部署在独立的系统环境中,而使用物理机器部署会浪费大量的物理资源.能否讲物理机器虚拟成一个一个容器,而将程序部署在各自的容器中?Docker是一个能够把开发的应用程序自动部署到容器 ...