您的位置：首页 > 编程技术 > html  >  如何让input点击没虚线框

如何让input点击没虚线框

 更新时间：2016年9月20日 19:01  点击：2171
在网页设计时都会碰到一些问题，就是input点击时会出现虚线框哦，那我们有的朋友不喜欢所以就选择一个可以去除的办法了。

<style type="text/css">
<!--
.login_button {
 background-image: url(/images/login_button.jpg);
 background-repeat: no-repeat;
 background-position: left top;
 margin: 0px;
 padding: 0px;
 height: 46px;
 width: 48px;
 border: none;
 background-color: #FFCC00;
}
-->
</style>
</head>
<body>
<input type="submit" class="login_button" tabindex="4" value=" 确定" width="48px" height="46px" border="0px" />
</body>

解决方法：

，< input > 内加 onFocus="this.blur()"就行了

 

提供个简单的js入代码实现了，下面我们来看看js判断文本框的输入值是否有值源码吧。

这是一个基本的程序了用来判断用户输了数据没有，下我们先看看html代码

<form name = gfrom >

<input  type=text name=textvalue />

<input name=aa type=submit value=ok onclick="checkGoogleValue()" />

</form>

function checkGoogleValue(){
var textvalue=document.gform.keyword.value;
 if(textvalue==""){
  document.gform.keyword.value="请输关键词";
  return false;
 }
 else if(textvalue.length<2){
  alert("请输入大于2个字的关键词");
  return false;
 }
 else if(textvalue=="请输关键词"){
  document.gform.keyword.value="";
  return false;
 }
}
function check(){
var textvalue=document.formsearch.keyword.value;
 if(textvalue==""){
  document.formsearch.keyword.value="请输关键词";
  return false;
 }
 else if(textvalue.length<2){
  alert("请输入大于2个字的关键词");
  return false;
 }
 else if(textvalue=="请输关键词"){
  document.formsearch.keyword.value="";
  return false;
 }
 
 
}

下面这个就不说了和第一个判断用户输为空是一样的做哦。

css 使超链接的焦点变大

background="images/2law_20.jpg"  是一张 73*25的背景图

.alink{
        display:block;
        width:73px;
        height:25px;
        text-align:center
       
}


如果加大width 的值，背景会重复
怎么才能保持原来的样式，而只是超链接的焦点范围变大呢？

 

焦点变大 这个词第一次听  

用<li><a></a></li>这样的结构就可以  前后大小要一样

<style>
.alink{
        display:block;
        width:173px;
        height:125px;
        text-align:center
        
}
</style>

<table><tr>
<td width="73" align="center" style="background: url

