Cloud Yellow

来自CloudWiki
跳转至： 导航， 搜索

第一部分网页

一：网页css 样式属性

背景字符颜色：color:red  yellow  black  white
字间距： letter –spacing 带单位的固定数值
单词间距：word-spacing  带单位的固定数值
行间距： line-height
装饰：text-decoration : none无 underline 下划线 overline 上划线 line-through 删除线 blink 闪烁
水平对齐方式： text-aline : left  right   center   justify两端对齐
首行缩进量：text-indent
切断单词： word-wrap
书写方向：diection
字体集：font-family
字号大小：font-size
风格样式：font-style：normal常规 bold 粗 bolder  更粗

二：盒子

高度：height 宽度 width
内填充：padding 一个值时四个方向填充相同，两个值时上下，左右；三个值时上，左右，下；四个值时 上右下左。
外边距：margin （同上）
盒子边框样式：border-style：none无 ；hidden隐藏；dottted 点线 ；dashed虚线； solid 实线；double 双实线；groove勾线；ridge脊线；inset内陷；outset外凸。
边框的半角;border-radious:10%
边框的宽度：border-width
边框的颜色;border-color
背景颜色：background-color
背景图片：background-image：URL（图像url）
背景色：background。

三：盒子的浮动与清除

（1）：只要盒子设置上浮动属性，那么其后的某个盒子一定要把这种浮动清除掉。
浮动：float：none；left；right  ;不浮动 ，左浮动，右浮动。
清除浮动：clear：none；both；left；right
（2）：若想使盒子中的文本垂直居中，则需将文字的行高line-height 设置为盒子的高度。
插入图像 ;<img  src =”图像链接或图像位置”/>

五：简单的网页

简单代码： 

<html>
<head>
<title>…………….</title>
<style type =”text/css”>
</style>
</head>
<body>

</body> </html>

六：文本及相关标记

  • （1）：上下标记a<sup>2</sup>+b<sup>2</sup>=c <sup>2</sup> 即：a2+b2=c2.。<sub>下标文本</sub>.
  • （2）：文本修饰标记 ：加粗：<b>加粗文本</b>或<strong>。。。。。。。。。</strong>
  • 斜体：<i>斜体文本</i>或<em>。。。。。。</em>。
  • 删除线：<s>………</s>或<strike>………..</strike>或<del>……..</del>
  • 下划线：<u>…………</u>
  • （3）：换行标记：<br/>

七：图像的样式

设置图像宽度 Width 设置图像高度 Height 设置图像边框 border 设置图像外边距 margin 设置图像图文混排 Float；left；right

  • （1）：块级元素：在页面中以区域块的形式呈现会独立占据一整行如：<h>标题元素<p>段落元素和
    元素。
  • （2）:行内元素：在页面中他可以和其他元素显示在一行中如：<a>超链接元素
  • （3）：所有块级元素若想左右排列则需添加float属性，所有行内元素则不需要。
  • （4）：选择符的类型：标记名选择符；Id选择符；Class(类)选择符

八:绝对单位值

属性值单位	描述	属性值单位	描述
px	        像素	  mm	         毫米
pt	         磅	  cm	         厘米
pc	        皮卡	  in	         英寸
相对单位值： em   ex   %

九：超链接标记及属性

  • （1） 超链接标记

<a href =”http:…………”>链接文本或图像</a> Target 属性指定链接页面的显示窗口（默认为serf当前窗口，还可以设置为blank 新窗口，parent 父框架，top 顶层框架）

  • （2）：对页面中所有超链接设置相同伪类样式。
a:link{ }单独指定尚未访问过的超链接的样式。
a:visited{ }单独指定以访问过的超链接的样式。
a:hover{ }单独指定鼠标指向超链接的样式。
a:active{ }单独指定单击激活的超链接的样式。


自动定位：position：static （3） 盒子的定位 相对定位：position：relation 绝对定位：position：absolute 固定定位：position：fixed

