border | 易学教程

CSS盒模型

阅读更多关于 CSS盒模型

1.在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。常用的块状元素有： <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 常用的内联元素有： <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> 常用的内联块状元素有： <img>、<input> 2.元素分类--块级元素什么是块级元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。 a{display:block;} 块级元素特点： a、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行） b、元素的高度、宽度、行高以及顶和底边距都可设置。 c、元素宽度在不设置的情况下，是它本身父容器的100% （和父元素的宽度一致），除非设定一个宽度。 3.元素分类--内联元素在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素（行内元素）

CSS代码

阅读更多关于 CSS代码

border-top : 1px solid #6699cc; /*上框线*/ border-bottom : 1px solid #6699cc; /*下框线*/ border-left : 1px solid #6699cc; /*左框线*/ border-right : 1px solid #6699cc; /*右框线*/ 以上是建议书写方式,但也可以使用常规的方式如下: border-top-color : #369 /*设置上框线top颜色*/ border-top-width :1px /*设置上框线top宽度*/ border-top-style : solid/*设置上框线top样式*/ 其他框线样式 solid /*实线框*/ dotted /*虚线框*/ double /*双线框*/ groove /*立体内凸框*/ ridge /*立体浮雕框*/ inset /*凹框*/ outset /*凸框*/ 来源： https://www.cnblogs.com/yazixun/archive/2011/11/30/2268659.html

css之属性部分

阅读更多关于 css之属性部分

这篇写的是今天的学习到的属性，一共20个。属性再多，但也要会使用，会在使用时可以记起它，才能起到它为我们所需要的作用。样式属性 1、border CSS边框属性允许你指定一个元素边框的样式和颜色。边框样式border-style 属性用来定义边框的样式 none: 默认无边框 dotted: dotted:定义一个点线框 dashed: 定义一个虚线框 solid: 定义实线边界 double: 定义两个边界。两个边界的宽度和border-width的值相同 groove: 定义3D沟槽边界。效果取决于边界的颜色值 ridge: 定义3D脊边界。效果取决于边界的颜色值 inset:定义一个3D的嵌入边框。效果取决于边界的颜色值 outset: 定义一个3D突出边框。效果取决于边界的颜色值例子： border-style: solid; 边框宽度 border-width border-width:5px; 边框颜色border-color 可以设置的颜色： name - 指定颜色的名称，如 "red" RGB - 指定 RGB 值, 如 "rgb(255,0,0)" Hex - 指定16进制值, 如 "#ff0000" 您还可以设置边框的颜色为"transparent"。注意： border-color单独使用是不起作用的，必须得先使用border

用CSS绘制梯形

阅读更多关于用CSS绘制梯形

倒直角梯形　　 .mask1 { height: 0; width: 100px; border-top: 100px solid red; border-right: 37px solid transparent; } 效果如下：等腰梯形 .mask2 { width:100px; height:0; border-width:0 37px 100px 37px; border-style:none solid solid; border-color:transparent transparent red; } 效果如下：倒等腰梯形 .mask3 { width:100px; height:0; border-top: 100px solid red; border-right: 37px solid transparent; border-left:37px solid transparent; } 效果如下：倒直角梯形2 .mask4 { width:100px; height:0; border-top:100px solid red; border-left:37px solid transparent; } 来源： https://www.cnblogs.com/hyql/p/4876933.html

可编辑的table（原生JS+jQuery）

阅读更多关于可编辑的table（原生JS+jQuery）

原生js： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Table</title> <style type="text/css"> body{ font-size:12px} #tab{ border-collapse: collapse;} .edit{ height:16px; width:98%; background-color:#EFF7FF; font-size:12px; border:0px;} #tab thead td{ background:url(/upload/201005/20100531233452190.bmp);color:#183C94} #tab tbody td{ overflow:hidden} #tab td{border: 1px solid #CECFCE;height:20px

Flutter移动电商实战-会员中心_编写ListTile的通用方法

阅读更多关于 Flutter移动电商实战-会员中心_编写ListTile的通用方法

https://www.cnblogs.com/niceyoo/p/11095846.html 1、界面分析通过下图我们可以拆分成 4 部分，头部、订单标题区域、订单列表区域、ListTitle同用部分。 2、UI编写 2.1、头部主要用到了圆形头像裁剪组件-ClipOval 顶部头像区域Widget _topHeader(){ return Container( width: ScreenUtil().setWidth(750), padding: EdgeInsets.all(20), color: Colors.white, child: Column( children: <Widget>[ Container( margin: EdgeInsets.only(top: 30), width: ScreenUtil().setWidth(155), child: ClipOval( child:Image.network('https://profile.csdnimg.cn/6/4/0/1_niceyoo') ), ), Container( margin: EdgeInsets.only(top: 10), child: Text( 'niceyoo', style: TextStyle( fontSize: ScreenUtil().setSp(36),

基础2

阅读更多关于基础2

表单 1:表单标签 <form></form> 属性: action="接口地址" <form action="提交地址" method="提交方式" name="表单名字"> method="get/post" name="表单名称" 2:表单控件 <input> 属性: type="控件类型" name:属性标识表单域的名称; value:属性定义表单域的默认值，其他属性根据type的不同而有所改变化。 <input type="类型"> type="text"当行文本输入框 type="password"密码输入框 type="submit"提交按钮 type="reset"重置按钮 type="button"空按钮（如果要做功能，需要结合js） name="名字" value="值" maxlength="允许输入的字符个数" size="设置元素显示的宽度" get和post的区别: get:在地址栏提交，有长度限制，有可能造成数据丢失，一般提交的数据较短，明文可见，不安全，就算加密也比较容易破解，速度较快，如果只考虑速度那就用get post:不在地址栏提交，安全，没有长度限制（理论上是有长度限制）一般提交的数据较大，速度较慢样式的基本规则: 1:属性与值之间用英文冒号连接，分号结束 2:属性与属性之间可以空格，可以换行 3:一个属性中有多个属性值时

java基础56 HTML5的标签知识（网页知识）

阅读更多关于 java基础56 HTML5的标签知识（网页知识）

本文知识点（目录）： 1、html常用标签 2、html实体标签 3、html媒体标签 4、html超链接标签 5、html图片标签 6、html标个标签 7、html框架标签 8、html表单标签 1、html常用标签 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>常用标签练习</title> 6 </head> 7  23 <body> 24 25 <h1 align="center">这是标题</h1> 26 <p> 上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列

Web前端一种动态样式语言-- Less

阅读更多关于 Web前端一种动态样式语言-- Less

变量变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。 // LESS @color: #4D926F; #header { color: @color; } h2 { color: @color; } /* 生成的 CSS */ #header { color: #4D926F; } h2 { color: #4D926F; } 混合混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。 // LESS .rounded-corners (@radius: 5px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; } #header { .rounded-corners; } #footer { .rounded-corners(10px); } /* 生成的 CSS */ #header { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } #footer {

WPF将TextBox的边框设为圆角的

阅读更多关于 WPF将TextBox的边框设为圆角的

将TextBox的边框设为圆角的，因为TextBox默认的样式中边框就是由Border类型来实现的，所以只需要真的当前的TextBox的Border修改属性即可，为了不影响界面中别的Border的样式，所以将修改的样式写在了TextBox的Resources中 <TextBox> <TextBox.Resources> <Style TargetType="{x:Type Border}"> <Setter Property="CornerRadius" Value="4"/> <Setter Property="BorderBrush" Value="#c1d0dc"/> </Style> </TextBox.Resources> </TextBox> 来源： https://www.cnblogs.com/tommy-huang/p/6475791.html

订阅 border