No.4小白的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心得篇的更多相关文章
- No.1小白的HTML+CSS心得篇
一个web前端的小白,听前辈说写好笔记很关键,so 特此用博客来开始记录自己的旅程——Web之路 最近几天看的HTML 1.纠正一个认知错误 “HTML是一种编程语言” ————(错) HTML ( ...
- No.3小白的HTML+CSS心得篇
A--看的东西多了总会出现好多模糊不清的又长的很像的的词语 今天对此进行区别分析下 1. align 与 text-align的区别 align 在W3Cschool中是这样解释的 ----alig ...
- No.2小白的HTML+CSS心得篇
今天要强调的重点是分析把握好HTML标签的两个方面: 1.标签的用途(用途指的是用来干什么,有什么作用)在专业术语叫作 语义化. 举个列子:<br/> 换行的作用 见了它就明白它的语义就是 ...
- 深入css布局篇(3)完结 — margin问题与格式化上下文
深入css布局(3) - margin问题与格式化上下文 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下 ...
- 深入css布局篇(2) — 定位与浮动
深入css布局(2) - 定位与浮动 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识 ...
- 小白学Docker之基础篇
系列文章: 小白学Docker之基础篇 小白学Docker之Compose 小白学Docker之Swarm PS: 以下是个人作为新手小白学习docker的笔记总结 1. docker是什么 百科上的 ...
- CSS效果篇--纯CSS+HTML实现checkbox的思路与实例
checkbox应该是一个比较常用的html功能了,不过浏览器自带的checkbox往往样式不怎么好看,而且不同浏览器效果也不一样.出于美化和统一视觉效果的需求,checkbox的自定义就被提出来了. ...
- CSS效果篇--这里有你想要的CSS3漂亮的自定义Checkbox各种复选框
在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>.这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html代码都 ...
- 我的web前端自学之路-心得篇：我为什么要学习web前端？
时光如流水,转眼间,自己已经是大三的学长了,看着一个个学弟学妹,心中有种莫名的感觉,很怀念大学的前两年时光,但也很憧憬着自己的未来,自己将要去经历很多从未经历的事.我是我们学校信科院的一名学生,在编程 ...
随机推荐
- codeforces 617E. XOR and Favorite Number 莫队
题目链接 给n个数, m个询问, 每次询问问你[l, r]区间内有多少对(i, j), 使得a[i]^a[i+1]^......^a[j]结果为k. 维护一个前缀异或值就可以了. 要注意的是 区间[l ...
- Spring 装配Bean
Spring 装配Bean 装配解释: 创建应用对象之间协作关系的的行为通常称为装配(wiring),这也是依赖注入的本质 依赖注入是Spring的基础要素 一 : 使用spring装配Bean基础介 ...
- javascript 修改css样式
abc.css CSS code .class1 { width:10px; background-color: red; } HTML code <!DOCTYPE ...
- ES6新特性简介
ES6新特性简介 环境安装 npm install -g babel npm install -g babel-node //提供基于node的REPL环境 //创建 .babelrc 文件 {&qu ...
- Thread-safety with regular expressions in Java
As mentioned in our introduction to the Pattern and Matcher classes, the Java regular expression API ...
- 如何使用Palette提取Bitmap的颜色
5.X提出了color palette 的概念,能够让主题动态的去适应当前的页面色调,让整个app色调看起来比较和谐统一 那么如何使用Palette呢,必不可少,我们需要在Android studio ...
- 使用 system.io.filesysteminfo 来查找文件。
如何快速搜索你想找到文件呢.大家知道Windows系统自带了搜索,很方便,下面介绍自己编写的也可以达到同样的效果.注意.有些文件的访问需要更高的权限.这里暂且去掉那些文件目录的搜索.不然会出现erro ...
- C#中两个整数相除得到带小数点的结果
有时候需要将两个整数相除,获得带小数点的float类型数.例如一个整数12345,需要变成123.45.常见与串口与硬件通讯,DSP处理浮点型比较麻烦,DSP传递来的温度等数据都以整型的方式传递,串口 ...
- Ajax+asp.net实现用户登陆 转自http://www.shangxueba.com/jingyan/2933319.html
这篇文章主要介绍了Ajax+asp.net实现用户登陆,主要是为了练习ajax的使用方法,有需要的小伙伴参考下. 以用户登录为例练习ajax的使用方法 login.html <!DOCTYPE ...
- 如果DataGrid的checkbox出现点一个另外自动点另一个现象
如果DataGrid的checkbox出现点一个另外自动点另一个现象: 取消(EnableRowVirtualization)这个选项就可以正常了(关闭虚拟UI):