(http://www.111cn.net/images/images_new/logo.gif) no-

repeat"><strong><a href="index.html" class="alink">返首页

</strong></a></td>
</td></tr></table>

.alink{
        display:block;
        width:173px;
        height:125px;
        text-align:center
        
}

下面来看看我提供一下dedecms专题页面的教程吧，

一个网站通常会在不同时期推出一些针对性的专题内容，专题的功能其实就是将站点的内容根据特定的需求进行一次检索，将这些不同形式的内容进行一次整合，这个我们可以看看一些大的门户网站，例如新浪、搜狐，他们有自己的专题频道。一个专题可以包含几个不同栏目的内容或者包含不同内容模型如：文章、图片、音频、视频等，不同的专题需要有自己符合当时环境的页面风格，比如在元旦、新年就需要红色主题的专题模板，在春天、夏天就需要绿色主题的专题模板等。一个好的专题容易让网站会员更全面的了解相关信息，以增强对网站的关注度，下面我们介绍如何使用DedeCMS的专题功能来制作一个专题。

　　我们以超级管理员身份登陆后台，在系统的［核心］-［专题管理］中对专题进行管理。

点击图片打开新窗口浏览



　　因为这里的常用管理同文档管理类似，一些常用操作如添加、删除、更新、推荐这些操作在这里不做冗述，本教程主要介绍如何通过专题结合模板文件制作出自己的专题页面。

　　制作一个专题页面，需要准备2样东西：内容、模板，当然如果你没有自己设计的模板文件，系统默认是自带了一套专题页的风格的，可以在后台［核心］-［内容模型管理］，点击专题类型的模板会查看到以下内容：

文档模板：/templets/default/article_spec.htm ［修改］
列表模板：/templets/default/list_spec.htm ［修改］
频道封面模板：/templets/default/index_spec.htm ［修改］


 
　　这几个默认模板文件用户可以自己进行全局统一修改，但一般情况下都是在添加专题时在常规参数的“专题模板”中进行指定。

　　当然有一些专题也不必用到已经发布在内容管理系统中的内容，这种专题直接可以用静态页面就可以完成，不需要标签进行调用，但又希望在专题列表中显示出来，为了解决这个问题，建议用户在制作专题页时候把专题页面做成一个不含标记的模板文件，在添加专题时候指定模板即可。

　　接下来我们介绍下织梦的专题功能是如何划分的。我们以chinaz两个专题页面为例：DedeCms V5.3经典解析与揭秘(http://www.chinaz.com/zt/dedecms/)。

　　大家可以看出来admin5的专题是使用了统一的专题模板生成的，这种专题只需要网站管理员选择组织好网站专题内容，然后发布即可呈现出这类的网站专题。而chinaz的专题使用了独立的模板文件，这样使得专题更有特色，阅读效果更为明显。

　　DedeCMS自带了专题页面的模板文件能够满足大部分人对专题的要求，下面我们来介绍如何使用默认的模板文件来创建一个专题。

　　以超级管理员身份登陆系统后台，进入专题管理页面，进入专题添加页面。

　　在常规参数中添加专题的专题名称、责任编辑、专题说明、关键字、主分类，接下来进入“专题文档”选项卡来选择相关专题节点的内容。

　　在添加之前我们先明白一个概念：节点。

　　所谓节点就是一个专题中相同分类内容的一个组合，如下图中，有2个节点：Coreldraw 9 速成教程、Coreldraw 9 教程总汇，每个节点选取了系统中一些文章。

点击图片打开新窗口浏览



　　添加以上两个节点在系统设置中可以通过2种方式进行添加，第一种就是指定文章列表，在单个节点中“选择节点文章”，这种方式比较精确的指定专题节点的内容，在节点内容少量的情况下是首选。第二种就是自动获取文档的方式，这种方式只需要输入节点的“关键字”即可自动搜索出含有关键词文章的内容添加到内容列表中。

点击图片打开新窗口浏览



　　这样一来我们就完成了专题内容的添加，以这样的形式发布一个专题，其专题页面的样式是系统默认的系统样式，接下来我们就来介绍如何使用专题模板标签来制作特殊的专题页。

　　首页制作专题的模板页面需要了解基本的织梦模板引擎的一些概念，需要知道什么是模板引擎，织梦的一些模板标记的使用，这里如果您会使用arclist标记基本上就可以制作属于自己的专题模板。

　　专题涉及到的模板文件有2个文件：

　　/templets/default/article_spec.htm：专题模板文件，这个模板决定你的网站专题页面的样式，是制作模板页面必备的文件

　　/templets/system/channel_spec_note.htm：系统底层的专题节点模板，在制作节点的时候需要对其进行一定的修改

　　这两个文件是决定你专题样式的模板重要文件，当然这里还有一个底册模板(innertext)，这个底层模板在每个节点处都可以单独指定。

　　这里还需要用户知道的一个专题节点的模板标签：{dede:field.note noteid='识别ID'/}，这个标签是用来生成专题页面的文档列表的。

　　设计专题页面模板

　　我们首先用网页制作相关工具来设计一个专题页面的模板文件，当然我们这里因为是做一个示例，重点是讲解如何从页面到模板文件这个过程，所以模板文件的样子比较简单，如果是专业的美工人员，可以设计出各式各样专业的模板文件。

　　我这里只是在网页制作工具中使用Dreamweaver制作出一个专题模板的样子，专题主要分为2个部分，专题内容简介以及节点文章，当然这里专题的内容简介我已经固化在了专题模板文件中，用户也可以使用模板标签{dede:field name='description'/}，然后在后台添加专题简介中完成。

点击图片打开新窗口浏览



　　加入专题页模板标签

　　从上面的内容我们知道，织梦的模板需要在页面中加入织梦模板标签后才能完成制作，接下来我们来加入模板标签。在加标签之前，我们先将上面设计出来的模板文件保存为"/templets/default/article_spec2_templets.htm"，保存完成以后我们可以修改这个页面，加入标签，使其变成专题页面的模板。

　　首先我们加入常用标签{dede:field.title/}_{dede:global.cfg_webname/}，这个标签是加入在模板文件<title>和</title>之前，用于解析成为专题标题的，{dede:field.title/}代表是你在后台添加的专题名称，{dede:global.cfg_webname/}指的是你的网站名称，经过织梦的系统解析后成为：DedeCMS V5.3相关内容专题_织梦非官方演示站点。

　　当然，在seo方面可以在<head>和</head>之间加入以下代码：

<meta name="keywords" content="{dede:field.keywords/}" />
<meta name="description" content="{dede:field.description function='html2text(@me)'/}" />



　　这个代码就是将你在添加专题时候设置的关键字以及专题说明添加进页面。

　　接下来最重要的就是专题节点部分的添加了，因为节点部分主要是列表，所以涉及到一个底层模板(innertext)的概念，底层模板在织梦的标签语法简介中已经有相关说明。

　　附：模板标签语法简介：http://help.dedecms.com/v53/archives/templets/start/。

　　因为我们从模板文件中可以找出单挑记录循环的内容为：

<tr>
<td>站长学院<a href="#" target="_blank">dedecms列表页title优化方法</a></td>
</tr>



　　所以我们根据arclist的相关标记可以得到底层模板(innertext)：

<tr>
<td>[field:typename/]<a href="[field:arcurl /]" target="_blank">[field:title /]</a></td>
</tr>


 
　　这个底层模板我们在添加节点的时候可以进行指定：

点击图片打开新窗口浏览



　　接下来我们在节点部分加入节点标签{dede:field.note noteid='标识'/}，因为我们这里有2个节点名称，标识ID分别为：use（使用介绍）、exp（体验说明），所以我们替换模板页面中循环部分：

<table width="100%" height="53" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="2%" bgcolor="#66CC66">使用介绍</td>
<td width="98%" align="left"><table width="80%" border="0" cellpadding="0" cellspacing="3" id="nlist">
{dede:field.note noteid='use'/}
</table></td>
</tr>
</table>



　　这样一来，我们的专题模板就制作完成了，我们将其另存文件名为"/templets/default/article_spec2.htm"，这个文件就是我们的专题模板文件。

　　修改节点容器模板

　　在我们上面设计的模板中，有2个节点，因为我们其中有一部分内容已经固化在模板中，所以如果直接发布内容，会出现多出了节点标题的情况，一个节点生成为页面的时候，DedeCMS会读取他的节点容器模板，所以我们需要对节点容器模板进行一些修改，我们打开"/templets/system/channel_spec_note.htm"这是默认的节点容器模板。

<dl class="tbox">
<dt><strong>~notename~</strong></dt>
<dd>
<ul class="d1 ico3">
~spec_arclist~
</ul>
</dd>
</dl>



　　这里需要介绍2个标记：~notename~和~spec_arclist~

　　~notename~：节点的名称，在系统解析时候会在节点中将这个标签解析为当前设置的名称。

　　~spec_arclist~：节点内容列表，系统读取底层模板文件，并解析成节点设置的内容同这个标记进行替换

　　这个节点容器解析后的内容再同{dede:field.note noteid='标识'/}标记进行替换，完成模板的解析，所以我们在这里需要对其进行一些修改，因为前面设计时候的节点名称已经固化在模板文件中，所以这里不涉及到这部分的内容。我们只要将冗余部分的代码去除，直接使之变为：

~spec_arclist~



　　如果不想影响到其他模板文件的使用我们将其另存为"/templets/system/channel_spec_note_dedecms.htm"，我们在添加专题时候可以独立设置为：

点击图片打开新窗口浏览



　　至此我们完成了专题页面模板文件的制作，接下来做的只需要像上面所说的一样，直接选取相应的内容添加节点发布即可。

　　织梦的专题功能还有更为强大的功能，需要我们织梦的用户去用心体会，本文中已经较为全面介绍了如何使用专题功能，文章中设计到的一些文件可以在附件中下载，页面演示可以查看：http://www.dedemo.cn/news/cms/2008/1231/640.html。

html 基本入门很简单哦，我们只介绍他的一些基本的功能与用用法哦，好了费话不说多了我们来看看吧。

HTML表单中主要包括下列元素:
button 普通按钮    radio 单选按钮    checkbox 复选框    select 下拉菜单    text 单行文本框    textrea 多行文本框    submit 提交按钮    reset 重填按钮
用HTML设计表单常用的标记是:<form>,<input>,<option>,<select>,<textarea>和<isindex>等标记.
1.<form>表单标记:该标记的主要作用是设置表单的起止位置,并指定处理表单数据程序的文件名或URL地址,其基本语法结构是: <form action=url method=get|post name=value onreset=function onsubmit=function target=window> </form>
action :用于设置处理表单数据程序url的地址,这样的程序通常是CGI应用程序,采用电子邮件方式时,用action="mailto:你的邮件地址".
method :指定数据传送到服务器的方式,有两种主要方式:当method=get时,将输入数据加在action指定的地址后面传送到服务器,当method=post时,则将输入的数据按照HTTP传输协议中的post传输方式传送到服务器,用电子邮件接收用户信息时在用这种方式.
name :用于设置表单的名称.
onrest和onsubmit :主要针对reset和submit按钮,它们分别设置了在按下相应的按钮之后要执行的子程序.
target :指定输入数据结果显示在哪个窗口,需要<frame>标记配合使用.
2.<input>表单输入标记:此标记在表单中使用频繁,大部分表单内容需要用到此标记,其语法是:<inpur aligh=left|right|middle|top|bottom name=value type=text|textarea|password|checkbox|radio|submit|reset|file|hidden|image|button value=value src=url checked maxlength=n size=n onclick=function onselect=function>
align :用于设置表单的位置是靠左(left),靠右(right),靠中(middle),靠上(top),靠下(bottom).
name :设置当前变量名称.
type :决定了输入数据的类型,各项的意思是:
type=text :表示输入单行文本.
type=textarea :表示输入多行文本.
type=password :表示输入的数据为密码,用星号表示.
type=checkbox :比赛哦是复选框.
type=radio :表示单选框.
type=submit :表示提交按钮,数据将被送到服务器.
type=reset :表示清除表单数据,以便重新输入.
type=file :表示插入一个文件.
type=hidden :表示隐藏按钮.
type=image :表示插入一个图片.
type=bueeon :表示普通按钮.
value :用于设置输入默认值,即如果用户不输入的化,就采用默认值.
src :是针对type=image的情况来说的,用于设置图像文件的地址.
checked :表示选择框中此项被默认选中.
maxlength :表示在输入单行文本时的最大的输入字符个数.
size :用于设置在输入多行文本时的最大输入字符数,采用width,height方式.
onclick :表示在按下输入时调用指定的子程序.
onselect :表示当前项被选择时调用指定的子程序.
3.<select>下拉菜单标记:用<select>标记可以在表中插入一个下拉菜单,它需与<option>标记联用,因为下拉菜单的每个选项要用<option>标记来定义,<select>标记的语法是:<select name=nametext size=n multiple>
name :设置下拉菜单的名称.
size :设置菜单框的高度,也就是一次显示几个菜单项,一般默认值(size="1").
multiple :设置为可以进行多选.
4.<option>选项标记:该标记为下拉菜单中的一个选项其语法是:<option delected value=value>
selected :表示当前项被默认选中.
value :表示该项对应的值在该项被选中之后,该项的这就会被发送到服务器进行处理.
5.<textarea>多行文本输入标记:这是一个建立多行文本输入框的专用标记,其语法是:<textarea name=name cols=n rows=n wrap=off|hard|soft>
name :文本框名称.
clos :宽度.
rows :高度.(行数)
wrap :换行控制.
off :不自动换行.
hard :自动硬回车换行,换行标记一同被传送到服务器中去.
soft :自动软回车换行,换行标记不会传送到服务器中去.

[!--infotagslink--]

相关文章

  • 利用JS实现点击按钮后图片自动切换的简单方法

    下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-10-25

  • vue:el-input输入时限制输入的类型操作

    这篇文章主要介绍了vue:el-input输入时限制输入的类型操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-05

  • JS双击变input框批量修改内容

    这篇文章主要介绍了JS双击变input框批量修改内容的实现代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下...2017-01-09

  • vue element table中自定义一些input的验证操作

    这篇文章主要介绍了vue element table中自定义一些input的验证操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18

  • vue 清空input标签 中file的值操作

    这篇文章主要介绍了vue 清空input标签 中file的值操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-21

  • php中php://input的用法详细

    在使用xml-rpc的时候，server端获取client数据，主要是通过php输入流input，而不是$_POST数组。所以，这里主要探讨php输入流php://input。 下面的例子摘取的是wordpres...2016-11-25

  • JavaScript判断按钮被点击的方法

    javascript代码判断按钮是否被点击了在项目中经常会遇到这个需求，今天小编抽点时间给大家分享一段代码关于javascript判断按钮是否被点击的方法，感兴趣的朋友一起学习吧...2015-12-14

  • 关于input全选反选恶心的异常情况

    这篇文章主要介绍了关于input全选反选恶心的异常情况的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下...2016-07-29

  • 微信小程序点击滚动到指定位置的实现

    这篇文章主要介绍了微信小程序点击滚动到指定位置的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-05-23

  • input框中的name和id的区别

    这篇文章主要介绍了input框中的name和id的区别介绍，非常不错，具有参考借鉴价值,需要的朋友可以参考下...2016-11-22

  • 如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标

    从IE 10开始，type=”text” 的 input 在用户输入内容后，会自动产生一个小叉叉（X），方便用户点击清除已经输入的文本，下面通过本文给大家介绍下如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标...2017-01-09

  • jquery判断input值不为空的方法

    这篇文章主要介绍了jquery判断input值不为空的方法的相关资料,需要的朋友可以参考下...2016-06-12

  • keras.layer.input()用法说明

    这篇文章主要介绍了keras.layer.input()用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-06-17

  • 如何禁用input记忆性输入:input的属性AutoComplete

    firefox 和 ie 的浏览器各自实现了input历史记录的功能，可以简化输入时的麻烦，但是，有时候弹出的下拉框会挡住页面显示内容，而且在某些情况下也不需要对input框进行记录，如注册用户页面的文本框，用户多次注册时，肯定是要不同的用户名和密码，就没有必要让浏览器记录。...2013-07-31

  • HTML5实现移动端点击翻牌功能

    这篇文章主要介绍了HTML5实现移动端点击翻牌功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-12-08

  • input 点击事件无效 [Element Migrating][ElInput][Event]: click is removed.

    点击无效 解决办法：可以使用 v-on 的修饰符 .native。例如：@click.native="getContentData(item)" <el-input v-for="(item,index) in voiceRetrievalData.oldContent"...2022-09-21

  • Element Input输入框的使用方法

    这篇文章主要介绍了Element Input输入框的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-07-26

  • JS实现网页游戏中滑块响应鼠标点击移动效果

    本文实例讲述了JS实现网页游戏中滑块响应鼠标点击移动效果。分享给大家供大家参考，具体如下：这是网页游戏中的一个有趣效果，可以完成以下几个动作：滚动、scroll 8个方向、鼠标坐标获娶对象上下左右位置获取，大家可以自己添...2015-10-21

  • 基于JavaScript实现图片点击弹出窗口而不是保存

    这篇文章主要介绍了基于JavaScript实现图片点击弹出窗口而不是保存的相关资料,需要的朋友可以参考下...2016-02-12

  • Unity 点击UI与点击屏幕冲突的解决方案

    这篇文章主要介绍了Unity 点击UI与点击屏幕冲突的解决方案，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-04-10