添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
margin-right:10px; display:flex; background:url(../images/jmyz-lc-bg.png) no-repeat center top; background-size:auto 534px; height:621px; .chuguo-lc-wrap ul{ width:50%; flex:1; .chuguo-lc-wrap ul.lc-right{ margin-top:56px; .chuguo-lc-wrap ul li{ position:relative; height:95px; margin-bottom:18px; .chuguo-lc-wrap ul li .lc-title{ color:#fff; background-color:#35516c; width:83%; top:0; left:0; line-height:25px; text-align:center; z-index:9; border-bottom:1px solid rgba(0,0,0,0.2); box-shadow:0px 1px 2px rgba(0,0,0,0.5); font-size:15px; .chuguo-lc-wrap ul.lc-right li .lc-title{ top:0; right:0; left:auto; .chuguo-lc-wrap ul.lc-left li .lc-title::before{ content:''; width:0; heigth:0; border:5px solid #304859; border-bottom-color:transparent; border-left-color:transparent; bottom:-11px; left:0; .chuguo-lc-wrap ul.lc-right li .lc-title::before{ content:''; width:0; heigth:0; border:5px solid #304859; border-bottom-color:transparent; border-right-color:transparent; bottom:-11px; right:0; .chuguo-lc-wrap ul.lc-left li .lc-title::after{ content:''; width:26px; height:26px; border-radius:50%; top:0; right:-13px; background:#35516c; .chuguo-lc-wrap ul.lc-right li .lc-title::after{ content:''; width:26px; height:26px; border-radius:50%; top:0; left:-13px; background:#35516c; .chuguo-lc-wrap ul li .lc-content{ top:0; left:10px; padding-top:34px; width:70%; padding-bottom:12px; text-align:center; box-shadow:0px 2px 2px rgba(0,0,0,0.4); color:#333; background-color:#f1f2f3; padding-left:5px; padding-right:5px; .chuguo-lc-wrap ul.lc-right li .lc-content{ left:auto; right:10px; .chuguo-lc-wrap ul.lc-left li:nth-child(2) .lc-title{ background-color:#f6004b; .chuguo-lc-wrap ul.lc-left li:nth-child(2) .lc-title::before{ border:5px solid #ad003a; border-bottom-color:transparent; border-left-color:transparent; .chuguo-lc-wrap ul.lc-left li:nth-child(2) .lc-title::after{ background:#f6004b; .chuguo-lc-wrap ul.lc-left li:nth-child(3) .lc-title{ background-color:#00b1b1; .chuguo-lc-wrap ul.lc-left li:nth-child(3) .lc-title::before{ border:5px solid #008183; border-bottom-color:transparent; border-left-color:transparent; .chuguo-lc-wrap ul.lc-left li:nth-child(3) .lc-title::after{ background:#00b1b1; .chuguo-lc-wrap ul.lc-left li:nth-child(4) .lc-title{ background-color:#4a90e2; .chuguo-lc-wrap ul.lc-left li:nth-child(4) .lc-title::before{ border:5px solid #2a5f9c; border-bottom-color:transparent; border-left-color:transparent; .chuguo-lc-wrap ul.lc-left li:nth-child(4) .lc-title::after{ background:#4a90e2; .chuguo-lc-wrap ul.lc-left li:nth-child(5) .lc-title{ background-color:#417505; .chuguo-lc-wrap ul.lc-left li:nth-child(5) .lc-title::before{ border:5px solid #335906; border-bottom-color:transparent; border-left-color:transparent; .chuguo-lc-wrap ul.lc-left li:nth-child(5) .lc-title::after{ background:#417505; .chuguo-lc-wrap ul.lc-right li:nth-child(1) .lc-title{ background-color:#ffcc00; .chuguo-lc-wrap ul.lc-right li:nth-child(1) .lc-title::before{ border:5px solid #efa100; border-bottom-color:transparent; border-right-color:transparent; .chuguo-lc-wrap ul.lc-right li:nth-child(1) .lc-title::after{ background:#ffcc00; .chuguo-lc-wrap ul.lc-right li:nth-child(2) .lc-title{ background-color:#005d8e; .chuguo-lc-wrap ul.lc-right li:nth-child(2) .lc-title::before{ border:5px solid #034c7b; border-bottom-color:transparent; border-right-color:transparent; .chuguo-lc-wrap ul.lc-right li:nth-child(2) .lc-title::after{ background:#005d8e; .chuguo-lc-wrap ul.lc-right li:nth-child(3) .lc-title{ background-color:#d94135; .chuguo-lc-wrap ul.lc-right li:nth-child(3) .lc-title::before{ border:5px solid #a53626; border-bottom-color:transparent; border-right-color:transparent; .chuguo-lc-wrap ul.lc-right li:nth-child(3) .lc-title::after{ background:#d94135; .chuguo-lc-wrap ul.lc-right li:nth-child(4) .lc-title{ background-color:#6d219b; .chuguo-lc-wrap ul.lc-right li:nth-child(4) .lc-title::before{ border:5px solid #4e3675; border-bottom-color:transparent; border-right-color:transparent; .chuguo-lc-wrap ul.lc-right li:nth-child(4) .lc-title::after{ background:#6d219b; .chuguo-lc-wrap ul.lc-right li:nth-child(5) .lc-title{ background-color:#ab6b42; .chuguo-lc-wrap ul.lc-right li:nth-child(5) .lc-title::before{ border:5px solid #744224; border-bottom-color:transparent; border-right-color:transparent; .chuguo-lc-wrap ul.lc-right li:nth-child(5) .lc-title::after{ background:#ab6b42;
css 实现流程导航 效果 ,具体内容如下所示: ::tip 使用 css 线上 流程导航 效果 。    本文统一采取 flex 布局 ,你也可以采用其他布局实现,核心原理不变 :::   ## 方法一 利用裁剪  该方法IE下不支持 利用裁剪 clip-path: polygon(),直接画出一个三角 唯一一点需要算出大致百分比就可以画出来   <!DOCTYPE html> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> 在开发过程中会经常遇到流程模块的功能 ,今天就来说下 css 如何实现如下图所示的左侧流程标记~ <div class="os" style="width :100px ; height :100px ; border:1px solid black ;margin-top : 50px;" > <div class="orl"></div> css 样式 .orl{ width: 3px;
基于jQuery+ css 实现的简单 流程图 插件(兼容ie) 提供 节点添加、节点编辑、节点删除 操作入口(编辑、添加未提供具体实现。需要结合需求,通过 流程图 插件提供的方法自行实现) 提供节点点击、节点删除监听 流程图 插件详细使用说明已添加到源码头部 插件实现 效果 如下:  源码地址:https://download.csdn.net/download/a120779394/1074753...
特想吐槽下,上传的图片尽然给拉伸了。图片都展示不好了(*-*)生气,就先凑合看吧 首先进行中的为绿色,进行中的为橙色,未进行的为灰色,活不多说直接上代码,横向的为自己手 ,纵向为elementUI自带的 <ul class="steps"> <li v-for="(item,index) in list" :key="item.id" :class=...
H5 CSS 3 移动 漂亮登录界面的设计可以从以下几个方面入手: 1. 选择合适的颜色搭配:通过选择适合 移动 的配色方案,可以营造出舒适、清新的登录界面。一般来说,可以选择明亮的颜色作为主题色,搭配柔和的中性色作为背景色,使整个界面色彩协调。 2. 使用特效增加动感:在登录界面中使用 CSS 3动画与过渡 效果 ,可以增加视觉上的动感。例如,在输入框获取焦点时可以添加缓慢的闪烁 效果 ,或者在表单验证成功时添加弹跳的动画 效果 。 3. 采用响应式布局:为了适应不同的 移动 设备屏幕大小,可以使用响应式布局设计登录界面。通过媒体查询和流式布局,使界面能够自动适应各种大小的屏幕,确保在不同设备上都能展现良好的用户体验。 4. 添加背景图或渐变 效果 :为登录界面添加合适的背景图或渐变 效果 可以提升整体的美感。可以选择与主题相关的图片作为背景,或者使用 CSS 3实现的渐变 效果 ,使界面更加丰富多样。 5. 设计简洁明了的UI元素:登录界面的UI元素应该简洁明了,避免过多复杂的装饰与图标。只保留必要的输入框、按钮和文字说明等元素,使用户能够快速理解和使用登录界面。 总之,一个漂亮的H5 CSS 3 移动 登录界面应该有舒适的色彩搭配、合适的特效动画、响应式布局、精心选择的背景和简洁明了的UI元素等元素的组合,能够给用户带来良好的视觉体验和操作体验。 ### 回答2: 要设计一个漂亮的H5 CSS 3 移动 登录界面,有几个关键点需要注意: 首先,要选择合适的颜色和字体,以营造出视觉上的吸引力和舒适感。可以选择亮丽的主色调,如蓝色或绿色,并搭配简洁清晰的字体。 其次,界面布局要简洁明了,不宜过于复杂。可以使用简单的网格布局来放置登录表单的元素,如用户名和密码输入框、登录按钮、忘记密码等。 在动效方面,可以运用 CSS 3的动画 效果 ,让界面更加生动有趣。例如,在输入框获得焦点时,可以添加一些渐变或者缩放 效果 。登录按钮可以使用渐变色或者阴影 效果 ,并在点击时添加弹出或者变色的动画。 另外,登录界面应该具备良好的交互性和易用性。可以通过添加实时输入提示、自动填充或者密码可视化等功能来提升用户体验。还可以在输入错误时,以动画的方式给出错误提示,并联动键盘出现/消失。 最后,需要保证登录界面在各种 移动 设备上的适配性。可以使用响应式设计来调整界面布局和样式,确保在不同屏幕尺寸下都有良好的显示 效果 。 总之,设计漂亮的H5 CSS 3 移动 登录界面需要考虑颜色、字体、布局、动效、交互性和适配性等多个方面。只有将这些因素综合考虑,才能设计出令人满意的登录界面。 ### 回答3: 移动 的登录界面在设计上有很多创意和灵感可以融入,通过使用H5和 CSS 3的特性,可以创建漂亮而且吸引人的登录界面。 首先,可以利用 CSS 3中的渐变特性为登录界面添加背景色。可以使用线性渐变或径向渐变来创建各种炫目的背景 效果 ,使登录界面更加醒目和吸引人。 其次,可以使用 CSS 3中的动画特性为登录界面添加动态 效果 。例如,可以使用过渡特性实现元素的平滑过渡和渐变 效果 ,或者使用关键帧动画实现元素的连续动画 效果 ,例如按钮的闪烁或图标的旋转。 另外,可以使用H5提供的表单元素和属性来优化登录界面的交互体验。例如,可以使用输入类型属性设置输入框的类型,例如邮箱、密码或电话号码,并使用placeholder属性为输入框提供提示信息。还可以使用required属性设置字段为必填项,使用pattern属性限制输入的格式。 此外,可以使用H5中的LocalStorage或SessionStorage来实现记住密码的功能。用户在登录后选择记住密码,可以将其用户名和密码保存在本地存储,以便下次打开应用时自动填充登录信息。 最后,还可以使用H5提供的响应式布局和媒体查询功能来适配不同尺寸的屏幕,使登录界面在不同设备上都能够呈现出最佳的显示 效果 。 总之,通过巧妙地运用H5和 CSS 3的特性,可以设计出漂亮而且充满创意的 移动 登录界面,提升用户的使用体验和吸引力。