`
ansili
  • 浏览: 54325 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
最近访客 更多访客>>
社区版块
存档分类
最新评论

〖Html代码〗单元文本框制作

阅读更多

 

<!---->

 

代码:
<div STYLE="
border-style:solid;border-width:5pt; border-color:red">日志文字</div>

说明:

   1、它会在你的文字外围生成一个红色边框,效果如框内显示。

         2、border-style:控制边框的效果

         3、border-width:控制边框的粗细,

         4、border-color:调整边框的颜色,可用形式如#xxxxxx的颜色数值

         5、这里可使用如#xxxxxx的颜色数值,当使用“solid”则为单一颜色的线形简单边框。

         6、Solid 简单线形边框   Double 简单双线边框   Groove 沟线立体效果边框 
              Ridge 脊线立体效果边框   Inset 嵌入线立体效果边框  Outset 浮出线立体效果边框
       dotted 简单的圆点边框 dashed 简单的虚线边框

         7、Border-left-style:solid (double, groove, ridge, inset, outset,dotted,dashed)定制边框样式
              Border-left-color: #xxxxxx定制边框颜色
              Border-left-width: xpt 定制边框粗细
              其他三个边框只要分别使用Right, Top, Bottom就可以了

代码:
<div STYLE="border-style:double;border-width:5pt; border-color:red">日志文字</div>

 

代码:
<div STYLE="border-style:groove;border-width:5pt; border-color:red">日志文字</div>

 

代码:
<div STYLE="border-style:ridge;border-width:5pt; border-color:red">日志文字</div>

 

代码:
<div STYLE="border-style:inset;border-width:5pt; border-color:red">日志文字</div>

 

代码:
<div STYLE="border-style:outset;border-width:5pt; border-color:red">日志文字</div>

 

代码:
<div STYLE="border-style:dotted;border-width:5pt; border-color:red">日志文字</div>

 

代码:
<DIV style="BORDER-RIGHT: #ff69b4 10pt groove; BORDER-TOP: #ff69b4 10pt groove; BORDER-LEFT: #ff69b4 10pt groove; BORDER-BOTTOM: #ff69b4 10pt groove">
<P>文字</P></DIV>

 

代码:
<div style= "border-top-style:Ridge;border-right-style:Ridge;border-left-style:Ridge;
border-bottom-style:Ridge;border-width:7pt; background-color:#8B008B"><div style="width:100%;height:100%;background-color:#E6E6FA;">文字</div></div>

 

代码:

<DIV style="WIDTH: 484px; HEIGHT: 188px">
<DIV style="FILTER: Dropshadow(color=#cccccc,offX=10,offY=10); WIDTH: 95.43%; FONT-FAMILY: Verdana; HEIGHT: 28.57%" align=center>
<DIV style="BORDER-RIGHT: #ffffdd 3px dotted; BORDER-TOP: #ffffdd 3px dotted; FONT-SIZE: 9pt; BORDER-LEFT: #ffffdd 3px dotted; WIDTH: 317px; LINE-HEIGHT: 11pt; BORDER-BOTTOM: #ffffdd 3px dotted; FONT-FAMILY: Verdana; HEIGHT: 110px; BACKGROUND-COLOR: #ffffcc" align=left><FONT face=新細明體 color=#333333>
<P align=center><FONT color=#cc99ff></FONT>&nbsp;</P>
<P align=center><FONT color=#cc66ff>日志文字</FONT></P>
<P align=center><FONT color=#cc66ff>&nbsp;</FONT></P>
<P align=left><FONT color=#cc66ff></FONT>&nbsp;</P></FONT></DIV></DIV></DIV>

 

文本框代码:
<DIV style="BORDER-RIGHT: #cc6600 5px dotted; PADDING-RIGHT: 10px; BORDER-TOP: #cc6600 5px dotted; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; BORDER-LEFT: #cc6600 5px dotted; PADDING-TOP: 10px; BORDER-BOTTOM: #cc6600 5px dotted; BACKGROUND-COLOR: #ffffff">文字</DIV>

 

文本框代码:
<div STYLE="border-style:dotted;border-width:6pt; border-color: #808080">
<div style="width:100%;height:100%;background-color:#7B6699;">文字</div></div>

 

文本框代码:
<div STYLE="border-style:dotted;border-width:4pt; border-color: #448CBB">
<div style="width:100%;height:100%;background-color:#A0AEE7;">文字</div></div>
 
文本框代码:
<div STYLE="border-style:dashed;border-width:4pt; border-color: #448CBB">
<div style="width:100%;height:100%;background-color:#A0AEE7;">文字</div></div>

 

 

   原文:http://blog.readnovel.com/article/htm/tid_361647.html

分享到:
评论

相关推荐

    html透明文本框

    就是一个简单的html网页制作,css的设置而已,简单的几句话而已 修改文本框格式,以表现的更为友好 该资源并没收取资源分 所以没什么不值得所言

    jQuery计算文本框可输入字数代码.zip

    jQuery计算文本框可输入字数代码基于jquery-2.2.3.min.js制作,动态计算文本框可输入字数统计。

    HTML文本框参考样式及常见操作技巧大全

    网页设计中,常常要使用html文本框来收集一些用户信息或是制作登录页,虽然只是简单的输入框,但是如果加入一些美化设计会使你的页面看起来更加有吸引力,下面就给大家提供了一些html文本框的参考样式和常见的html...

    js文本框输入内容智能提示效果

    本文实例讲述了js文本框输入内容智能提示效果代码。分享给大家供大家参考。具体如下: 运行效果截图如下: 大体思路: 1.监听文本框事件。这里是用的keyup事件。大家可以尝试用onchange事件。不过感觉keyup事件的...

    零基础学HTML CSS源代码

    第1章(源代码\第1章) 示例描述:本章演示HTML基本知识 HTML基本标记.html HTML基本标记的用法。 我的第一张网页.html 演示我的第一张网页。 第2章(源代码\第2章) 示例描述:本章演示常用HTML标记和格式 注释....

    javascript常用代码大全.html

    7、无边框效果的制作 8、连动下拉框技术 9、文本排序 10,画图类,含饼、柱、矢量贝滋曲线 11,操纵客户端注册表类 12,DIV层相关(拖拽、显示、隐藏、移动、增加) 13,TABLAE相关(客户端动态增加行列,模拟进度条...

    利用HTML、CSS 实现带表情的评论框的制作教程

    主要介绍HTML带表情的评论框,表情通过Json数据加载,可以根据自己的喜好改变表情。本评论框代码为HTML,CSS,JQ三个方面的代码,html的代码还是比较简单的,大家可以学习一下

    jQuery聊天表情代码转换图片.zip

    jQuery聊天表情代码转换图片基于jquery.1.11.1.min.js制作,点击表情图,文本框显示表情代码。

    实现Html转PDF itextpdf-5.5.5.jar

    套打之前需要先利用Adobe Acrobat Pro DC先做出要打印证书的模板,举例如下图,为对应的文本框赋予名称(ID),后续可在Java程序中根据ID给对应的文本框赋值(模板可存在Img头像,本文忽略)。模板制作完毕后,将xxx...

    jQuery表情图片选择器代码.rar

    jQuery表情图片选择器代码基于bootstrap.min.js、jquery-2.1.1.min.js和emoji-picker.js制作的表情图片选择器,输入文本框中插入表情图片。

    VBScript语言参考手册

    如果使用 Microsoft® Internet Explorer 查看用以下代码制作的页面,您会看到一个旁边带有按钮的小文本框。 &lt;HTML&gt; &lt;HEAD&gt;&lt;TITLE&gt;简单验证&lt;/TITLE&gt; [removed] &lt;!-- Sub Submit_OnClick ...

    javascript代码常用大全

    7、无边框效果的制作 8、连动下拉框技术 9、文本排序 10,画图类,含饼、柱、矢量贝滋曲线 11,操纵客户端注册表类 12,DIV层相关(拖拽、显示、隐藏、移动、增加) 13,TABLAE相关(客户端动态增加行列,模拟...

    php实验表单页面

    实验1-2:熟悉form标记、CSS样式及JS的应用,1、 仿照下图做一个注册网页(register.php),该页面包含一个表单,表单中包含以下信息

    javascript 常用代码大全

    7、无边框效果的制作 8、连动下拉框技术 9、文本排序 10,画图类,含饼、柱、矢量贝滋曲线 11,操纵客户端注册表类 12,div层相关(拖拽、显示、隐藏、移动、增加) 13,tablae相关(客户端动态增加行列,模拟...

    探索Emberjs制作一个简单的Todo应用

    目标 使用Emberjs制作一个简单的Todo应用,实现这样一个...html代码如下: 代码如下: &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=”utf-8″&gt; &lt;title&gt;Ember–第一个应用&lt;/title&gt;

    jQuery随输入内容变化的表单代码.zip

    jQuery随输入内容变化的表单代码基于jquery-1.11.1.min.js制作,是一款会随着输入内容的变多变少而自动变长变短的输入文本框表单代码。

    JAVA上百实例源码以及开源项目源代码

    Java波浪文字制作方法及源代码 1个目标文件 摘要:Java源码,初学实例,波浪文字  Java波浪文字,一个利用Java处理字符的实例,可以设置运动方向参数,显示文本的字符数组,高速文本颜色,显示字体的 FontMetrics对象...

    智动伪原创工具1gxsw v1.51

    10、支持含HTML代码的内容伪原创,不影响HTML代码 注意:智动伪原创工具需要安装微软.net 2.0 运行库。 智动伪原创工具 v1.51 加强自动识别文件编码内核,有效自动识别各类文件编码 智动伪原创工具 v1.5 HTML编辑器...

    明日科技《C#示例源代码》(17-20)

    注意:本源代码共有20章节,分五部分上传,名称分别为:明日科技《C#示例源代码》(1-4)、明日科技《C#示例源代码》(1-4)、明日科技《C#示例源代码》(5-8)、明日科技《C#示例源代码》(9-12)、明日科技《C#...

Global site tag (gtag.js) - Google Analytics