Cloud Yellow

来自CloudWiki
112.38.217.46讨论2018年8月2日 (四) 07:45的版本 第三部分bootstrap入门
跳转至: 导航搜索

第一部分网页

一:网页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>

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