书读百遍,其义自见

 遵照这句话 今天再次重新把慕课网的HTML+CSS看了一遍,再次阅读感受不再是那么陌生,从而心里默默地喜欢上了这种方式,坚持。

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

 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. mongodb数据库调试问题:‘db object already connecting, open cannot be called multiple times’

    在微博小系统的调试过程中: (1)登入登出可以正常显示,就是在注册的时候网络连接突然停止,但是用户名和密码已经存入数据库中,报错为:undefined is not a function 错误主要指向 ...

  2. codeforces 632F. Magic Matrix

    题目链接 给一个n*n的矩阵, 问是否对角线上的元素全都为0, a[i][j]是否等于a[j][i], a[i][j]是否小于等于max(a[i][k], a[j][k]), k为任意值. 前两个都好 ...

  3. Qgis插件开发之Qgis源码学习

    Qgis源码中的拖拽.zoomin/out等各个基础功能插件的实现位于qgis_app工程中. 具体头文件为: \QGIS\src\app\qgisapp.h 根据此类可以逐个找到Qgis的基础插件的 ...

  4. Linux内核和驱动编译常见问题

    1.获取内核源码应为 git clone depth=1  不然编译时会报错 2.有些RTL188CUS网卡与wpa_supplicant兼容有问题 更新wpasupplicant或许能解决 这里用i ...

  5. angular的$q服务和promise模式

    此承诺/延迟(promise/deferred)实现的灵感来自于 Kris Kowal's Q CommonJS Promise建议文档 将承诺(promise) 作为和 异步执行操作(action) ...

  6. 转: angular编码风格指南

    After reading Google's AngularJS guidelines, I felt they were a little too incomplete and also guide ...

  7. Qt项目管理(33个规则)

    2016-06-20 花莫弦 小小杂货铺LY 一.qmake的介绍 qmake是Trolltech公司创建的用来为不同的平台和编译器书写Makefile的工具. 手写Makefile是比较困难并且容易 ...

  8. 对开发中常见的内存泄露,GDI泄露进行检测

    对开发中常见的内存泄露,GDI泄露进行检测 一.GDI泄露检测方法: 在软件测试阶段,可以通过procexp.exe 工具,或是通过任务管理器中选择GDI对象来查看软件GDI的对象是使用情况. 注意点 ...

  9. ubuntu使用crontab

    crond服务通常被放在/etc/init.d/crond , 这样就可以在系统启动后自动启动crond服务. linux中的用户使用crontab命令来配置cron任务. crontab在/etc目 ...

  10. PHPRPC for PHP

    14的路 PHPRPC for PHP PHPRPC 是一个轻型的.安全的.跨网际的.跨语言的.跨平台的.跨环境的.跨域的.支持复杂对象传输的.支持引用参数传递的.支持内容输出重定向的.支持分级错误处 ...