c#开发之一---前端技术html/css

发布时间:2020-07-26 15:41:52 作者:kuang_hp
来源:网络 阅读:725

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


第一部分:html

1、  form

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

</form>

 

2Input

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:把表单数据通过getpost提交到服务器。

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

 

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

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

Hidden:隐藏表单

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

 

3textarea:文本区域,即多行多列文本框。

<textarea  name="show"rows="5"cols="60"></textarea>

          

 

4select:下拉列表

            城市:

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

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

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

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

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

            </select>       

 

文字列表:

ulli:无序列表

<ul>

<li>coffe</li>

<li>tea</li>

<ul>

 

显示结果

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

tea

 

ul  ol有序列表

<ul>

<ol>coffe</ol>

<ol>tea</ol>

<ul>

 

显示结果

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

2.tea

 

自定义列表

<dl>

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

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

<dt>tea</dt>

<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;}//同时拥有importantwarning类的标签字体变粗,变斜体的同时,还加上底纹。

 

 

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

 

 

4ID选择器

 

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

 

二、CSS定位

 

1static(静止定位)

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

 

2relative(相对定位)

 

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

 

3absolute(绝对定位)

 

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

4fixed

 

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

 

 

5float

Html页面中分为块元素和行内元素。块元素是要占据整行,如h2~h7pdivultable。行内元素不占用整行,如spanainputselect

应用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人士加入。

 

 


推荐阅读:
  1. 原来按下这个按钮,iPhone手机秒变扫描仪,你不会还不知道
  2. 使用linux的slocate命令查找文件或目录

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

html css 前端技

上一篇:SpringBoot基础篇之重名Bean的解决与多实例选择

下一篇:php 数组排序且取数组条数

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》