回顾web网页开发

Posted 2020-10-04

相对路径和绝对路径

 

相对路径

./ 当前目录

../上一级目录

../../上一级的上一级的目录

一般用相对路径：用./表示和linux里面的指令操作./表示当前目录基本相同，在html中也可以不用写

demo： ./images/programmer.jpg可以写成 images/programmer.jpg

../  :表示当前网页文件所在目录的上一级目录，这个不能省略，如果在上一级，可以写成

../../images/programmer.jpg

 

绝对路径：会把图片位置写死了，如果把文件位置靠走了，如果把整个文件拷贝走，放到服务器上的话，绝对路径还是回原来的位置寻找，位置会产生错误，所以我们一般写相对路径。

会发生错误。

绝对路径：相对与磁盘的位置去定位资源的位置，会在项目迁移时，由于目录的盖面到时资源定位出错，不推荐使用，

 

 

 

无序列表标签：（有语义的）

一般用在新闻（）

 

公式： <!-- ul>li{类表文字&}*8 -->

 

有自身的样式，列表一般可以用鼠标可以点的，列表需要加上连接，

也有 不需要连接的

需要连接的快捷键(大于号表示层级关系)

ul>li>a{列表文字&}*8

列表文字&

快捷键创建列表标签

生成快捷键列表连接

ul(>li>a[href="]{列表文字})*生成几行

 

 

---

id选择器：

是给程序用的，不是给样式用的，可以用来抓取网页页面的内容

id选择器，只能用于页面 上一个标签，不推荐使用，

一个标签只能是一个id名称，style里面的类名之前要加 #；

组选择器：

组选择器，将公共的样式提取出来，写在一起，简化样式代码。

多个选择器，如果有相同的设置的话，

可以用组选择器：.box1,.box2,.box3{里面是具有相同属性的}

如果不加，的话是层选择器？？？？

hover：鼠标悬停，盘旋，徘徊

---

经常在链接上加入hover，可以让鼠标在点击过之后，会改变装台，叫做伪类选择器，

伪类选择器：表示鼠标移动到元素上去的时候显示的样式，.box:hover{}

是在css操作style之后，再进行下一步的操作，

.box:hover{属性：值}，之后

 

伪元素选择器：解决bug；不能被选中，必须配合content（内容）

使用，关键字before和after；

.box:before{content:"字段"}

.box:after{conten:"后一个字段"}

 

---

样式属性：text-align ：设置文字水平

text-indent：首行缩进

text-style：nomarl 文字不倾斜，italic倾斜；

综合属性顺序：font：是否加粗，字号/行高 字体 demo：normal 12px/36px "楷体“

网页里面的：如果不写的话段落字体默认大小是十六

font-weight , font-size/ling-height ,font-family:顺序不能颠倒，否则失效

 

设置ul的时候一般设置3个，

list-style的设置：去掉默认的小圆点，清除默认的外边距、内边距

  .list{

        list-style: none;

        margin:0px;

        padding:0px;

    }

 

 

---

.con>.box （div的嵌套）

属性：设置子元素超出部分的处理方法，（设置在父集上）

overflow：visible（显示超出的部分）

overflow:hidden(隐藏)隐藏：将超出的部分吟唱，相当于切掉超出的部分

overflow：scroll（卷轴）显示滚动条框，可以把子元素显示完（不管有么有超

出都有滚动条框，上下左右都有）

overflow：auto（）如果子元素超出就显示滚动条框，不超出就不显示滚动条框

应用场景：如果一个文档太多，显示不玩，可以设置一个滚动条

---

重点：盒子模型：

概念，padding和

 

元素，标签，盒子 都是指的一个东西

盒子包含的内容，如果有一个杯子，content和

 

 

border 边框线：solid 实线 dashed 虚线 dotted（点线）

padding：（上右下左）按照12点顺时针转 上下左右边分别设置内边距（4个）

3个值的话

padding：（上 （左右）下）写三个的话左右为一个值，

2个值的话：

padding：（（上下），（左右））写两个值的话分别设置上下，左右的值

1个值的 话：

padding：（（设置四个边都是一个值））

---

margin外边距的方法和padding的设置方法相同，

盒子的真是尺寸：

盒子的width和height值固定的，如果盒子增加border和padding，盒子整体的尺寸会变大，所以，盒子的真是尺寸为：

盒子的宽度：widthpadding 左右+border左右

盒子的高低 heigth=padding上下+border上下

---

盒子一般不用padding

因为他会改变盒子的大小，可以在盒子里面再设置一个盒子，用里面的盒子的

margin来设置里面盒子的位置

margin：0px auto; 左右的margin值设置auto可以让样式自己计算左右

的margin值，让盒子水平居中

margin使用负值可以让两个盒子叠加，（合并边框）

---

垂直外边距合并；（bug）（有意这么做的）

 

解决办法：

1.使用这种特性

2.设置一边的外边距，一般设置margin-top（）

3.将元素浮动

当不浮动的元素的上下margin相遇的时候，会取两个margin值中的较大的值作为他的最终的margin值；

---

终极总结：

列表标签：

快捷方式： ul >li{列表文字$}*n  

可以生成n行 $代表第几行

列表标签一般用于链接所以得与<a href="www.baidu.com">百度</a>嵌套使用

快捷生成方式：

ul(>li>a[href="#"]{列表文字})*n

n行 >重定向 li里面包含a ，ul里面包含li

列表操作：

   list-style: none;

        margin: 0px;

        paddig:0px;

新建模块div

.box${这是第$个div元素}*5

 

伪类和伪元素选择器：

常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态

伪元素选择器有before和after，