书读百遍，其义自见

　遵照这句话 今天再次重新把慕课网的ＨＴＭＬ＋ＣＳＳ看了一遍，再次阅读感受不再是那么陌生，从而心里默默地喜欢上了这种方式，坚持。

　好了，开始今天的收获小总结

　1、html中，表单<form>

　　1)一旦说到交互问题，就是要用<form>的标签实现，比如　单选，多选，输入密码，输入文本框等

<form method="post" action="save.php">

要实现的各个交互功能的标签

            </form> 

2)谈谈form表单中的label标签，当鼠标点击label中的文本，就会触发此控件

<input name="sex" type="radio" id="man">

<label for ="man">男</label>

<input name="sex" type="radio" id="man">

           <label for ="woman">女 </label>

2、CSS中

1）CSS ( Cascading Style  Sheets) 层叠样式表

其中 “层叠”指的是样式的优先级，当产生冲突时以优先级高的为准

2）根据CSS样式的插入方式分为三类：内联式 ，外联式，嵌入式

注意下 外联式是把CSS样式写在单独的.css文件中  然后用如下方式调用

<head>

              <link href="base.css" rel="stylesheet" type="text/css" /> 

         </head>

    3)对于插入的是嵌入式CSS样式的定义

格式： 选择符{属性：值；}             注：属性多的话中间加“ ；”，最后也加上“ ；”，以后在再里面添加属性的时候方便，不容易出现此类错误

选择符也叫选择器，指的就是所要作用的对象，如 p,span,div 标签

选择符包括以下几类：

1.标签选择器  如： p{ font-size:18px;color:red}

2.类选择器   “.”开头  如：  .first{width:100px; length:500;}   注意：first 是自定义的

3.ID选择器  “ #”开头 如：  #first{width:100px; length:500;}

4.子选择器   ”>"    如：p>span{color:green;}

5.后代选择器 空格  如：p span{color:green;}

6.通用选择器  *开头  如：  *{font-size:18px;}

7.伪类选择器 现在多用 a:hover{colro:red}   意思就是 当鼠标移动到这个链接后就显示为红色

8.分组选择器  多个标签名之间用”，“隔开  如：h1,span{color:red;}      当多个标签的css样式是一样时，为简洁高效 直接将其放置在一起设置

4)盒子模型

可以想象成一个月饼大礼盒，包装外壳就是这个浏览窗口，里面的几块月饼就是几个模块，

月饼离外边那个大包装盒之间的距离就是边界  margin --------可以设置属性 距离

一个月饼就是一个div模块，一个月饼包装有 外壳盒子就是边框border -------可以设置属性  粗细，颜色，样式（实线，虚线，点线）

月饼盒子与月饼的之间就是叫填充 padding

所以要明白  一个模块的实际宽度是  margin+border+padding+width(内容的宽度)

No.4小白的HTML+CSS心得篇的更多相关文章

  1. No.1小白的HTML+CSS心得篇

    一个web前端的小白,听前辈说写好笔记很关键,so 特此用博客来开始记录自己的旅程——Web之路 最近几天看的HTML 1.纠正一个认知错误 “HTML是一种编程语言”  ————(错) HTML ( ...

  2. No.3小白的HTML+CSS心得篇

    A--看的东西多了总会出现好多模糊不清的又长的很像的的词语 今天对此进行区别分析下 1. align 与 text-align的区别 align 在W3Cschool中是这样解释的  ----alig ...

  3. No.2小白的HTML+CSS心得篇

    今天要强调的重点是分析把握好HTML标签的两个方面: 1.标签的用途(用途指的是用来干什么,有什么作用)在专业术语叫作 语义化. 举个列子:<br/> 换行的作用 见了它就明白它的语义就是 ...

  4. 深入css布局篇(3)完结 — margin问题与格式化上下文

    深入css布局(3) - margin问题与格式化上下文      在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下 ...

  5. 深入css布局篇(2) — 定位与浮动

    深入css布局(2) - 定位与浮动      在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识 ...

  6. 小白学Docker之基础篇

    系列文章: 小白学Docker之基础篇 小白学Docker之Compose 小白学Docker之Swarm PS: 以下是个人作为新手小白学习docker的笔记总结 1. docker是什么 百科上的 ...

  7. CSS效果篇--纯CSS+HTML实现checkbox的思路与实例

    checkbox应该是一个比较常用的html功能了,不过浏览器自带的checkbox往往样式不怎么好看,而且不同浏览器效果也不一样.出于美化和统一视觉效果的需求,checkbox的自定义就被提出来了. ...

  8. CSS效果篇--这里有你想要的CSS3漂亮的自定义Checkbox各种复选框

    在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>.这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html代码都 ...

  9. 我的web前端自学之路-心得篇：我为什么要学习web前端？

    时光如流水,转眼间,自己已经是大三的学长了,看着一个个学弟学妹,心中有种莫名的感觉,很怀念大学的前两年时光,但也很憧憬着自己的未来,自己将要去经历很多从未经历的事.我是我们学校信科院的一名学生,在编程 ...

随机推荐

  1. Application（basic）----Easyui

    一,效果图. 二,源代码. <!DOCTYPE html><html><head> <meta charset="UTF-8"> & ...

  2. jQuery给table中的负数标红色

    <table class="tb_list"></table> $(function(){ $(".tb_list td").each( ...

  3. Javascript 设计模式笔记

    设计模式太多了 还有些模式概念非常接近(比如观察者 中介者 和 事件发布/订阅模式) 构造器模式 var newObject = {} var newObject = new XXX(); 模块模式 ...

  4. Canvas 雾玻璃

    Demo http://lumixraku.github.io/demos/Fog/Fog.html Canvas tutorial 给大家安利一个学习Canvas的站点 http://www.htm ...

  5. cpan安装及其使用

    cpan安装及其使用 Perl是一种相当灵活的程序编程语言,现有的许有程序都是使用它进行编程的.它的优点之一就是无需自己编写编码,你就能利用许多增加的模块,创建新的功能. 程序利用这些模块的编码,而程 ...

  6. 使用java API查询java类

    一.java API的下载地址 前面列举了常用的java类,但只是介绍了功能,具体详细的用法(比如要知道该类的属性和方法)要需要调用java的API(Application Program Inter ...

  7. 苹果 App 转移图文详解

    目前公司在做App转移操作,在网上搜索相关资料加上自己的亲自操作,整理成一个文档,希望能给你提供帮助. 如转载请添加出处. 此文章只是为了记录一个Apple ID下的APP,转移到另外一个Apple ...

  8. iOS 从app跳转到Safari、从app打开电话呼叫

    1.从app跳转到Safari NSString* strIdentifier = @"http://www.ybyb.com"; BOOL isExsit = [[UIAppli ...

  9. c++之构造函数学习

    #include<stdio.h> class Test {      private:      int i;      int j;      int k;     public :  ...

  10. JavaSE_ IO流 总目录(19~22)

    JavaSE学习总结第19天_IO流119.01 集合的特点和数据结构总结19.02 如何选择使用哪种集合19.03 集合常见功能和遍历方式总结19.04 异常的概述和分类19.05 JVM默认处理异 ...