精华内容
下载资源
问答
  • web border属性

    千次阅读 2017-02-08 10:41:06
    画个控件的边什么的 border: 1px solid black; 第一个参数就是多宽,第二个是样式,第三个是颜色 也可以border-top: 100px solid red; 单个定义

    画个控件的边什么的

    border: 1px solid black;

    第一个参数就是多宽,第二个是样式,第三个是颜色

    也可以border-top: 100px solid red; 单个定义

    展开全文
  • 今天做实验的时候被table的border属性搞的眩晕(´・Д・)」特此总结...一、内部样式表内table的border属性测试 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"...

    今天做实验的时候被table的border属性搞的眩晕(´・Д・)」特此总结一下。

    (我不去学前端框架那些高级知识在纠结这些大作业用不到的基础东西干啥。。)

    一、内部样式表中内table的border属性测试


    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <table border="1px">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>
    </body>
    </html>

    效果:

    (看完之后表示table的内部样式吧已弃用(。ì _ í。)!!)

    二、内联样式表中内table的border属性测试


    1、基础测试

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            table{
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
    <table>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>
    </body>
    </html>

    效果:

    发现只有边框被显示成了黑色

    2、修改代码,使水平竖直分割线显示

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            table{
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
    <table rules="all">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>
    </body>
    </html>

    效果:

    3、为每个单元格设置边框

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            table{
                border: 1px solid black;
            }
            td{
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
    <table >
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>
    </body>
    </html>

    效果:

    4、将边框和水平竖直线设为不同的样式

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            table{
                border: 2px solid black;
            }
            tr{
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
    <table rules="all">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>
    </body>
    </html>


    效果:

    注意:table的border的宽度一定要比tr的宽度大,例如将table的border也设为1px时,其他不变,效果为:

    5、当表格嵌套时,如果只想给外层表格的单元格设置边框,而不给内层表格的单元格设置边框,可以用子选择符。

    例如:代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>产品介绍页面制作</title>
        <style type="text/css">
            /* 显示产品名称*/
            .p1{
                font-family:"黑体";
                font-size:20px;
                color:#3333ff
            }
            /*显示具体产品*/
            .p2{
                font-family:"黑体";
                font-size:30px;
                color:#3333ff
            }
            /*显示每一个子项目标题*/
            .bt1{
                color:#6600cc;
                font-size:25px;
                font-family:"微软雅黑";
                background-color:#999900
            }
            .table1{
                background-color:#ffff66;
                width:650px;
                height:500px;
                text-align: left;
            }
            /*看这里!!这里是重点!!子选择符!!且“>”只能使用一次,table>tr>rd无效(目前测出来是这样的)*/
            .tr1>td{
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
    <table class="table1">
        <tr class="tr1">
            <td><img src="../Photos/hp-computer.png" width="290" height="222"></td>
            <td>
                <p class="p1">产品名称</p>
                <p class="p2">惠普&nbsp;4431s&nbsp;(QG641PA)</p>
            </td>
        </tr>
        <tr class="tr1">
            <td colspan="2" class="bt1">惠普4431s(QG641PA) 基本参数</td>
        </tr>
        <tr class="tr1">
            <td colspan="2">
                <table frame="void">
                    <tr>
                        <td>CPU 主频: </td>
                        <td>2400.000</td> </tr>
                    <tr>
                        <td>CPU 系列: </td>
                        <td>英特尔酷睿i5 2 代系列(Sandy Bridge)</td>
                    </tr>
                    <tr>
                        <td>CPU 型号: </td>
                        <td>Intel酷睿i5 2430M</td>
                    </tr>
                    <tr>
                        <td>内 存: </td>
                        <td>DDR3 1333MHz 4GB, 最大内存容量:16GB</td>
                    </tr>
                    <tr>
                        <td>硬 盘: </td>
                        <td>7200转, SATA, 750GB</td>
                    </tr>
                    <tr>
                        <td>光 驱: </td>
                        <td>光驱内置DVD刻录机</td>
                    </tr>
                    <tr>
                        <td>屏 幕: </td>
                        <td>14.000</td>
                    </tr>
                    <tr>
                        <td>显 卡: </td>
                        <td>1GB, GDDR5, AMD Radeon HD 6490M独立显卡</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr class="tr1">
            <td colspan="2" class="bt1">惠普4431s(QG641PA) 多媒体设备</td>
        </tr>
        <tr class="tr1">
            <td colspan="2">
                <table frame="void">
                    <tr>
                        <td>摄 像 头: </td>
                        <td>集成摄像头</td> </tr>
                    <tr>
                        <td>音频系统: </td>
                        <td>内置音效芯片纠错</td>
                    </tr>
                    <tr>
                        <td>多 媒 体: </td>
                        <td>内置扬声器、麦克风</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr class="tr1">
            <td colspan="2" class="bt1">惠普4431s(QG641PA) 网络通信及其它</td>
        </tr>
        <tr class="tr1">
            <td colspan="2">
                <table frame="void">
                    <tr>
                        <td>无限网卡: </td>
                        <td>支持802 11***无线协议 Intel WiFi Link</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    </body>
    </html>

    效果:

    展开全文
  •  border layout提供5个区域:east,west,north,south,center. 以下是一些正常用法: north区域可以使用作为你的网站的标语.south区域可以用来显示版权以及一些说明.west区域可以用来做导航菜单.east区域可以...

    @author YHC

     border layout提供5个区域:east,west,north,south,center. 以下是一些正常用法:

    • north区域可以使用作为你的网站的标语.
    • south区域可以用来显示版权以及一些说明.
    • west区域可以用来做导航菜单.
    • east区域可以显示一些你的推广的项目.
    • center区域用来显示主要的内容.

    查看 Demo

    应用一个layout你应该确定一个layout 容器然后定义一些区域,layout 必须至少需要一个center区域,以下是一个layout 示例:

    <div class="easyui-layout" style="width:400px;height:200px;">  
        <div region="west" split="true" title="Navigator" style="width:150px;">  
            <p style="padding:5px;margin:0;">Select language:</p>  
            <ul>  
                <li><a href="javascript:void(0)" οnclick="showcontent('java')">Java</a></li>  
                <li><a href="javascript:void(0)" οnclick="showcontent('cshape')">C#</a></li>  
                <li><a href="javascript:void(0)" οnclick="showcontent('vb')">VB</a></li>  
                <li><a href="javascript:void(0)" οnclick="showcontent('erlang')">Erlang</a></li>  
            </ul>  
        </div>  
        <div id="content" region="center" title="Language" style="padding:5px;">  
        </div>  
    </div>  
    我们创建一个 border layout在一个<div/>容器中,layout 切割容器分为2个部分,左边是导航菜单,右边是主要内容.
    最后我们写一个click事件处理函数去检索数据, showcontent函数非常简单.

    function showcontent(language){  
        $('#content').html('Introduction to ' + language + ' language');  
    }  

    下载EasyUI示例代码:





    展开全文
  • web前端-CSS Border(边框)-011

    千次阅读 2016-10-09 14:32:30
    border-style属性用来定义边框的样式 border-style 值: 边框宽度您可以通过 border-width 属性为边框指定宽度。 为边框指定宽度有两种方法:可以指定长度值,比如 2px 或 0.1em;或者使用 3 个关键字之一,它们...

    边框样式

    边框样式属性指定要显示什么样的边界。
    border-style属性用来定义边框的样式
    border-style 值:
    这里写图片描述

    边框宽度

    您可以通过 border-width 属性为边框指定宽度。
    为边框指定宽度有两种方法:可以指定长度值,比如 2px 或 0.1em;或者使用 3 个关键字之一,它们分别是 thin 、medium(默认值) 和 thick。
    注意:CSS 没有定义 3 个关键字的具体宽度,所以一个用户代理可能把 thin 、medium 和 thick 分别设置为等于 5px、3px 和 2px,而另一个用户代理则分别设置为 3px、2px 和 1px。
    实例:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>www.baidu.com</title>
    <style>
    p.one 
    {
        border-style:solid;
        border-width:5px;
    }
    p.two 
    {
        border-style:solid;
        border-width:medium;
    }
    p.three
    {
        border-style:solid;
        border-width:1px;
    }
    </style>
    </head>
    
    <body>
    <p class="one">一些文本。</p>
    <p class="two">一些文本。</p>
    <p class="three">一些文本。</p>
    <p><b>注意:</b> "border-width" 属性 如果单独使用则不起作用。要先使用 "border-style" 属性来设置边框。</p>
    </body>
    
    </html>

    运行结果:
    这里写图片描述

    边框颜色

    border-color属性用于设置边框的颜色。可以设置的颜色:

    • name - 指定颜色的名称,如 “red”
    • RGB - 指定 RGB 值, 如 “rgb(255,0,0)”
    • Hex - 指定16进制值, 如 “#ff0000”

    您还可以设置边框的颜色为”transparent”。
    注意: border-color单独使用是不起作用的,必须得先使用border-style来设置边框样式。
    实例:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>www.baidu.com</title>
    <style>
    p.one
    {
        border-style:solid;
        border-color:red;
    }
    p.two
    {
        border-style:solid;
        border-color:#98bf21;
    } 
    </style>
    </head>
    
    <body>
    <p class="one">实线红色边框</p>
    <p class="two">实线绿色边框</p>
    <p><b>注意:</b> "border-color" 属性 如果单独使用则不起作用. 要先使用 "border-style" 属性来设置边框。</p>
    </body>
    </html>

    运行结果:
    这里写图片描述

    边框-单独设置各边

    在CSS中,可以指定不同的侧面不同的边框:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>www.baidu.com</title>
    <style>
    p
    {
        border-top-style:dotted;
        border-right-style:solid;
        border-bottom-style:dotted;
        border-left-style:solid;
    }
    </style>
    </head>
    
    <body>
    <p>两个不同的边界样式。</p>
    </body>
    </html>

    运行结果:
    这里写图片描述
    上面的例子也可以设置一个单一属性:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>www.baidu.com</title>
    <style>
    p
    {
        border-style:dotted solid;
    }
    </style>
    </head>
    
    <body>
    <p>两个不同的边界样式。</p>
    </body>
    </html>

    运行结果:
    这里写图片描述
    border-style属性可以有1-4个值:

    • border-style:dotted solid double dashed;
      • 上边框是 dotted
      • 右边框是 solid
      • 底边框是 double
      • 左边框是 dashed
    • border-style:dotted solid double;
      • 上边框是 dotted
      • 左、右边框是 solid
      • 底边框是 double
    • border-style:dotted solid;
      • 上、底边框是 dotted
      • 右、左边框是 solid
    • border-style:dotted;
      • 四面边框是 dotted

    上面的例子用了border-style。然而,它也可以和border-width 、 border-color一起使用。

    边框-简写属性

    上面的例子用了很多属性来设置边框。
    T你也可以在一个属性中设置边框。
    你可以在”border”属性中设置:

    • border-width
    • border-style (required)
    • border-color
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>www.baidu.com</title>
    <style>
    p
    {
        border:5px solid red;
    }
    </style>
    </head>
    
    <body>
    <p>段落中的一些文本。</p>
    </body>
    </html>

    运行结果:
    这里写图片描述

    CSS 边框属性

    属性描述
    border简写属性,用于把针对四个边的属性设置在一个声明。
    border-style用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
    border-width简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。
    border-color简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。
    border-bottom简写属性,用于把下边框的所有属性设置到一个声明中。
    border-bottom-color设置元素的下边框的颜色。
    border-bottom-style设置元素的下边框的样式。
    border-bottom-width设置元素的下边框的宽度。
    border-left简写属性,用于把左边框的所有属性设置到一个声明中。
    border-left-color设置元素的左边框的颜色。
    border-left-style设置元素的左边框的样式。
    border-left-width设置元素的左边框的宽度。
    border-right简写属性,用于把右边框的所有属性设置到一个声明中。
    border-right-color设置元素的右边框的颜色。
    border-right-style设置元素的右边框的样式。
    border-right-width设置元素的右边框的宽度。
    border-top简写属性,用于把上边框的所有属性设置到一个声明中。
    border-top-color设置元素的上边框的颜色。
    border-top-style设置元素的上边框的样式。
    border-top-width设置元素的上边框的宽度。
    展开全文
  • 一,效果图。 二,代码。   &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;...CSS Border(边框)&lt;/title&gt; &lt;style&gt; p.one { b
  • 详解CSS3border-radius样式

    千次阅读 2019-05-22 09:52:33
    border-radius是CSS3诞生的新样式,它可以使边框的边角变成弧形和圆角。以往制作按钮、弧形边框时需要使用背景切图的方式实现;不但臃肿,而且还容易产生布局BUG,不适于自适应框架的书写。 1.首先介绍一下语法:...
  • 随着web标准的广泛传播,表格渐渐被我遗忘,但是表格还是有它优秀的一面,数据处理用表格的确省了不少麻烦!这个是细表格的代码,并且通过了标准验证! 细线表格简单实现  table{border:1px solid #000;border-width:1px ...
  • CSS 边框 border属性

    千次阅读 2018-02-16 22:12:27
    边框在CSS1,就支持为元素添加边框,并可以设置边框的样式、颜色、及粗细。不过,当时的边框太过单一,只支持简单的线条...线条边框使用 border属性定义,图像边框使用 border-image 属性来定义,圆角边框使用 bo...
  • kibana内嵌iframe到web应用

    千次阅读 2018-12-26 09:34:56
    kibana支持dashboard内嵌到我们自己的web前端, 1.点击kibana的dashboard2.点击“share" 标签页3.4.把上面代码内嵌到我们的html节点即可&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;...
  • Java Web项目使用Freemarker生成Word文档

    万次阅读 多人点赞 2014-09-21 15:33:20
    Web项目生成Word文档的操作屡见不鲜,基于Java的解决方案也是很多的,包括使用Jacob、Apache POI、Java2Word、iText等各种方式,其实在从Office 2003开始,就可以将Office文档转换成XML文件,这样只要将需要填入的...
  • web中的各种居中

    万次阅读 2019-04-20 21:50:18
    居中是前端开发过程最常见的布局,但是很多人都不清不楚,每次就靠试一试,今天就拎一拎~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>学习居中</title&...
  • web中js实现点击切换图片

    千次阅读 2019-05-18 15:51:57
    border: 1px gray solid; float: left; padding: 5px; padding-left: 17px; padding-right: 17px; font-family: "微软雅黑"; border-bottom: none; } img{ float: left; ...
  • CSS3 圆角 border-radius属性

    千次阅读 2018-02-17 20:46:37
    在CSS3,专门针对圆角效果增加了一个 border-radius属性,通过该属性,便可以轻松实现圆角效果,设计师不必再为圆角而伤透脑筋。border-radius属性的值为边框的圆角半径,可以使用任意合法的CSS长度值,如em、pt、...
  • 从box-sizing:border-box属性入手,来了解盒模型

    万次阅读 多人点赞 2018-06-20 14:02:00
    从最开始学习CSS的时候,就了解了盒模型的概念,今天,我们从其中的box-sizing:border-box;的属性入手,来重新认识一下盒模型在实际项目的运用。 背景:先声明一下运用的场景,假如项目布局使用的是自适应的布局...
  • Java Web中访问数据库需要的DAO和VO

    千次阅读 2016-05-13 23:15:11
    下面就是实现VO的代码示例,其中各项都是数据库里边的表项内容,集定义了一个基本的新闻属性要素:,使用封装函数进行封装即可,在这里我们建立一个JavaBean类命名为NewsRealese,并且将其部署到web.xml ...
  • frame如何引入WEB-INF的jsp页面

    千次阅读 2016-01-23 23:23:26
    web.xml配置即可。 主页面的代码如下:,*" frameborder="no" border="0" framespacing="0"> <!--头部--> <frame src="./top" name="top" noresize="noresize" frameborder="0" scrolling="no" margin
  • java web中表单提交的方式

    千次阅读 2015-06-24 16:55:50
    在java web中表单提交的几种方法,本人才学疏浅,望大神帮我补充,  第一种也是最简单的方法就是在form 标签加上一个action,action对应的就是你要将表单提交的地址,其中按扭为submit,例如: 用户名: 密码: ...
  • CSS有一种基础设计模式叫盒模型,盒模型定义了Web页面的元素如何来解析。CSS每一个元素都是一个盒模型,包括html和body标签元素。在盒模型主要包括width、height、border、background、padding和margin...
  • 对于CSS属性 border ,相信所有的WEB开发人员都非常熟悉。我们可通过设置HTML元素的 ...在CSS3里引入的很多新特征,比如HTML5新型input类型, 中文字体(web font) ,placeholder等,都很实用,也很流行,而且我们之前
  • web.xml配置error-page

    千次阅读 2017-06-14 09:55:27
    web.xml error-page的正确用法 1、web.xml关于error-page的定义如下:  404 /WEB-INF/jsp/errors/error.jsp 500 /WEB-INF/jsp/errors/erro
  • java web程序error页面处理

    千次阅读 2012-02-15 12:50:43
    01)web.xml配置 定义错误页面的位置,按错误码不同定位到不同的错误展示页面,系统分为两类错误,第一类是404页面不存在的错误,另一类是服务器内部错误50x,对应的页面分别为404.jsp和error.jsp    500  /...
  • Java Web项目连接Access数据库

    万次阅读 2012-11-24 08:13:59
    Java Web项目连接Access数据库 注:本篇博客是对前几天的“JDBC连接Access数据库的几种方式”这篇的升级。由于在做一些小项目的时候遇到的问题,因此才决定写这篇博客的。昨天已经将博客发布了,但是后来经过一些...
  • 1.CSS盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS,"box model"这一术语是用来设计和布局时使用。 ... 盒模型允许我们在其它元素和周围元素边框之间... Border(边框)- 围绕在内边距和内容外的边框。 Pa..
  • cellspacing:指定相邻单元格边框的间距,也就是某个单元格与它上下...cellpadding:指定表格单元格与内容之间的间距,也就是某个单元格内的文字内容与该单元格的边框的距离 border:指的是两个单元格之间的距离 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 177,894
精华内容 71,157
关键字:

web中border