博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML和CSS的精华
阅读量:7120 次
发布时间:2019-06-28

本文共 6040 字,大约阅读时间需要 20 分钟。

         今天又是周一喽,我们开始啦又一周的学习啦,想一想,在这里学习已经一个月啦,不知什么时间已经习惯啦这种生活,我应该是一个很难适应环境的人啊,但是现在在这里感觉还可以哦,可能是来到这里有自己的目标吧,所以自己的坏习惯就没有暴漏啦,这样挺好的,我只是想通过自己的努力去做自己想做的事情,或许很多人不能理解我现在的选择,或许今天的我应该呆在家里面足不出户,或许今天的我应该选择一个稳定的工作,但是我没有,我不想这样,一点都不想,我不知道选择这个要走多远,或许我学习了这个但是未来的工作却没有选择这个方向,但现在我乐意学习,我的兴趣告诉我,此刻不论我面对的是什么,我都要努力学习···接下来的三个月无论怎么样都要坚持。好啦下面就来总结一下今天学习的内容吧。

      一.html中的表单元素

    举例说明Form表单的元素吧,

  •  用户名一般为一个文本框,所以把type设置为text即可;
  •  type为password则为“密文型的文本框”;
  •  性别一般为单选按钮,type为radio,但是在这里需要注意的是,在添加两个单选按钮时间需要把他们的值设置为一样的这样才能陈文给单选;
  •  个人爱好一般为多选框,所以在这里用的checkbox来设置,则输出的为多选框的样式;
  •  下面还有一个选择国籍,则选择的是下拉列表,type为select;
  •  当type为file时间,则为我们往常看到的文件的上传下载格式,在这里textarea即设置上传文件的文本框的行和列;
  •  接下来就是按钮,当type为重置时间一般设置type为reset,当为注册时间一般为submit,登录时间就用button,虽然它不是Form中的元素,但是可以显示,而其设置的值就是按钮上面显示的字体;
  •  还有一个是图片按钮,设置type为image,属性src为图片路径,然后是图片的宽度和高度。

     如下代码所示以及在浏览器中浏览显示的格式:

    

    
 
 
 
 
 
 

     

       另外还有一些设置,如下面代码和图片可以看出来其代码实现的功能。

    
数字:
颜色输入框:
邮箱地址:
电话号码:
范围:
日期:
日期时间:
月:
周:
时间:
Url:
隐藏:
搜索框:

 

             

           上面的设置我想通过标签的显示就能看出其格式的设置啦吧,所以以上这些就是html中的From表单。

              二.html的框架

               在这里创建一个Html静态页面,然后删除<body></body>标签,添加<frameset></frameset>,其格式就是这样的,如下代码所示:

              

             在这里可以看到在标签<frameset></frameset>中有一个rows属性,他的值为25%和*,在这里25%表示搜狐网页占25%,下面一个网站占剩下的部分,这里仅仅是一个举例,对比下框架的分配以及各式的显示,大体上面分为三部分,如下图所示:

                

               三.CSS层叠样式表

            1. 下面举例说一下css的优点,为什么我们要用css样式那?         

大家好!欢迎在云和学院学习Net开发

大家好!欢迎在云和学院学习Net开发

大家好!欢迎在云和学院学习Net开发

大家好!欢迎在云和学院学习Net开发。

大家好!欢迎在云和学院学习Net开发。

      上面的代码运行的结果如下所示:

         

                在这里,前两行的字体都要在<p>标签中设置,感觉很麻烦,而最后三行的字体就是把p标签给提取出来放在head里面,但是要用标签stytle,格式如上面所示,在p标签里面设置字体的属性,从而使在p标签中的元素都可以显示其属性,这样就是简单多啦。而前两个内容也是在p标签中,但是他们设置的有自己的属性,在css中有一个特性就是就近一致原则,因此前两行就显示了其自己的行内的属性,像这样在行内设置其css样式的就叫做行内样式;想下面的那种把p标签提取出来的就叫做标签选择器。

           2.下面说一下css中的类选择器和id选择器

大家好!欢迎在云和学院学习Net开发

大家好!欢迎在云和学院学习Net开发

大家好!欢迎在云和学院学习Net开发

大家好!欢迎在云和学院学习Net开发

           上面所示,在p标签中仅仅需要写一个 class=”label“,class可以任意取名字,然后像上面的方法一样,把其p标签中的属性提取出来,即.class的值,然后在花括号里面设置其属性,像这样的方法就是类选择器;而在p标签中仅仅需要写一个id=”id“,id的值也可以任曦选取名字,然后#id的值加上花括号,并在花括号内设置其属性,这样的方法叫去哦id选择器。   

