c#开发之一---前端技术html/css-创新互联

苏州IT之家群：46213669，技术交流，招聘就业，职业发展，欢迎苏州IT人士加入。

成都创新互联公司主要从事网站制作、成都网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务雁峰,十多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108

第一部分：html

表单标签：

1、 form

<form action=www.loready.cn/mothd.aspxmethod=POST> //把表单中的内容提交到服务器中www.loready.cn/mothd.aspx文件。

</form>

2、Input

Text:文本输入框，可以定义文本框长短，字符输入大数等。

姓名：<inputtype="text"name="name"/></br>

Password:密码输入框，输进去的都变成星号。

密码：<inputtype="password"name="password"/>

Radio:单选框

性别：<inputtype="radio"name="sex"value="male"/>male

<inputtype="radio"name="sex"value="female "/>female

Checkbox:多选框

爱好：<inputtype="checkbox"name="hobby"value="tour"/>旅游

<inputtype="checkbox"name="hobby"value="book"/>看书

<inputtype="checkbox"name="hobby"value="sports"/>运动

Range:范围选择

<inputtype="range"value="high" min="1" max="10"/>

Image：图像，将图像作为提交按钮，必须有alt属性。

                <input type="p_w_picpath" src="img_submit.gif" alt="Submit" />

Button：按钮，仅仅只是一个按钮而以，要使按钮有作用，需要为按钮定义事件触发。

<inputtype="button"value="button1"/>

Submit：把表单数据通过get或post提交到服务器。

<inputtype="submit"value="提交"/>

Reset：重新填写表单中的内容。

<inputtype="reset"value="重置"/>

Hidden:隐藏表单

<inputtype=hidden name=add value=hoge@hoge.jp>

3、textarea：文本区域，即多行多列文本框。

4、select：下拉列表

城市：

<selectname="city"size="3">

<optionselected="selected"value="suzhou">苏州</option> //默认选择谁，可以多选

<optionvalue="najin">南京</option>

<optionvalue="wuxi">无锡</option>

<optionvalue="changzhou">常州</option>

</select>

文字列表：

ulli:无序列表

<ul>

<li>coffe</li>

<ul>

显示结果

。coffe //前面带标号，标号类型可以改，有方型，圆型等。

。tea

ul ol有序列表

<ul>

<ol>coffe</ol>

<ul>

显示结果

1.coffe //前面带序号，序号可以改，不仅仅是数字，可以改成字母等。

2.tea

自定义列表

<dl>

<dt>coffe</dt> //定义列表内容

<dd>一种来自国外的黑色的饮料</dd> //描述列表内容

<dd>中国的传统饮品</dd>

</dl>

显示结果：

Coffe

一种来自国外的黑色的饮料

Tea

中国的传统饮品

第二部分：CSS

一、CSS选择器

1、元素选择器

如：

html {color:black;}

p {color:gray;}

h3 {color:silver;}

2、选择器分组

body, h3, p, table, th, td, pre, strong, em{color:gray;}

所有的元素颜色都是灰色

3、类选择器

（1）基本格式

.important {color:red;} //拥用important类的所有标签字体都变成红色。

<h2>Thisheading is very important.</h2>

<p>Thisparagraph is very important.</p>

（2）结合元素选择器

p.important {color:red;} //所有拥有important类的段落字体变成红色。

<p>Thisparagraph is very important.</p> //会变红色

<h2>Thisheading is very important.</h2> //不会变，因为标签不是p.

（3）派生类选择器

.fancy td {

color:#f60;

background:#666;

}

拥有fancy 类的标签下面的表格颜色背景改变。

（4）多类选择器

.important {font-weight:bold;} //拥有important类的标签字体变粗。

.warning {font-style:italic;} //拥有warning类的标签变斜体

.important.warning {background:silver;}//同时拥有important和warning类的标签字体变粗，变斜体的同时，还加上底纹。

<p>This paragraph is a very important warning.</p> // 两个类之间用空格分开

4、ID选择器

#intro {font-weight:bold;} //ID选择器是唯一的,文档中能且只能使用一次。id属性只能在每个 HTML 文档中出现一次

二、CSS定位

1、static(静止定位)

不脱离文本流。无特殊定位，它是html元素默认的定位方式，即我们不设定元素的position属性时默认的position值就是static，它遵循正常的文档流对象，对象占用文档空间，该定位方式下，top、right、bottom、left、z-index等属性是无效的。

2、relative(相对定位）

不脱离文本流。相对定位相对的是它原本在文档流中的位置而进行的偏移。随父级标签缩放，相对位置不变。可经由过程z-index进行层次分级.

3、absolute（绝对定位）

脱离文本流。相对于父级进行定位。但父级只能是以relative或absolute定位的父层，不能是以static定位的。如果父层是static 定位的，就向父层的父层进行查找，直到找到有以relative或absolute定位的层，如果找不到就以body原点为定位点。可以通过z-index进行层次分级

4、fixed

fixed是特殊的absolute，即fixed总是以body为定位对象的，按照浏览器的窗口进行定位。

5、float

Html页面中分为块元素和行内元素。块元素是要占据整行，如h2~h7、p、div、ul、table。行内元素不占用整行，如span、a、input、select。

应用float属性后的元素会脱离文本流。当float元素脱离文本流后，后边如是块元素，会占用float元素的文本流位置。如果float元素与块元素发生重叠，那么float元素会覆盖块元素。而行内元素不会，只会紧挨在float元素前边或后边。

Float的属性：

Left:元素向左浮动，直到碰到父元素的边框，默认是body边框，或其他float元素。

Right:元素向右浮动，直到碰到父元素的边框，默认是body边框，或其他float元素。

Inherit：从父元系继承float属性。大多数浏览器不支持此值。

None:默认值。不浮动。

Clear属性：

Left: 在左侧不允许浮动元素，即清空浮动元素的左侧的浮动元素，但文本流内的块元素和行内元素是可以出现的。只是如果是块元素有可能发生重叠。

Right: 在右侧不允许浮动元素，清空浮动元素的右侧的浮动元素。

Both: 在两侧不允许浮动元素，清空浮动元素的两侧浮动元素。

None:默认值，允许浮动元素出现在两侧。

三、框模型概述

从外到内分别为：

Margin:外边距

Border：边框

Padding：内边距

Element：元素

即元素到父元素或上一元素间会有内边距，边框，外边距三层内容可以设置。

设置顺序为：上，右，下，左。如只设两个值，则上下，和左右一样，只设一个值，则上下左右一样。

.input{

Margin:10px 5px 3px 3px; //内边距分别为上10像素，右5像素，下3像素，左3像素。

}

.input{

Margin:10px 5px; //内边距分别为上下为10像素，左右5像素

}

.input{

Margin: 5px; //内边距分别为上下左右5像素

}

苏州IT之家群：46213669，技术交流，招聘就业，职业发展，欢迎苏州IT人士加入。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

当前文章：c#开发之一---前端技术html/css-创新互联
URL地址：https://www.cdcxhl.com/article32/coocsc.html

成都网站建设公司_创新互联，为您提供App设计、品牌网站建设、网站内链、小程序开发、用户体验、网站设计

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容