20191028学习总结

(一)Markdown的运用

1.标题
# 一级标题
## 二级标题
### 三级标题
2.有序列表和无序列表
文字前加上“-”或者“+”变为无序列表,文字前加上“1”、“2”、“3”变为有序列表。
3.引用
“>”表示引用
4.超链接
超链接用[]()表示 图片用![]()表示

(二)HTML
HTML超文本标示语言,通过一段内容定义为标题、段落或者图像等,从而让该内容具有结构定义。
HTML为主干 CSS为装饰外观
CSS:层叠样式表/级联样式表
API:应用程序接口
W3C:万维网联盟
1.HTML术语
<!--........--> 注释
<元素名称> 元素
<...> 开始标记
</...> 结束标记
<a 属性="属性值">..........</a> 属性可以为元素添加额外信息

<header> 用于表示页面或某个区域头部
<nav> 导航栏
<aside> 用于表示跟周围主题相关的附加信息
<article> 用于表示文章或者其他可独立页面存在的内容
<section> 用于表示一个整体的一部分主题
<footer> 用于表示页面或某个区域的脚注
h1~h6 表示一级标题~六级标题
span 跨越多个字符,可使字符变得与众不同
a 超链接
p 段落,文章段落

2.元素书写格式: <a href="目标"target="页面打开位置">内容</a>

3.列表种类
无序列表:用圆点标记
无序列表用<ul>标签,每个列表始于<li>标签
有序列表:用数字标记
始于<ol>标签,每个列表始于<li>标签
自定义列表:项目与其注释的组合
以<dl>标签开始,每个自定义列表项以<dt>开始,每个自定义列表项以<dd>开始。

4.乱数假文
lorem加tab键

 

20191029学习总结
CSS
CSS的最新版本:CSS3
(一)CSS的样式表
1.外部样式表
CSS在<head>中用<link>引用外部样式表
<link rel="stylesheet" href="main.css">
../ 返回上一级
2.内部样式表
CSS在<head>中用<style>引用外部样式表
3.行内样式表/内嵌样式表(基本不用)
在开始标签之中直接写样式

(二)CSS注释
书写格式:/*注释内容*/
vscode用注释:ctrl+?

(三)CSS规则
h1{
color:red
text-align:center;
}
整个属于规则集,h1为选择器,:左边是属性,:右边是属性值,花括号里面是声明。

(四)CSS选择器
1.元素选择器
标签去掉尖括号,作用到整个文档中的该元素。
2.类选择器
.类名{声明块}
3.id选择器
#id名{声明块}
id属性值在每个文档中只能用一次,具有唯一性。

命名用驼峰原则
小驼峰原则:第二个单词开始首字母大写(一般用)
大驼峰原则:所有单词的首字母大写

颜色单位
·关键字 h1{color:red;}
·HEX十六进制 通过#表示 h1{color:#foo;}
·RGB(red green blue) 由rgb函数表示 h1{color:rgb(255,0,0);}
·HSL值(UI设计用)
长度单位
·绝对长度 px像素的具体大小会根据设备的分辨率有所不同
·相对长度 %
* 通配符 作用于所有元素

4.后代选择器
父集 子集

5.子集选择器
父集>子集

6.伪类选择器(不要求掌握)

7.并集选择器/组合选择器
例: h1,h2,h3,h4,h5,h6{
font-weight:normal;
}
悬停/移入
h1:hover{
color:red;
}

(五)选择器的权重
嵌入 id class 元素
a b c d
style 1 0 0 0
id 0 1 0 0
类 0 0 1 0
元素 0 0 0 1
通配符 0
!important 最高

!important要写在属性值后面

(六)源次序
当权重值相同时,后面的会把前面的覆盖掉。

(七)继承
祖先级有的样式,后代级也会继承。文本类的样式才会有继承性。

(八)调试器
如果用火狐浏览器 右键查看元素。

(九)元素如何显示
display:block(块级元素)
inline(行内元素)
inline-block(行内块)
none(隐藏元素并且不保留物理空间)

(十)盒模型
content:盒子内容
padding:内边距 内容周围的区域
border:边框 内边距和内容外的边框
margin:外边距 清楚边框外的区域

padding:内边距取值为一个值,则四周均为这个值。
内边距取值为两个值,如10px、20px 顺序 上下 左右
内边距取值为三个值,如10px、20px、30px 顺序 上 左右 下
内边距取值为四个值,如10px、20px、30px、40px 顺序 上 右 下 左
border:书写规范 例: 10px solid 颜色

(十一) 常规流
在没有CSS的干预下,块级元素独占一行,宽高可设,行内元素并排显示,宽高自动。

(十二) 浮动
当元素的float属性值为left和right 为浮动元素
float:none 不浮动
left 向上向左排列
right 向上向右排列

 

 

20191030学习总结
(一)新的声明:
1.文字居中:text-align:center
2.去掉下划线: text-decoration:none
3.水平居中:margin:auto
4.子集浮动导致父级塌陷,可以找高:overflow:hidden
5.去掉列表项(.或数字)life-style:none

(二)布局
设计常用布局
1..container
container{
width:XX px;
margin:0 auto;
}
<body>
<div class="container">
...
</div>
​ </body>

2.header+container
header{
width:100%;
}
.container{
width:XXpx;
margin:0 auto;
}
<body>
<header></header>
<div class="container">
...
</div>
</body>

3. header+container+footer
header,footer{
width:100%;
}
.container{
width:XXpx;
margin:0 auto;
}
<body>
<header></header>
<div class="container">
...
</div>
<footer></footer>
</body>

(三)网页制作要注意的规则
1.主页 index
2.用外部样式表 global.css
3.避免代码的冗余
4.图像或视频单独的文件夹 img/images

 

 

20191031学习总结

(一)插入图片

 

(二)单行文字垂直居中 行高=高 近似垂直居中 line height=XXpx;

(三)消除图片间隔

fond-size:0;

(四)弹性布局

特点是不会产生高的塌陷。 Flex=Flexible Box display: flex justify-content: center 横向居中。 align-items: center 垂直居中。 justify-content: space-between 两端对齐,项目之间的间隔都相等。 justify-content: space-around 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。 flex-grow: 1/2/3..... 剩余的空间的分配比例。

(五)CSS中给元素插入背景图 div{ height:500px; } /background:背景颜色 url 平铺方式 位置/ background: url("路径") no-repeat; 不平铺 background: url("路径") no-repeat center center; 局中间 background: url("路径") no-repeat right top; 右上 background: url("路径") no-repeat 100px 50px; 横向 纵向 background-size:30px 宽 30px 高 图片缩放 (六)图片结合:sprite 雪碧图 CSS坐标系:右向为宽的正方向 下向为高的正方向 .sprite{ /定视口/ width:XXpx; height:XXpx; background: url ("路径") XXpx XXpx; 改位置 }

 

 

20191101学习总结

今天大部分时间用于TVguide的编写,故笔记中的新知识点较少。

1.文字缩进: text-indent:XX px;

2.若子集为3,则nth-child(3)=last-child

3.设置元素下边框的样式:border-bottom