欢迎来到云何学院学习.net

欢迎来到云何学院学习.net

欢迎来到云何学院学习.net

欢迎来到云何学院学习.net
欢迎来到云何学院学习.net

欢迎来到云何学院学习.net

    

             前面说过啦标签选择器和id选择器,而在上面例题中还有一个p.color,其实上面这个就是对其中一个设置了class的p标签设置其属性,而只想让其设置了class的显示其属相,只需要用p.class的值加上花括号,在花括号内设置其属性即可。

        3.多选择器 

还记得家乡的味道

还记得家乡的味道
还记得家乡的味道   
.c1, .c2, .c3 {            color:bisque        }

              像上面所示,把css添加在样式表中,在html页面中调用css样式表,格式如上面所示,即在head标签中用link标签即可,而在p标签,div标签和span标签都设置了class的值,然后分别设置值为c1,c2,c3,然后再样式表中用逗号(,)隔开,加上花括号即可,在花括号内设置其属性,这样的方法就叫做多选择器。

           4.需要注意的是,在css样式表中设置字体时间可以设置任意几种字体格式,如下所示:

          

天青色等烟雨,而我在等你

         上面的p标签中在设置字体时间就是设置了多种格式,这个是由于可以根据浏览器的不同,自动选择不同的字体样式,更加方便。

          总结一下css中字体的属性:

          color:字体颜色;

          font-size:字体大小;

          font-fanily:字体格式;

          font-weight:加粗。

          图片的属性:border:图片边框。如下所示:

旋转音乐盒

作词:阿悄 aa

作曲:阿悄

演唱:阿悄,童可可

在身边呀 很耀眼

爱神秘密地出现

那光圈 太遥远

好几光年

云朵在冒烟 又再见面

原来是你的视线

不停回旋 不停转圈

好想念

像幻觉

我在他身边

他身边

我愿跳舞直到深夜

愿望会实现

音乐旋转旋转不停歇
爱着那天那天不终结
盒子旋转旋转不停歇
爱你永远永远不终结

在身边呀 很耀眼

爱神秘密地出现

那光圈 太遥远Hello World

好几光年HeLLo WoRLd

爱你永远永远不终结Hello World

 

p {    text-align:center;}
.class {    font-family:华文彩云;           /*字体*/    color:green;                    /*字体颜色*/    font-size:large;                /*字体大小*/    font-weight:900;                /*加粗程度*/}
.c1 {    font-variant:small-caps   /*小写转大写形式*/}
.c2 {    font-family:微软雅黑;    font-weight:bolder;      }
.c3{    font:italic bold small-caps 19px 宋体; /*五个*/}
#id {    font-family:宋体;    color:red;}
.c4 {    text-decoration:underline;}.c5 {    text-decoration:overline;}.c6 {    text-decoration:line-through;}
.c7{    text-align:left;}.c8 {    text-align:right;}
pre {    text-indent:2%;}
.c9{    line-height:20;}
.c10 {    text-transform:uppercase;}.c11 {    text-transform:lowercase;}.c12 {    text-transform:capitalize;}

 

          如下所示:

                   

          另外还学习了a标签和list标签的属性以及盒子模型,明天我再写吧,嘿嘿,可能是html和css这个东西比较碎吧,但是总体上东西还是比较容易学习的啦,可能是因为我们仅仅了解一下吧,毕竟我们是写后台程序的,嘿嘿,就写到这里啦。  

             

转载地址:http://tsiel.baihongyu.com/

你可能感兴趣的文章
lintcode:线段树的构造
查看>>
could not be installed at this time
查看>>
随机函数(Pascal入门)
查看>>
【NLP】蓦然回首:谈谈学习模型的评估系列文章(一)
查看>>
Java传值和传址
查看>>
两种常用的启动和关闭MySQL服务
查看>>
C# 事件
查看>>
一场改变你投资生涯的讨论:职业德州扑克手看交易
查看>>
IDEA 设置忽略那些文件不提交到SVN服务器
查看>>
HTTP的长连接和短连接
查看>>
ConcurrentHashMap并不是绝对线程安全的
查看>>
Oracle Instance
查看>>
使用网络监视器(IRSI)捕捉和分析协议数据包
查看>>
【机房重构】总结
查看>>
Android从无知到有知——NO.6
查看>>
自己写的php curl库实现整站克隆
查看>>
Combination Sum III -- leetcode
查看>>
机器学习算法中的过拟合与欠拟合(转载)
查看>>
机器学习算法实践:决策树 (Decision Tree)(转载)
查看>>
slack 团队协作平台
查看>>