33岁转职者的前端笔记-DAY 10 一些网页切版技巧的小笔记-Part 1

今天把之前上课笔记整理一下

希望能帮助新手更快上手喔

网页编辑器

除了常用的 vs clde外不只一个编辑器，如：ATOM、Sublime等等都大受欢迎及喜爱。

css 小笔记

• CSS要做样式设定要选择所需要的标签

• 设定长度宽度距设定单位，如px

• 写标签快速的方法如：h1{重要的标题}*2会等於
  <h1>重要的标题</h1> <h1>重要的标题</h1>

• 同一个标签设定css会同时被设定，如果不想改变全部的那就要在标签加「分类」，也就是class，後面可以自已取名称。
  <h1 class="important-title">重要的标题</h1>

  1.只要看到 class 就要想到点「.」这个符号
  2.写法：

.important-title{
    color: red;
    text-align:center;
}

• 空格的功能是为了区别不同的class，如：

<h1 class="important-title t-center">

• 文字阴影：x y blur color:左右 上下 模糊程度 颜色
  text-shadow: 2px 2px 0px black;

小小新观念

css 可以把它当作工具箱，可以先写要的css 在去html标签给class，范例code如下：

<h1 class="important-title">重要靠左的标题</h1>
<h1 class="important-title t-center  t-shadow" >重要置中的标题</h1>
<h1 class="important-title t-right">重要靠右的标题</h1>

.important-title {
    color: orange;
    /* text-align: center; */
    font-size: 42px;
}

.t-shadow{
   /* 文字阴影: x y blur color; */
   text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.392);
}

.t-center{
    text-align: center;
}
.t-right{
    text-align:right;
}

插入图片及写法注意事项

src= 图片来源 alt=图片叙述，图片发生问题才会出现替代文字

• 插入图片方法：
• 改变图片宽度：
  <img width="300px" src="./images/image1.jpg" alt="">
  只要改变图片宽度，高度会自动调整，尽量别调整高度会影响原本图片的比例会失真

反之，改变图片高度，宽度也会自动调整

img 不会换行，除非空间不够

filter= 滤镜
filter: grayscale(0%);灰阶化

滑鼠游标点到此图的时候改变样式：
g-100:hover {}