说明： （1）：相对定位是相对于其本身定位进行偏移，绝对定位是相对于父盒子或浏览器进行偏移。 （2）：相对定位时其他盒子给其留空，绝对定位时不留空。

  • 元素的显示方式：display：显示方式 （1）：inline 行内元素（2）：block 块级元素(3):none 隐藏元素
  • 元素的可见性：visibility：可见性 （1）：visible 元素可见（2）：hidden 元素隐藏不可见(3):inherit使用父元素的可见性


说明：当用display设置元素的隐藏时旧元素不给留空，当用vsibility 设置隐藏时留空。

十：列表

（1） 有序列表： 代码： <ol> <li>………</li> </ol> 

Type编号类型	显示内容
1(默认)	数        123
 A或a	       英文字母 abcd
 I或I	       罗马数字

（2） 无序列表： 代码： <ul [type=”项目符号”> <li>……..</li> </ul> 

 type项目符号可以取用 disc   circle  square


(3)定义列表： <dl> <dt> 名词</dt> <dd>名词解释</dd> </dl>

  • 说明：<dl>标记无编号，无符号的数语“定义列表”是一种两种层次的列表，可提供术语名词和该名词解释的两级信息<dt>标记指定术语名词不缩进，</dt>可省了但必须有文本<dd>标记指定术语的解释自动缩进，</dd>可省略。

十一：列表样式属性

列表样式属性 取值和属性


  • List-style-type：符号类型 有序：disc 圆点，circle 圆圈 Square 方块 none 无 ，decimal数字 ，lower-alpha /upper-alpha英文字母 ，lawer-roman/upper-roman罗马数字 lower-greek 希腊字母 Lower-Greek/lower-Latin拉丁字母
  • List-style-position：符号位置 Outside 符号位于文本左侧外部 Inside 符号位于文本内部
  • List-style-image：URL： 用图像符号替换列表符号
  • List-style：类型/URL位置： 顺序任意

十二：简易表格代码

<table>	
<tr>  	
   <th>…………</th>	
   <td>…………..</td>	
</tr>	
 </table>

*说明：表格的合并：（1）：跨行合并rowspan=””(2):跨列合并colspan=””

十三：表单标记

  • （1）：创建表单标记，<form action=”服务器URL”>……..</form>。
  • （2）：表单输入标记：<input type =”控件类型”name=”控件名称”/>

1：单行文本框 type=”text”（默认） 

Value： 指定控件默认自动输入显示的初值
Maxlength;指定控件允许输入的最多字符或汉字个数
Disabled：设置第一次加载页面时禁用该控件-灰色不可用
Readlonly:指定该控件内容为只读

2：密码框：type=”password” 

  <input type=”password”name=”名称” value=”默认值” Maxlength =”最大字符数” readonly=” readonly”disabled=“disabled”placeholder=“提示信息”/>

3:隐藏表单域 type=“hidden” 

  <input type=”hidden”name=”名称” value=”默认值”/>
  提示信息：<input type=”text”name=”uname” placeholder=”请在此输入姓名”required=“required” />

4:复选框 type =“checkbox” 

  <input type=”checkbox”name=”名称” value=”提交值” check=”checked”disabled=“disabled”/>

5:单选按钮 type=“radio” 

  <input type=”radio”name=”名称” value=”提交值”/>

6:提交值按钮 type=“submit” 

  <input   type=”submit”name=”名称” value=”显示文字”/>

7：取消按钮 type=”reset” 

  <input  type=”reset”name=”名称” value=”显示文字”/>

8:显示文件的文件域：type=“file” 

  <input type=”file”name=”名称”/>

9：用图像代替提交按钮 type=“image” 

  <input type=”image” src=”图像文件url”name=”名称”alt=”图像不显示的替代文本”width=“宽度”height=“高度” />

10：标准按钮 type=“button” 

    <input type=”radio”name=”名称” value=”显示文字”/>

第二部分 Java 术语

一：控制台输出

1：Java中常用的输出语句有以下三种： 

System.out.println();
 System.out.print();
 System.out.printf();

二：Java控制台输入

  • 说明：Scanner是一个基于正则表达式的文本扫描器，使用Scanner类可以很方便地获取用户的键盘输入

2:完整代码: 

      import java.util.Scanner;
public class TestDemo {                                                         
      public static void main(String[] args) {
           Scanner scan = new Scanner(System.in); // 从键盘接收数据
   System.out.println("next方式接收：");  // next方式接收字符
           String str1 = scan.next();
        System.out.println("输入的数据为：" + str1);                                            
        scan.close();
    }
}

三： Java数据类型转换

1：什么叫自动类型转换 当把一个表示范围小的数值或变量直接赋值给另一个表示范围大的变量时，系统将进行自动数据类型转换。 例如：int a = 6; //声明一个int类型变量a 

     double d = a; //将a赋值给d，会进行自动类型转换 System.out.println(d); //此时输出6.0

2：强制类型转换 

  例如：double d = 7.5;

3：字符串转换为基本类型 

    例如：String str = "45";

//使用Integer的方法将一个字符串转换成int类型 int iValue = Integer.parseInt(str); String ds = "5.3739"; //使用Double的方法将一个字符串转换成double类型 Double d = Double.parseDouble(ds);





第三部分bootstrap入门

一： bootstrap起步

1：下载安装bootstrap 

  网址：点此下载bootstrap

2：Bootstrap 源码介绍： 

  Bootstrap 源码包含了预先编译的 CSS、JavaScript 和图标字体文件，并且还有 LESS、JavaScript 和文档的源码。具体来说，主要文件组织结构如下：
  
 bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/


3：基本模板 

  这就是一个最简单的 Bootstrap 页面：
 
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>
     <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

二：全局css样式

1：栅格系统： Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。 

1.1：媒体查询：
  在栅格系统中，我们在 Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值。
   /* 超小屏幕（手机，小于 768px） */
    /* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

     /* 小屏幕（平板，大于等于 768px） */
    @media (min-width: @screen-sm-min) { ... }

     /* 中等屏幕（桌面显示器，大于等于 992px） */
    @media (min-width: @screen-md-min) { ... }

    /* 大屏幕（大桌面显示器，大于等于 1200px） */
    @media (min-width: @screen-lg-min) { ... }
   
1.2：实例：手机、平板、桌面
在上面案例的基础上，通过使用针对平板设备的 ''.col-sm-* 类，我们来创建更加动态和强大的布局吧。
   
  <div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

1.3：实例：多余的列（column）将另起一行排列：
如果在一个 .row 内包含的列（column）大于12个，包含多余列（column）的元素将作为一个整体单元被另起一行排列。
代码：
 
  <div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
  </div>
  
1.4：响应式列重置
即便有上面给出的四组栅格class，你也不免会碰到一些问题，例如，在某些阈值时，某些列可能会出现比别的列高的情况。为了克服这一问题，建议联合使用 .clearfix 和 响应式工具类。
代码：
 
 <div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

2：排版 

2.1：标题
HTML 中的所有标题标签，<h1>  到 <h6>  均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。
代码：
 
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
  
2.2对齐
通过文本对齐类，可以简单方便的将文字重新对齐。
代码：
 <p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
  
2.3地址
让联系信息以最接近日常使用的格式呈现。在每行结尾添加 
 可以保留需要的样式。
代码：
 
<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>

3：列表 

3.1：无序列表
排列顺序无关紧要的一列元素
代码：

 <ul>
  <li>...</li>
 </ul>
 
3.2：有序列表
排列顺序无关紧要的一列元素
代码：

 <ol>
  <li>...</li>
 </ol>
 
3.3无样式列表
移除了默认的 list-style 样式和左侧外边距的一组元素（只针对直接子元素）。这是针对直接子元素的，也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式。
代码：
 
<ul class="list-unstyled">
  <li>...</li>
</ul>
4：表格

取自“http://www.openbrains.net/mediawiki/index.php?title=Cloud_Yellow&oldid=8771”