day 15
1.input标签默认内容
Title
默认内容
111
222
333
男:
女:
广州:
北京:
上海:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input value="默认内容"/>
<hr />
<textarea>默认内容</textarea>
<hr />
<select>
<option>111</option>
<option>222</option>
<option selected="selected">333</option>
</select>
<hr />
男: <input type="radio" name="r1" checked="checked"/>
女: <input type="radio" name="r1"/>
<hr />
广州: <input type="checkbox" checked="checked" name="e1">
北京: <input type="checkbox" name="e1">
上海: <input type="checkbox" checked="checked" name="e1">
<body>
CSS自定义属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1[name='a'] {
color: red;
}
</style>
</head>
<body>
<div class="c1" name="a">css自定义属性</div>
</body>
</html>
CSS漂浮(之前的形式比较low)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.left {
float: left;
}
.clean {
background-color: red;
}
/*在类clean后边的样式*/
.clean:after {
/*在clean类后边加上内容"lll"*/
content: 'lll';
/*这个必不可少*/
clear: both;
/*显示为块级标签*/
display: block;
/*去掉lll占的红色背景*/
height: 0;
/*隐藏内容"lll"*/
visibility: hidden;
}
</style>
</head>
<body>
<div class="clean">
<div class="left" style="height: 60px;background-color: greenyellow">123</div>
<div class="left">456</div>
</div>
<!--<div class="sanjiao"></div>-->
</body>
</html>
每个标签都有字标签，其中两个是before、after，分别是在其前、后的样式。上篇博客是在两个div下边直接写一个clear:both，这个示例和那个差不多，先加一点字段占用样式(这里是背景色)，然后改为块级、在把占用的样式删除。
CSS之三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.icon {
display: inline-block;
border-bottom: 20px solid red;
border-top: 20px solid transparent;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
</style>
</head>
<body>
<div class="icon"></div>
</body>
</html>
Title
.icon {
display: inline-block;
border-bottom: 20px solid ;
border-top: 20px solid transparent;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
JS之全选，反选，取消demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="jquery-3.1.0.js"></script>
<body>
<input type="button" onclick="CheckAll();" value="全选"/>
<input type="button" onclick="CheckReverse();" value="反选"/>
<input type="button" onclick="CheckCancel();" value="取消"/>
<table border="1">
<thead></thead>
<tbody id="tb1">
<tr>
<td>11</td>
<td><input type="checkbox"/></td>
</tr>
<tr>
<td>22</td>
<td><input type="checkbox"/></td>
</tr>
<tr>
<td>33</td>
<td><input type="checkbox"/></td>
</tr>
</tbody>
</table>
<script>
function CheckAll(){
// $('#tb1').find(':checkbox').attr('checked','checked')
$('#tb1').find(':checkbox').prop('checked',true);
}
function CheckReverse(){
//先找到标签,如果选中,取消,未选中,选中
$('#tb1').find(':checkbox').each(function(){
// $(this) = 每一个复选框
if($(this).prop('checked')){
$(this).prop('checked',false)
}else {
$(this).prop('checked',true)
}
});
}
function CheckCancel(){
// $('#tb1').find(':checkbox').removeAttr('checked');
$('#tb1').find(':checkbox').prop('checked',false);
}
</script>
</body>
</html>
day 15的更多相关文章
- .NET平台开源项目速览(15)文档数据库RavenDB-介绍与初体验
不知不觉,“.NET平台开源项目速览“系列文章已经15篇了,每一篇都非常受欢迎,可能技术水平不高,但足够入门了.虽然工作很忙,但还是会抽空把自己知道的,已经平时遇到的好的开源项目分享出来.今天就给大家 ...
- 15个关于Chrome的开发必备小技巧[译]
谷歌Chrome,是当前最流行且被众多web开发人员使用的浏览器.最快六周就更新发布一次以及伴随着它不断强大的开发组件,使得Chrome成为你必备的开发工具.例如,在线编辑CSS,console以及d ...
- 15个C++项目列表
实验楼上有很多C++的实战项目,从简单到进阶,学习每个项目都可以掌握相应的知识点. 如果你还是C++新手的话,那么这个C++的项目列表你可以拿去练手实战开发,毕竟学编程动手实践是少不了的! 如果你不知 ...
- Hacker Rank: Two Strings - thinking in C# 15+ ways
March 18, 2016 Problem statement: https://www.hackerrank.com/challenges/two-strings/submissions/code ...
- 在 Ubuntu 15.04 中使用 ubuntu-make、Eclipse 4.4、Java 8 以及 WTP
Ubuntu 今天发布新版本了 其实昨天(2015-04-23)我就看到了 Ubuntu 发布新版本的新闻,下班后回家的第一件事就是访问 Ubuntu 的官网,很可惜,没有提供下载.今天(2015-0 ...
- 企业IT管理员IE11升级指南【15】—— 代理自动配置脚本
企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flas ...
- (转)C++语言的15个晦涩特性
原文链接: Evan Wallace 翻译: 伯乐在线- 敏敏 译文链接: http://blog.jobbole.com/54140/ 这个列表收集了 C++ 语言的一些晦涩(Obscure)特 ...
- CSharpGL(15)用GLSL渲染2种类型的文字
CSharpGL(15)用GLSL渲染2种类型的文字 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharpGL源码中包含10多个独立的Demo,更适合 ...
- ABP(现代ASP.NET样板开发框架)系列之15、ABP应用层——应用服务（Application services）
点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之15.ABP应用层——应用服务(Application services) ABP是“ASP.NET Boiler ...
- C#开发微信门户及应用(15)-微信菜单增加扫一扫、发图片、发地理位置功能
前面介绍了很多篇关于使用C#开发微信门户及应用的文章,基本上把当时微信能做的接口都封装差不多了,微信框架也积累了不少模块和用户,最近发现微信公众平台增加了不少内容,特别是在自定义菜单里面增加了扫一扫. ...
随机推荐
- excel时间戳转化为标准日期（日期转化为日期戳）
最近在学习python将数据导入到excel,发现日期变成数字而不是日期格式的问题. 第一眼看去肯定是excel单元格格式问题,一般excel单元格格式为常规,而常规处理日期时就显示为数字,所以就想到 ...
- 安装Telerik JustMock插件后启动不成功
1.打开Telerik JustMock Configuration 勾选所有框 2.到C:\Program Files (x86)\Progress\Telerik JustMock\Librari ...
- linux的yum报错
yum makecache Loaded plugins: fastestmirror Could not retrieve mirrorlist http://mirrorlist.centos.o ...
- SpringBoot读取静态资源文件
ClassPathResource resource = new ClassPathResource(publicKeyCer); File file = null; try { file = res ...
- Kettle 中生成随机数 或者GUID唯一标识符
添加步骤 "生成随机数" 英文名字叫 "Generate Random Value" 如下图..选择UUID..
- 使用AChartEngine画动态曲线图
AChartEngine是一个开源的Android图表库,可以用来画折线图.平滑折线图.饼图.直方图等等.使用简单,功能强大. AChartEngine官网:http://www.achartengi ...
- (转)mysql 5.6 原生Online DDL解析
做MySQL的都知道,数据库操作里面,DDL操作(比如CREATE,DROP,ALTER等)代价是非常高的,特别是在单表上千万的情况下,加个索引或改个列类型,就有可能堵塞整个表的读写. 然后 mysq ...
- Java学习之路(二)：Java中的方法
Java中的方法 概念: 为什么要有方法: 提高代码的复用性 什么是方法: 完成特定功能的代码块 格式: 修饰符 返回值类型 方法名(参数){ 方法体语句: return 返回值: } 1.修饰符:例 ...
- 想熟悉PostgreSQL？这篇就够了
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由angel_郁 发表于云+社区专栏 什么是PostgreSQL? PostgreSQL是自由的对象-关系型数据库服务器,在灵活的BSD ...
- awk常用命令总结
awk工具,主要将一行分成“字段”来处理. awk '条件类型1{动作1} 条件类型2{动作2}...‘ filename awk主要是处理每一行的字段内的数据,而默认的字段的分隔符为空格键或[tab ...