`

左右结构图片拼按钮

    博客分类:
  • css
 
阅读更多

<style>

.a-btn{

background:url(../image/btn.gif) left top no-repeat;/* background-position:left top;展现出左侧按钮的圆角 */

height:30px;

display:inline-block; /* 撑开 */

line-height:30px;

padding-left:15px;/*没有会遮住左侧的按钮的圆角  */

}

.span-btn{

background:url(../image/btn.gif) right -39px no-repeat;/* background-position:right -39px;展现出右侧按钮的圆角,此外,position: 向左-,向上- */

height:30px;

display:inline-block;

line-height:30px;

padding-right:15px; /* 文字据右侧圆角的距离 */

}

</style>

 

<body>

<div class="">

<a href="" class="a-btn"><span class="span-btn">提交</span></span></a>

</div>

 

</body>

分享到:
评论

相关推荐

    拼多多产品需求文档.docx

    拼多多产品需求文档 一、产品需求概述 拼多多是一家专注于 C2B 拼团的第三方社交电商平台,用户通过发起和朋友、家人、邻居等的拼团,...3. 分享图片按钮,将商品以图片的形式保存在本地相册中,同时出现一个 Diolo

    图片拼图:解决3X3的图片拼图-matlab开发

    标题中的“图片拼图:解决3X3的图片拼图-matlab开发”是指一个使用MATLAB编程语言开发的项目,旨在实现一个3x3图片拼图游戏。在这个游戏中,玩家需要通过移动9个单元格(3行3列)内的小图片块,恢复成原本完整的图片...

    VB拼图游戏原码,实现简单功能

    在这个拼图游戏中,窗体会包含所有的游戏元素,如拼图图片、按钮等。 2. **控件(Control)**:在窗体上,开发者可能使用了图片框(PictureBox)控件来显示拼图图片,这允许用户看到并操作拼图。此外,可能还有隐藏...

    jQuery图片轮播(无缝衔接)

    首先,我们需要构建HTML结构,包括图片容器、图片元素和导航按钮。通常,我们会在页面上创建一个`div`作为轮播容器,然后将所有图片作为子`img`元素放置其中,并隐藏除第一张之外的所有图片。另外,还要添加左右切换...

    JS仿QQ登录注册滑块填充拼图验证表单特效源码.zip

    - **HTML结构**:创建包含滑块、背景图像和滑块轨道的HTML元素,以及用于提交验证结果的按钮。 - **CSS样式**:定义滑块的外观和交互效果,如滑块的大小、颜色、过渡动画等。 - **JavaScript逻辑**:编写JS代码以...

    滑动门与css精灵综合应用.doc

    按钮的HTML结构应为三层嵌套,最外层的li标签负责平铺背景,a标签和span标签分别用于显示左右圆角。通过添加或删除active类名,我们可以控制哪个按钮处于选中状态。 性能优化方面,CSS精灵的主要优势在于减少了HTTP...

    手机端轮播图(焦点图)和hammer.js教程

    手机端轮播图,也被称为焦点图,是移动设备上常用的一种展示多张图片或内容的交互式设计。它能够高效地利用有限的屏幕空间,为用户呈现丰富的信息。在移动应用和网页设计中,轮播图是提高用户体验、吸引用户注意力的...

    java swing拼图游戏源码及实验报告

    8. **功能结构图**:功能结构图是系统设计的重要组成部分,它以图形方式展示了游戏各个功能模块之间的关系和流程,有助于理解代码的整体架构。 学习这个项目,开发者不仅可以熟悉Java Swing的使用,还能掌握图像...

    前端40款小游戏源码

    在这些小游戏的源码中,HTML用于创建游戏的界面元素,如按钮、图片和文字,通过标签来组织页面结构。例如,“切水果”游戏中的水果图片和玩家分数展示就是通过HTML来实现的。 2. **CSS(层叠样式表)**:CSS负责...

    Jquery全景图展示

    1. **HTML结构**:HTML文件会定义全景图的容器,以及可能的导航元素,如左右箭头、缩放滑块等。 2. **CSS样式**:CSS文件负责布局和美化,确保全景图正确显示并适应不同屏幕尺寸。 3. **JavaScript代码**:这里是...

    简单实现js轮播图效果

    轮播图是一种在网页上常见的组件,用于循环显示一系列的图片或者内容。本例将通过原生JS代码,展示一个基本的轮播图的实现方法。轮播图效果常见于商品展示、图片展示、广告等场景中。 在开始之前,我们需要了解轮播...

    360度全景展示插件pano.js

    这款插件充分利用了JavaScript和jQuery的强大功能,使用户能够通过鼠标拖动或者点击左右导航按钮来探索全方位的图像视角,为网站添加独特的视觉体验。 在实际应用中,pano.js插件的使用通常涉及到以下几个关键知识...

    竞品分析:电商产品条目设计.pdf

    - **布局**:常见布局形式为上下结构和左右结构,均包含图片、标题、热度信息、价格和转化按钮。 - **信息**:大部分竞品强调价格和优惠,而用户推荐理由通常对转化影响较小。 - **转化手段**:利用低价和限时...

    js简单比较好用的轮播特效

    2. 左右滑动:内容从一侧滑动到另一侧,模拟翻页效果。 3. 上下滑动:内容沿着垂直方向滑动,常用于空间有限的布局。 4. 缩放:内容在切换时进行放大或缩小,增加视觉冲击力。 5. 3D翻转:利用CSS3的3D转换,使内容...

    slidePuzzle:3x3 或 4x4 滑动图片游戏。 滑动块来完成图片。 使用 Java 制作

    在本项目中,开发者使用这些工具创建了游戏界面,包括显示图片、滑动块的面板、按钮等元素,使得用户可以直观地操作和查看游戏状态。 ### 4. 解谜算法:优先队列与曼哈顿距离 - **优先队列**:为了高效地找到解决...

    slide-puzzle-js:滑动益智游戏

    6. **图片处理**:如果游戏是基于图片的,需要处理图片切片,将大图分割成小块,然后分配给每个方块元素。这可以通过JavaScript或者服务器端脚本完成。 7. **游戏状态检测**:当拼图被正确解决时,需要有机制来检测...

    2021-2022计算机二级等级考试试题及答案No.5483.docx

    - 在Windows 98系统中,桌面不仅包括背景图片,还包含任务栏、开始菜单等元素,以及用户放置的快捷方式图标等。 - 用户可以通过桌面快速访问常用的应用程序、文件夹和其他系统功能。 - 此知识点强调了桌面在操作系统...

    易语言-黑月界面生成模块开源(一键生成黑月界面)

    分解合并结构优化(6月),并添加了一些常用组件事件(比如有按钮基本就有单击事件)适配黑月界面类模块3-3.7版。 1.1版:修复一处描述错误和一处多余的空格。 增加了超级编辑框转换成黑月的丰富文本框。 增加了超级...

    2021年职称计算机考试综合习题及答案(20).docx

    - **详细解释**: 要在 Word 中快速调整文档的左右边界,最直接且快捷的方式是通过**标尺**来进行。选项中的其他方法如工具栏、格式栏或菜单虽然也能间接地调整边界,但它们通常涉及更多的步骤,不如使用标尺来得直接...

Global site tag (gtag.js) - Google Analytics