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#开发微信门户及应用的文章,基本上把当时微信能做的接口都封装差不多了,微信框架也积累了不少模块和用户,最近发现微信公众平台增加了不少内容,特别是在自定义菜单里面增加了扫一扫. ...
随机推荐
- CF1012B Chemical table 题解【二分图】【构造】
有意思的网格图转化.CF Div.1 还是挺有难度的. 注:由于本题有较完美的中文题面,所以不贴英文题面. 英文题面 题目描述 Innopolis 大学的教授正努力研究元素周期表.他们知道,有 \(n ...
- Q678 有效的括号字符串
给定一个只包含三种字符的字符串:(,) 和 *,写一个函数来检验这个字符串是否为有效字符串.有效字符串具有如下规则: 任何左括号 ( 必须有相应的右括号 ). 任何右括号 ) 必须有相应的左括号 ( ...
- bundle 与 package
bundle是Apple提供的软件安装的便捷方法. bundle为用户和开发者提供了一个简单地接口. bundle 和 package package:看起来像一个文件的目录 bundle ...
- 解决执行maven项目出现 SLF4J: Failed to load class “org.slf4j.impl.StaticLoggerBinder”. error
最近再弄maven项目,运行起来没有问题,但是Console控制台会报错,比如说如下的问题异常提示: 由此我们可以看出,报出错误的地方主要是slf4j的jar包,而故障码中“Failed to loa ...
- 04-oracle时间函数
add_months(sysdate,x)x月之后的日期:last_day(sysdate)指定日期所在月份的最后一天:next_day(sysdate,'星期x')当前日期后的下一个星期x: mon ...
- Binder Native 层(二)
Binder 框架及 Native 层 Binder机制使本地对象可以像操作当前对象一样调用远程对象,可以使不同的进程间互相通信.Binder 使用 Client/Server 架构,客户端通过服务端 ...
- Unity游戏接入Steam成就
在接入Steam成就,其实有些地方是有坑点的,而且steam官网给的是c++代码的接入教程.如果是老鸟的话,接入还并不是很难. 但是对于新手其实还是比较痛苦的,网上这方面的资料很少.这里我给总结下,u ...
- ORM框架SQLAlchemy的使用
ORM和SQLAlchemy简介 对象关系映射(Object Relational Mapping,简称ORM),简单的来说,ORM是将数据库中的表与面向对象语言中的类建立了一种对应的关系.然后我们操 ...
- UOJ #138. 【UER #3】开学前的涂鸦
Description 红包是一个有艺术细胞的男孩子. 红包由于NOI惨挂心情不好,暑假作业又多,于是他开始在作业本上涂鸦. 一开始,他在纸上画了一棵 n 个节点的树.但是他觉得这样的画太简单了,体现 ...
- 架构实战项目心得（六）：后台服务nosql数据库mongodb
一.架构介绍 mongodb有几种部署方式,这里采用的是副本集架构(Replica Set). 为了防止单点故障就需要引副本(Replication),当发生硬件故障或者其 ...