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

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

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

第一部分:html

  • 表单标签:

1、 form

 //把表单中的内容提交到服务器中www.loready.cn/mothd.aspx文件。

2、Input

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

姓名:

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

密码:

Radio:单选框

性别:male

                 female

Checkbox:多选框

爱好:旅游

                 看书

                 运动

Range:范围选择

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

                

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

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

                 

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

Hidden:隐藏表单

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

4、select:下拉列表

           城市:

           

               苏州 //默认选择谁,可以多选

               南京

               无锡

               常州

           

文字列表:

ulli:无序列表

  • coffe
  • tea
    • 显示结果

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

      。tea

      ul ol有序列表

          coffe

          tea

          显示结果

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

          2.tea

          自定义列表

          coffe
                                  //定义列表内容

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

          tea

          中国的传统饮品

          显示结果:

          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类的所有标签字体都变成红色。

          Thisheading is very important.

          Thisparagraph is very important.

          (2)结合元素选择器

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

          Thisparagraph is very important.

            //会变红色

          Thisheading is very important.

           //不会变,因为标签不是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类的标签字体变粗,变斜体的同时,还加上底纹。

          This paragraph is a very important warning.

           // 两个类之间用空格分开

          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-创新互联
          浏览路径:http://hbruida.cn/article/coocsc.html