HTML CSS3 实现文字和输入框组合效果

最新推荐文章于 2023-02-07 10:42:45 发布
最新推荐文章于 2023-02-07 10:42:45 发布
阅读量487 收藏 1
点赞数
分类专栏： HTML5



 

 

 

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<title>发送微博页面</title>

<style>
html{padding:0px;margin:0px;}
body{padding:0px;margin:0px;text-align:center;background-color:#f4f4f4;}

/** 弹出层背景 **/
.pop-bg{background-color:black;filter:alpha(opacity=10); -moz-opacity:0.1; -khtml-opacity: 0.1; opacity: 0.1;border-radius: 15px;box-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 4px rgba(188, 188, 188, 0.5);}
.pop-body{padding:10px;}
.pop-body-title{float:left;border-radius: 10px;background-color:#769fce;width:100%;border:1px solid #4096ee;}
.title-text{float:left;color: black; font-size: 22px;padding-left:10px;}
.title-close{float:right;cursor:pointer;padding-right:15px;padding-top:3px;}
.title-close a{text-decoration: none;color:black;font-weight:bold;padding-left:5px;padding-right:5px;}
.title-close a:hover{text-decoration: none;color:red;display: inline-block;background:#c0d3e7;border-radius: 5px;padding-left:5px;padding-right:5px;}

/** 内容部份 **/
.pop-body-context{
	border-radius: 10px;background-color:#769fce;width:100%;border:1px solid #4096ee;
	float:left;
	margin-top:15px;
}

.pop-body-c-title{
	float:left;
	
}

.a-btn{
	-moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    -moz-transition: all 0.3s linear 0s;
    background: -moz-linear-gradient(center top , #FEDA71 0%, #FEBB4A 100%) repeat scroll 0 0 transparent;
    border-color: #F5B74E #E5A73E #D6982F;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 1px #D3D3D3, 0 1px 0 #FEE395 inset;
    display: inline-block;
    float: left;
    height: 34px;
    margin: 10px;
	margin-right: 3px;
	margin-left: 4px;
    overflow: hidden;
    padding: 5px 130px 0 0px;
    position: relative;
	text-decoration: none;
}
.a-btn-text{
    padding-top:5px;
    display:block;
    font-size:14px;
    white-space:nowrap;
    color:#996633;
    text-shadow:0 1px 0 #fedd9b;
    -webkit-transition:all 0.3s linear;
    -moz-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
    transition:all 0.3s linear;
	font-weight:bold;
}
.a-btn-slide-text{
    position:absolute;
    top:35px;
    left:0px;
    width:auto;
    height:0px;
    background:#fff;
    color:#996633;
    font-size:13px;
    white-space:nowrap;
    font-family:Georgia, serif;
    font-style:italic;
    
    overflow:hidden;
    line-height:40px;
    -webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 1px rgba(0,0,0,0.5) inset;
    -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 1px rgba(0,0,0,0.5) inset;
    box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 1px rgba(0,0,0,0.5) inset;
    -webkit-transition:height 0.3s linear;
    -moz-transition:height 0.3s linear;
    -o-transition:height 0.3s linear;
    transition:height 0.3s linear;
}
.a-btn-icon-right{
    position:absolute;
    right:0px;
    top:0px;
    height:41px;
    width:130px;
    border-left:1px solid #f5b74e;
    -webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
    -moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
    box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
}
.a-btn:hover{
    height:65px;
    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
}	
.a-btn:hover .a-btn-text{
    text-shadow:1px 1px 1px rgba(0,0,0,0.2);
    color:#fff;
}
.a-btn:hover .a-btn-slide-text{
    height:40px;
}
.a-btn-slide-text input{
	float:left;
	margin-top:4px;
	margin-left:2px;
}
.pop-body-c-text{
	padding-left:3px;
}
.pop-body-c-textarea{
	width:780px;
	height:100px;
}
.pop-body-row-u{
	padding-top:5px;
	padding-left:10px;
}
.a-t-i-r-t{
	font-size:14px;height:20px;overflow:hidden;padding-top:8px;text-align:center;
}

.pop-body-images-l{
	padding:10px;
	
}

.pop-body-ims-panel{
	padding:10px;
}

.pop-b-i-i-img{
	border-radius:8px;
	float:left;
	position:relative;
	left:-20px;
	
}
.pop-b-i-i-unit{
	float:left;
}
.pop-b-i-i-unit input{
	float:left;
	position:relative;
	z-index:99;
}
</style>
	</head>

	<body>
		<br />
		<div style="float:left;width:820px;height:200px;position:relative;left:100px;">
			<div class="pop-bg" style="float:left;position:relative;width:820px;height:200px;"></div>
			<div class="pop-body" style="float:left;text-align:left;position:relative;top:-200px;width:98%;">
				<!-- 头部 -->
				<div class="pop-body-title">
					<div class="title-text">标题</div>
					<div class="title-close"><a href="#">关闭</a></div>
				</div>

				<!-- 内容部分 -->
				<div class="pop-body-context">
					<div class="pop-body-c-title">
						<a class="a-btn" href="#">
							<span class="a-btn-text">栏目名称</span>
							<span class="a-btn-icon-right"><div class="a-t-i-r-t">请输入</div></span>
							<span class="a-btn-slide-text"><input size="24"/></span>
						</a>

						<a class="a-btn" href="#">
							<span class="a-btn-text">中文名称</span>
							<span class="a-btn-icon-right"><div class="a-t-i-r-t" >请输入</div></span>
							<span class="a-btn-slide-text"><input size="24"/></span>
						</a>

						<a class="a-btn" href="#">
							<span class="a-btn-text">英文名称</span>
							<span class="a-btn-icon-right"><div class="a-t-i-r-t" >请输入</div></span>
							<span class="a-btn-slide-text"><input size="24"/></span>
						</a>

						<a class="a-btn" href="#">
							<span class="a-btn-text">适配类型</span>
							<span class="a-btn-icon-right"><div class="a-t-i-r-t" >请输入</div></span>
							<span class="a-btn-slide-text"><input size="24"/></span>
						</a>
					</div>

					
			</div>
		</div>


	</body>
</html>
 

 

f776527249
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html中加上边框的语句有哪些,如何将文字放在边框上？ (HTML,CSS)
weixin_34684880的博客
05-30 2137
我会亲自离开边界选项(这有点恶作剧)，并用不同的东西(可能更容易)去。以下是几个选项：1)使用CSS3 3D变换你尝试了这个，但没有工作。从你在问题中说的话，你在使用rotateY(它只会缩小)时发现的问题似乎是因为你没有将它与perspective结合起来。一旦你这样做了(并且用一些值来调整它们，到你想要的东西)，不仅div会偏斜，而且它的内容使它看起来像是与纸张效果相同的角度。html,bod...
CSS3实现镂空文字
ZuoYanDeHuangHun的专栏
04-14 1349
h1{ text-transform: uppercase; font-size: 48px; margin: 0 0 30px 0; -webkit-text-stroke: 1px black; color: white; } h2{ /*--通过阴影做出效果--*/
让输入框与文字并排显示
luo_yu_1106的博客
03-18 9937
&lt;input type="text" style="width:70px;display:inline;" class="form-control" name="" value="" id=""&gt; &lt;span style="margin-right:20px;"&gt;人&lt;/span&gt; 设
关于input标签前后有汉字并要求汉字与输入框在一条直线上
xqh_silence的博客
04-11 5957
具体做法是：首先将input标签用一个div标签包裹，并设置div的属性为：style='display:inline'，同时也设置input的属性为：style='display:inline'，input前后都可加汉字，实例如下： <div style="display:inline">微信红包&nbsp;&nbsp;<input type...
HTML\CSS-在边框中添加文本
Jackie_Mina
02-07 3992
HTML Fieldset
css ul li图片带边框文字混排CSS+Jquery (扩展版)
kingisking1的专栏
12-17 3439
css ul li图片带边框文字混排 (扩展版) 使用jquery使图片实现垂直居中
html5配合css3实现带提示文字的输入框
04-20
本主题将探讨如何利用HTML5和CSS3来实现一个带提示文字的输入框，这是一个常见的表单元素，能够为用户提供友好的交互体验。 首先，我们从HTML5的基本结构开始。在HTML5中，`<input>`标签用于创建各种类型的输入字段...
CSS3实现密码强度指示效果特效代码
03-20
CSS3（Cascading Style Sheets 第三代）提供了一系列强大的功能，使开发者可以创建出丰富的视觉效果和交互体验。本主题聚焦于如何使用CSS3来实现一个密码强度指示效果，帮助用户在输入密码时实时了解其安全性。 ...
HTML5+CSS3酷炫搜索框特效特效代码
03-20
CSS3（Cascading Style Sheets第三版）则负责网页的样式和布局，它的强大在于能够实现复杂的动画和过渡效果。在创建酷炫的搜索框特效时，我们可能会用到以下CSS3特性： 1. **伪类选择器**：如`:hover`、`:focus`、`...
浅谈html5标签css3的常用样式
09-27
CSS3则引入了大量的新样式和动画效果，极大地提升了网页的视觉表现力。 HTML5标签的常见新增包括： 1. `<header>` 和 `<footer>`：用于定义页面头部和底部区域。 2. `<nav>`：定义导航链接。 3. `<section>`：定义...
14种CSS3炫酷表单input输入框美化效果
12-20
14种CSS3炫酷表单input输入框美化效果
HTML+CSS基础总结（下）
weixin_44708911的博客
09-28 239
。ps的基本操作: 想要将图片转化成网页最简单的方式就是使用ps了。 ps的默认单位不是像素，注意修改PS的单位。 用ps拾色器、选取、标尺等修改。一般公司有ps的大神。但也需要常规操作。 小项目实战： 首先： 分析布局，写基本的div元素 CSS：修改样式 设置div元素的宽高 *{ margin：0； padding:0; }} 设置页面字体 body{ font:12px/1宋体； } 分割div元素： 使用ps查看图片的大小，...
css设置标题边框,css 如何让文字标题显示在边框上？
weixin_31539351的博客
08-03 1076
如图，如何让文字标题显示在边框上？<fieldset><legend>【使用方法】</legend></fieldset>如果需要更精确的扩展，fieldset的效果不好，还自己实现一个吧，如下：<style>.box{position:relative;border:1px solid red;}.box::before{content...
使 input 框与后面的文字处在同一行的方法
热门推荐
qq_36028750的博客
11-26 3万+
若一个 input 框在 td里面，且此时需要在 input 框后面加入一个文字描述，该如何避免input框和添加文字不在同一行的情况。 解决办法 限制 Input 输入框的长度，在 input 中加入 style="width: 55%;"进行限制即可。 &lt;script&gt; &lt;td class="font2 td_tiele_new" style="text-align:l...
html上下输入框合并,如何合并HTML输入框和按钮？ （附样本图像）
weixin_29723669的博客
06-04 1389
最简单的方法是将整个文本字段包装，从左侧的图标到右侧的按钮，一个div，一个图像。然后把一个文本框放在那个包装盒里，并且有一个像30px一样的页边空白;然后把一个div放在位于右侧的包装中，并为它添加一个点击监听器。HTML：CSS：#search_wrapper{background-image:url('/path/to/your/sprite.gif');width:400px;height...
html 文本框 自动拼接,HTML 中table的结构以及拼接
weixin_34082213的博客
06-09 332
表格基本上有如下几个标签构成:(1).标签用来创建表格的外部框架。(2).标签用来创建表格的行。(3).标签用来创建表头单元格。 t-head (4).标签用来创建tr行中的单元格。(5).标签用来创建标题。(6).标签用来创建表格的表头。 (一个table只能有一个)(7).标签用来创建表格的主体部分。(8).标签用来创建表格的页脚。thead, tbody tfoot从名字上就可以看, 这...
html文本框合并,HTML基础
weixin_39980575的博客
06-03 778
8种机械键盘轴体对比本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？之前写的东西都是关于 Java 的，最主要都是一些 Java 的核心语法或知识点，但是做 Java Web 开发的话，因为是要做出一个网站，所以那就必须要有展示信息的页面，那应该用什么展示呢?那就是超文本标记语言 HTML 了。1.HTML介绍HTML 是超文本标记语言，简单点说就是它其中的每个元素都代表着某些特殊含义，...
css文本输入框的样式
weixin_39884521的博客
05-20 1万+
.form-control { display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.428571429; color: #555555; vertical-align: middle; background-color: #ffffff; bo...
css样式之input输入框默认样式
04-26 1929
帮朋友写个简单的课程设计，后面会贴出来，项目刚开始就遇到一个坑（给input输入框设定样式，但是，点击后会出现蓝色边框），之前写其他的项目时也遇到过，百度一下资料解决了，现在又碰到了，写一下，留着备用（代码和效果图就就不粘出来了）。 查资料后才知道html的许多标签都有一些默认的属性，这次遇到的是input标签的默认属性（点击输入框时会出现 "蓝色边框" ）。话不多说，解决方法如...
css3实现文字3D效果
最新发布
07-14
要实现文字的3D效果，你可以使用CSS3的`transform`属性。下面是一个示例代码，展示了如何使用CSS3实现文字的3D旋转效果： ```html <!DOCTYPE html> <html> .text { font-size: 48px; font-weight: bold; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值