`
ansili
  • 浏览: 55116 次
  • 性别: 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

分享到:
评论

相关推荐

    添加文本框

    在网页设计和开发中,jQuery(通常简称为JQ)是一种广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作等任务。本文将详细介绍如何使用jQuery来动态地添加文本框,以及相关的HTML、CSS和JavaScript...

    动态增加html表单(文本框)

    这段代码将在名为'PlaceHolder1'的控件中添加一个新的文本框。 5. **交互与数据提交**:在JavaScript动态创建的表单元素与ASP.NET/C#后端交互时,可能需要额外处理,因为默认情况下,只有在HTML页面加载时存在的...

    dreamweaver怎么制作文本框? dw文本框的两种制作方法

    方法一:使用HTML代码创建文本框 HTML(HyperText Markup Language)是制作网页的基础语言。在HTML中,文本框通常使用`&lt;input&gt;`标签来创建,配合type属性指定为"text"。除此之外,还可以使用placeholder属性来提供...

    霓虹灯文本框,请大家笑纳

    至于压缩包中的“tanjunTest”文件,可能是用于实现霓虹灯文本框的一个示例项目或代码文件。它可能包含了实现这种效果所需的CSS样式、JavaScript代码,或者是使用某种图形编辑软件创建的预设文件。如果要学习或使用...

    html班级网站综合案例源代码

    在这个“html班级网站综合案例源代码”中,我们可以深入学习HTML的运用和实践,这对于初学者来说是一个宝贵的资源。 首先,源代码通常包含一系列的HTML文件,这些文件决定了网页的布局和内容。在“综合案例源代码”...

    js表单文本框内容互换代码.zip

    总的来说,"js表单文本框内容互换代码"是一个关于前端开发的实践案例,它涉及了HTML5表单、CSS样式以及JavaScript和jQuery的交互操作。这个例子对于学习前端开发,尤其是对表单交互有需求的开发者来说,是一个很好的...

    HTML 聚美优品新手指南源代码

    这个“HTML 聚美优品新手指南源代码”提供了对初学者学习HTML的一个实际应用案例,特别是关于网站登录和注册页面的构建。在深入探讨之前,我们首先了解HTML的基本结构。 HTML文档由一系列元素(或标签)组成,这些...

    JQ 多行文本框高度变化

    在IT行业中,jQuery(简称JQ)是一种广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画制作等任务。本篇文章将详细探讨"JQ多行文本框高度变化"这一主题,它是前端开发中常见的一种需求,尤其在用户输入多行...

    HTML制作图形验证码框那种=文本框+滑块 的效果.zip

    HTML制作的图形验证码通常包括一个文本框供用户输入看到的验证码文字,以及一个交互元素,如滑块,让用户通过某种方式验证他们是真实的用户。在"HTML制作图形验证码框那种=文本框+滑块的效果.zip"这个压缩包中,包含...

    jQuery Input文本框创建标签代码

    &lt;title&gt;jQuery Input文本框创建标签代码 &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; 请输入标签"&gt; &lt;ul id="tags-container"&gt;&lt;/ul&gt; &lt;/html&gt; ``` 接下来,我们需要引入jQuery库...

    jQuery文本框宽度随着输入内容而自动变化代码.zip

    在IT领域,jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。这个压缩包“jQuery文本框宽度随着输入内容而自动变化代码.zip”提供了一个实用的jQuery解决方案,使...

    jquery表单文本框添加文字标签

    在网页设计和开发中,jQuery 是一个非常流行的 JavaScript 库,它简化了DOM操作、事件处理、动画制作等任务。本文将深入探讨如何使用 jQuery 在表单文本框中添加文字标签,以提升用户界面的易用性和美观性。 首先,...

    jQuery文本框输入文字计数显示代码.zip

    "jQuery文本框输入文字计数显示代码.zip" 提供了一个解决方案,帮助开发者创建一个能够实时显示输入字符数的文本框,以此来限制用户的输入长度,提升用户体验,特别是在需要用户填写特定字数限制的表单场景下。...

    JQ 文本框得到失去焦点

    在JavaScript的世界里,jQuery(简称JQ)是一个广泛使用的库,它简化了DOM操作、事件处理、动画制作等任务。本文将围绕“JQ文本框得到失去焦点”这一主题进行详细讲解,帮助开发者理解如何利用jQuery来监听文本框...

    网页制作精华代码大全

    根据给定的文件信息,以下是对“网页制作精华代码大全”的详细解读,涵盖了网页制作中的各种实用技巧和代码,旨在帮助网页开发者优化用户体验,增强网页功能,并提高安全性。 ### 1. 屏蔽鼠标右键 ```html ...

    一款jquery text文本框添加删除标签代码.zip

    本资源"一款jquery text文本框添加删除标签代码.zip"提供了一个实现用户在文本框中动态添加和删除标签的功能。这个功能在很多现代网站中常见,比如用于输入关键词、兴趣爱好或分类等场景。 首先,让我们了解一下...

    jQuery文本框回车创建标签代码.zip

    本资源"jQuery文本框回车创建标签代码.zip"提供了一个功能,即用户在文本框中输入文字后按回车键,可以创建一个标签,同时,用户还可以通过点击按钮获取已输入的所有标签值。这个功能常用于诸如标签云、关键词管理...

    jquery 强制设置文本框处于英文输入法状态

    这段代码会在用户在文本框中输入时,确保输入法被切换至英文模式。然而,需要注意的是,这种方法可能并不适用于所有浏览器和设备,因为`inputMode`和`imeMode`属性的兼容性可能有限。对于老旧浏览器,可能需要采用...

    CSS文本框+FLASH+XML图片文字样式效果[精]

    此外,"txt源文件"可能包含了Flash动画的ActionScript代码或者CSS文本框样式的具体定义,这些源文件对于开发者来说非常重要,因为它们揭示了项目的内部工作原理,便于学习和修改。 总的来说,这个项目展示了如何将...

Global site tag (gtag.js) - Google Analytics