精通CSS-7（simple&complex form）&黑画-5（code city&publish softwore&bug）&R
2017-06-23 09:00
567 查看
一.精通CSS
1.（7.2）简单的表单布局
code:
<!doctype html>
<html>
<head>
<title></title>
<meta charset='utf-8'>
<link rel="stylesheet" type="text/css" href="">
<style type="text/css">
textarea{
width: 100%;
height:10em;
}
input.radio{
width: auto;
margin-right: 1em;
}
/*
1.如果不设置块，Name和文本框则在一行上
2.cursor：pointer;作用：当你将鼠标悬停在label上时，光标显示成"点击的手"，点击一下，直接跳转其对应的文本框。
*/
label{
display: block;
cursor: pointer;
}
fieldset{
width: 25em;
}
input[type="text"],textarea{
border-top: 2px solid #999;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 2px solid #999;
}
.required{
font-weight: bold;
color:#760000;
}
.submit{
margin-top: 15px;
}
</style>
</head>
<body>
<fieldset>
<legend>Your Contact Details</legend>
<div>
<label for="author" class="required">Name:(Required)</label>
<input id="author" name="author" type="text">
</div>
<div>
<label for="email">Email Address: </label>
<input id="email" name="email" type="text">
</div>
<div>
<label for="url">Web Address:</label>
<input id="url" name="url" type="text">
</div>
</fieldset>
<fieldset>
<legend>Comments</legend>
<div>
<label for="text" class="required">Message: (Required)</label>
<textarea name="text" id="text">
</textarea>
</div>
</fieldset>
<fieldset>
<legend>Remember Me</legend>
<div>
<label for="remember-yes"><input id="remember-yes" name="remember-yes" class="radio" type="radio" value="yes">yes</label>
</div>
<div>
<label for="remember-no"><input id="remember-no" name="remember-no" class="radio" type="radio" value="no" checked="checked">no</label>
</div>
</fieldset>
<div>
<input type="submit" class="submit">
</div>
</body>
</html>
Result:
2.（7.3）复杂的表单布局
code:
<!doctype html>
<html>
<head>
<title></title>
<meta charset='utf-8'>
<link rel="stylesheet" type="text/css" href="">
<style type="text/css">
body{
font-size: 14px;
position: relative;
float: left;
left:25%;
}
textarea{
width: 100%;
height:10em;
}
input.radio{
width: auto;
margin-right: 1em;
}
/*
1.使用浮动替代块级元素。
2.设置label的宽度，使后面文本框一致。
*/
label{
float: left;
width:10em;
cursor: pointer;
}
fieldset{
width: 45em;
}
input[type="text"],textarea{
border-top: 2px solid #999;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 2px solid #999;
}
.required{
font-weight: bold;
color:#760000;
}
/*如果表单标签可能跨多行，应清理容器div*/
div{
clear: left;
}
#extendSpace{
width: 13em;
}
/*
1.为了目标样式，需要隐藏"month"&"year"这两个标签，使用值较大的负文本缩进将标签定位到屏幕之外。
2.为了方便布局，将这些标签的宽度设置为零。
*/
#monthOfBirthLabel,#yearOfBirthLabel{
text-indent: -999px;
width:0;
}
/*单独设置每个表单控件的尺寸，通过外边距调整它们之间的位置*/
#dateOfBirth{
width: 3em;
margin-right: 0.5em;
}
#yearOfBirth{
width: 5em;
margin-left: 0.5em;
}
#monthOfBirth{
width: 10em;
}
fieldset#favoriteColor{
padding: 0;
margin:0;
border:none;
background: transparent;
}
#favoriteColor h2{
font-size: 1em;
width: 10em;
float: left;
font-weight: normal;
}
/*
1.使用clear:none;覆盖掉之前的clear:left;
2.设置每列的宽度。
3.浮动定位
*/
#favoriteColor .col{
clear: none;
width: 8em;
float: left;
}
#favoriteColor label{
float: none;
}
#placeOfBirth{
width: 10em;
}
fieldset{
padding: 0.5em 1em 0.5em 1em;
}
fieldset legend{
font-weight: bold;
}
button{
border:none;
background: none;
cursor:pointer;
margin-top: 15px;
position: relative;
float: left;
left:33%;
}
div{
position: relative;
}
.feedback{
position: absolute;
left:23em;
right: 0;
top:0.5em;
width:10em;
color:#760000;
background: url(images/error.png) no-repeat left top;
padding-left: 18px;
font-weight: bold;
}
fieldset{
border:1px solid #666;
background-color: #f8f8f8;
font-family: helvetica,arial,sans-serif;
margin-bottom: 0.8em;
}
div{
padding:0.3em 0.5em;
}
</style>
</head>
<body>
<fieldset>
<legend>Your Contact Details</legend>
<div>
<label for="author" class="required">Name:(Required)</label>
<input id="author" name="author" type="text">
</div>
<div>
<label for="email">Email Address:
<em class="feedback">Incorrect email address.Please try again.</em>
</label>
<input id="email" name="email" type="text">
</div>
<div>
<label for="url">Web Address:</label>
<input id="url" name="url" type="text">
</div>
</fieldset>
<fieldset>
<legend>Personal Information</legend>
<div>
<label for="placeOfBirth">Place of Birth:</label>
<select name="placeOfBirth" id="placeOfBirth">
<option value="1">China</option>
<option value="2">USA</option>
</select>
</div>
<div>
<label for="dateOfBirth">Date of Birth:</label>
<input name="dateOfBirth" id="dateOfBirth" type="text">
<label id="monthOfBirthLabel" for="monthOfBirth">Month of Birth:</label>
<select name="monthOfBirth" id="monthOfBirth">
<option value="1">January</option>
<option value="2">Februray</option>
<option value="3">March</option>
</select>
<label id="yearOfBirthLabel" for="yearOfBirth">Year of Birth:</label>
<input name="yearOfBirth" id="yearOfBirth" type="text">
</div>
<fieldset id="favoriteColor">
<h2>Favorite Color:</h2>
<div class="col">
<div>
<label><input class="checkbox" id="red" name="red" type="checkbox" value="red">red</label>
</div>
<div>
<label><input class="checkbox" id="yellow" name="yellow" type="checkbox" value="yellowd">yellow</label>
</div>
<div>
<label><input class="checkbox" id="pink" name="pink" type="checkbox" value="pink">pink</label>
</div>
<div>
<label><input class="checkbox" id="green" name="green" type="checkbox" value="green">green</label>
</div>
</div>
<div class="col">
<div>
<label><input class="checkbox" id="orange" name="orange" type="checkbox" value="orange">orange</label>
</div>
<div>
<label><input class="checkbox" id="purple" name="purple" type="checkbox" value="purple">purple</label>
</div>
<div>
<label><input class="checkbox" id="blue" name="blue" type="checkbox" value="blue">blue</label>
</div>
<div>
<label><input class="checkbox" id="other" name="other" type="checkbox" value="other">other</label>
</div>
</div>
</fieldset>
</fieldset>
<fieldset>
<legend>Comments</legend>
<div>
<label for="text" class="required" id="extendSpace">Message:(Required)</label>
<textarea name="text" id="text">
</textarea>
</div>
</fieldset>
<fieldset>
<legend>Remember Me</legend>
<div>
<label for="remember-yes"><input id="remember-yes" name="remember-yes" class="radio" type="radio" value="yes">yes</label>
</div>
<!--
1.确保按钮二选一的方法：两个按钮空间的name一样。
-->
<div>
<label for="remember-no"><input id="remember-no" name="remember-yes" class="radio" type="radio" value="yes" checked="checked">no</label>
</div>
</fieldset>
<div>
<button type="submit">
<img src="images/button.png" alt="Book Now">
</button>
</div>
</body>
</html>
Result:
二.黑客与画家（5）
1.互联网软件和桌面软件的区别？
①前者不是一个独立的代码块，而是许多不同类型代码的集合。
2.设计桌面软件就像设计一栋大楼，而设计互联网更像在设计一座城市。
3.硬件需要考虑的地方，不仅仅是如何避免出错，同时还要最大化发挥其作用。
4.互联网软件发布的过程可以分解为一系列渐进式修改，而不是猛然推出一个变幅巨大的版本。
5.提早发现BUG有利于减少复合式BUG：
①存在两个BUG，共存时正常，当你修复一个BUG时，另一个才会出错。
6.解决之道:一直在打扫房间，掉落在地板上的东西能被马上清理掉，省得时间一长它们和其他东西粘在一起。
7.函数式编程（function programming）：可用于编写一些重要的部分，利于重复修改和测试。
三.R语言
1.probability-value假设几率
2.anova方差分析
3.Alan Turing
4.polynomial多项式
5.cluster群，簇，丛
6.notion概念，见解，打算。
7.neural神经系统的/neurons神经元
8.category种类，分类
9.Bayes贝叶斯
10.interpret口译，翻译，说明h
11.dimensional空间的
12.optimum最适宜的/SVM：Support Vector Machine/NN:Neural Network/
13.hierarchical分层的/dimension方面，维，尺寸，容积/evaluation评价/malware恶意软件（malevolence）
14.simulator模拟器/Markov马尔科夫（俄罗斯数学家）/utility实用，公共设施，效用/fusion融合，融化，熔接
15.sentiment感情，情绪，观点/ironic反话（真好/真坏）/manually手动的/dynamic动态的
16.refine精炼，提纯，优化/optimization优化/vocation职业，天职/pessimistic悲观/optimistic乐观
1.（7.2）简单的表单布局
code:
<!doctype html>
<html>
<head>
<title></title>
<meta charset='utf-8'>
<link rel="stylesheet" type="text/css" href="">
<style type="text/css">
textarea{
width: 100%;
height:10em;
}
input.radio{
width: auto;
margin-right: 1em;
}
/*
1.如果不设置块，Name和文本框则在一行上
2.cursor：pointer;作用：当你将鼠标悬停在label上时，光标显示成"点击的手"，点击一下，直接跳转其对应的文本框。
*/
label{
display: block;
cursor: pointer;
}
fieldset{
width: 25em;
}
input[type="text"],textarea{
border-top: 2px solid #999;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 2px solid #999;
}
.required{
font-weight: bold;
color:#760000;
}
.submit{
margin-top: 15px;
}
</style>
</head>
<body>
<fieldset>
<legend>Your Contact Details</legend>
<div>
<label for="author" class="required">Name:(Required)</label>
<input id="author" name="author" type="text">
</div>
<div>
<label for="email">Email Address: </label>
<input id="email" name="email" type="text">
</div>
<div>
<label for="url">Web Address:</label>
<input id="url" name="url" type="text">
</div>
</fieldset>
<fieldset>
<legend>Comments</legend>
<div>
<label for="text" class="required">Message: (Required)</label>
<textarea name="text" id="text">
</textarea>
</div>
</fieldset>
<fieldset>
<legend>Remember Me</legend>
<div>
<label for="remember-yes"><input id="remember-yes" name="remember-yes" class="radio" type="radio" value="yes">yes</label>
</div>
<div>
<label for="remember-no"><input id="remember-no" name="remember-no" class="radio" type="radio" value="no" checked="checked">no</label>
</div>
</fieldset>
<div>
<input type="submit" class="submit">
</div>
</body>
</html>
Result:
2.（7.3）复杂的表单布局
code:
<!doctype html>
<html>
<head>
<title></title>
<meta charset='utf-8'>
<link rel="stylesheet" type="text/css" href="">
<style type="text/css">
body{
font-size: 14px;
position: relative;
float: left;
left:25%;
}
textarea{
width: 100%;
height:10em;
}
input.radio{
width: auto;
margin-right: 1em;
}
/*
1.使用浮动替代块级元素。
2.设置label的宽度，使后面文本框一致。
*/
label{
float: left;
width:10em;
cursor: pointer;
}
fieldset{
width: 45em;
}
input[type="text"],textarea{
border-top: 2px solid #999;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 2px solid #999;
}
.required{
font-weight: bold;
color:#760000;
}
/*如果表单标签可能跨多行，应清理容器div*/
div{
clear: left;
}
#extendSpace{
width: 13em;
}
/*
1.为了目标样式，需要隐藏"month"&"year"这两个标签，使用值较大的负文本缩进将标签定位到屏幕之外。
2.为了方便布局，将这些标签的宽度设置为零。
*/
#monthOfBirthLabel,#yearOfBirthLabel{
text-indent: -999px;
width:0;
}
/*单独设置每个表单控件的尺寸，通过外边距调整它们之间的位置*/
#dateOfBirth{
width: 3em;
margin-right: 0.5em;
}
#yearOfBirth{
width: 5em;
margin-left: 0.5em;
}
#monthOfBirth{
width: 10em;
}
fieldset#favoriteColor{
padding: 0;
margin:0;
border:none;
background: transparent;
}
#favoriteColor h2{
font-size: 1em;
width: 10em;
float: left;
font-weight: normal;
}
/*
1.使用clear:none;覆盖掉之前的clear:left;
2.设置每列的宽度。
3.浮动定位
*/
#favoriteColor .col{
clear: none;
width: 8em;
float: left;
}
#favoriteColor label{
float: none;
}
#placeOfBirth{
width: 10em;
}
fieldset{
padding: 0.5em 1em 0.5em 1em;
}
fieldset legend{
font-weight: bold;
}
button{
border:none;
background: none;
cursor:pointer;
margin-top: 15px;
position: relative;
float: left;
left:33%;
}
div{
position: relative;
}
.feedback{
position: absolute;
left:23em;
right: 0;
top:0.5em;
width:10em;
color:#760000;
background: url(images/error.png) no-repeat left top;
padding-left: 18px;
font-weight: bold;
}
fieldset{
border:1px solid #666;
background-color: #f8f8f8;
font-family: helvetica,arial,sans-serif;
margin-bottom: 0.8em;
}
div{
padding:0.3em 0.5em;
}
</style>
</head>
<body>
<fieldset>
<legend>Your Contact Details</legend>
<div>
<label for="author" class="required">Name:(Required)</label>
<input id="author" name="author" type="text">
</div>
<div>
<label for="email">Email Address:
<em class="feedback">Incorrect email address.Please try again.</em>
</label>
<input id="email" name="email" type="text">
</div>
<div>
<label for="url">Web Address:</label>
<input id="url" name="url" type="text">
</div>
</fieldset>
<fieldset>
<legend>Personal Information</legend>
<div>
<label for="placeOfBirth">Place of Birth:</label>
<select name="placeOfBirth" id="placeOfBirth">
<option value="1">China</option>
<option value="2">USA</option>
</select>
</div>
<div>
<label for="dateOfBirth">Date of Birth:</label>
<input name="dateOfBirth" id="dateOfBirth" type="text">
<label id="monthOfBirthLabel" for="monthOfBirth">Month of Birth:</label>
<select name="monthOfBirth" id="monthOfBirth">
<option value="1">January</option>
<option value="2">Februray</option>
<option value="3">March</option>
</select>
<label id="yearOfBirthLabel" for="yearOfBirth">Year of Birth:</label>
<input name="yearOfBirth" id="yearOfBirth" type="text">
</div>
<fieldset id="favoriteColor">
<h2>Favorite Color:</h2>
<div class="col">
<div>
<label><input class="checkbox" id="red" name="red" type="checkbox" value="red">red</label>
</div>
<div>
<label><input class="checkbox" id="yellow" name="yellow" type="checkbox" value="yellowd">yellow</label>
</div>
<div>
<label><input class="checkbox" id="pink" name="pink" type="checkbox" value="pink">pink</label>
</div>
<div>
<label><input class="checkbox" id="green" name="green" type="checkbox" value="green">green</label>
</div>
</div>
<div class="col">
<div>
<label><input class="checkbox" id="orange" name="orange" type="checkbox" value="orange">orange</label>
</div>
<div>
<label><input class="checkbox" id="purple" name="purple" type="checkbox" value="purple">purple</label>
</div>
<div>
<label><input class="checkbox" id="blue" name="blue" type="checkbox" value="blue">blue</label>
</div>
<div>
<label><input class="checkbox" id="other" name="other" type="checkbox" value="other">other</label>
</div>
</div>
</fieldset>
</fieldset>
<fieldset>
<legend>Comments</legend>
<div>
<label for="text" class="required" id="extendSpace">Message:(Required)</label>
<textarea name="text" id="text">
</textarea>
</div>
</fieldset>
<fieldset>
<legend>Remember Me</legend>
<div>
<label for="remember-yes"><input id="remember-yes" name="remember-yes" class="radio" type="radio" value="yes">yes</label>
</div>
<!--
1.确保按钮二选一的方法：两个按钮空间的name一样。
-->
<div>
<label for="remember-no"><input id="remember-no" name="remember-yes" class="radio" type="radio" value="yes" checked="checked">no</label>
</div>
</fieldset>
<div>
<button type="submit">
<img src="images/button.png" alt="Book Now">
</button>
</div>
</body>
</html>
Result:
二.黑客与画家（5）
1.互联网软件和桌面软件的区别？
①前者不是一个独立的代码块，而是许多不同类型代码的集合。
2.设计桌面软件就像设计一栋大楼，而设计互联网更像在设计一座城市。
3.硬件需要考虑的地方，不仅仅是如何避免出错，同时还要最大化发挥其作用。
4.互联网软件发布的过程可以分解为一系列渐进式修改，而不是猛然推出一个变幅巨大的版本。
5.提早发现BUG有利于减少复合式BUG：
①存在两个BUG，共存时正常，当你修复一个BUG时，另一个才会出错。
6.解决之道:一直在打扫房间，掉落在地板上的东西能被马上清理掉，省得时间一长它们和其他东西粘在一起。
7.函数式编程（function programming）：可用于编写一些重要的部分，利于重复修改和测试。
三.R语言
1.probability-value假设几率
2.anova方差分析
3.Alan Turing
4.polynomial多项式
5.cluster群，簇，丛
6.notion概念，见解，打算。
7.neural神经系统的/neurons神经元
8.category种类，分类
9.Bayes贝叶斯
10.interpret口译，翻译，说明h
11.dimensional空间的
12.optimum最适宜的/SVM：Support Vector Machine/NN:Neural Network/
13.hierarchical分层的/dimension方面，维，尺寸，容积/evaluation评价/malware恶意软件（malevolence）
14.simulator模拟器/Markov马尔科夫（俄罗斯数学家）/utility实用，公共设施，效用/fusion融合，融化，熔接
15.sentiment感情，情绪，观点/ironic反话（真好/真坏）/manually手动的/dynamic动态的
16.refine精炼，提纯，优化/optimization优化/vocation职业，天职/pessimistic悲观/optimistic乐观
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 精通CSS（9-捕捉BUG）&R
- delegate & protocol simple code demo
- cocos2d-x-2.2的SimpleAudioEngine::sharedEngine()->playEffect()程序中断的bug
- codevs 1098 && 洛谷 P1031 均分纸牌 （修bug plus(两个注意*)）
- Asp.net中与codePage="936"有关的css失效等奇怪问题的解决办法(原创)
- 《精通CSS高级WEB标准解决方案》第九章、bug和bug修复
- 精通CSS(9.3hasLayout&9.4solution)&R
- 用"http://m.weather.com.cn/data/" + cityCode + ".html"获取城市天气
- cocos2d-x-2.2的SimpleAudioEngine::sharedEngine()->playEffect()计划中断bug
- HTML+CSS+jQuery 纵向导航 && 横向导航 && 消除IE6 BUG && 感悟怎样学习
- css学习笔记之兼容&bug（吐血整理）
- 精通CSS（5.5突出显示不同类型的链接）&&黑画（另一条路）
- 用"http://m.weather.com.cn/data/" + cityCode + ".html"获取城市天气
- 原创翻译 Learn to Code HTML & CSS
- 精通CSS（5.6.3-end）Pixy&Fairy&pureCSSToolHint&scale
- 精通CSS（7.1对数据表格应用样式&7.2简单的表单布局）&R语言课堂笔记（王中贤老师）
- FreeCodeCamp 学习笔记（一）HTML&CSS
- 精通css（4）bug和修复bug
- 精通CSS（5.4为链接目标设置样式）&黑客与画家（2）
- [ZT]Simple Page Peel Effect with jQuery & CSS