#Friday

2021年3月20日

摘要：练习题：当鼠标hover到每个div上时，div的边框颜色变为淘宝红 <!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <style type="text/css"> .container { width: 1010px; 阅读全文

posted @ 2021-03-20 21:55 #Friday 阅读(66) 评论(0) 推荐(0)

CSS样式-叠放次序: z-index

摘要：作用：用于设定重叠元素的覆盖关系的；设定方式：设定为一个数值，没有单位；特点： 1.数值越大，越靠上，可以覆盖数值小的元素； 2.如果没有预先设定z-index，那么缺省是0，后定义的元素在新定义的元素之上（是指在html中的定义）。 <!DOCTYPE html> <html lang="en 阅读全文

posted @ 2021-03-20 21:50 #Friday 阅读(122) 评论(0) 推荐(0)

CSS样式-固定定位以及能脱离标准流的总结

摘要： fixed：固定定位 1.脱离标准流，不和滚动条一起滚动 2.偏移起作用：top right bottom left 3.不受父元素的影响（即使父元素的定位是relative），只依据浏览器的可视区定位。 4.当一个元素被设定为固定定位时，会产生模式转换，转化为行内块元素，所以如果开始没有设定宽度，阅读全文

posted @ 2021-03-20 16:11 #Friday 阅读(287) 评论(0) 推荐(0)

2021年3月14日

CSS样式-position为absolute的情况下如何居中

摘要：第一步：设定top，left为50% 第二步：通过margin-left，margin-top设定负值 <!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <style type="text/css"> div { widt 阅读全文

posted @ 2021-03-14 16:00 #Friday 阅读(612) 评论(0) 推荐(0)

CSS样式-position（父r子a）的练习

摘要： <!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <style type="text/css"> div { width: 674px; height: 674px; border: 1px solid #ccc; mar 阅读全文

posted @ 2021-03-14 15:42 #Friday 阅读(299) 评论(0) 推荐(0)

2021年3月11日

CSS样式-定位

摘要：定位方式+偏移： static：所有不设定定位的元素，定位方式都是static（缺省） <!DOCTYPE html> <html lang="en"> <head> <style type="text/css"> .div1 { width: 100px; height: 100px; backg 阅读全文

posted @ 2021-03-11 23:34 #Friday 阅读(112) 评论(0) 推荐(0)

2021年3月7日

CSS样式-清除浮动

摘要：一、为什么要清除浮动？在某些情况下，我们不能设置父元素的高度，但是所有的子元素都是浮动的（脱标），父元素的高度为0，父元素后面的元素会上提。二、清除浮动的四种方法： 1.额外标签法： a.在最后增加一个额外的div，用clear: both去掉浮动属性 b.W3C推荐的一种方法 c.增加了一个莫阅读全文

posted @ 2021-03-07 00:01 #Friday 阅读(92) 评论(0) 推荐(0)

2021年3月6日

CSS样式-实战练习2

摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文

posted @ 2021-03-06 18:51 #Friday 阅读(106) 评论(0) 推荐(0)

2021年2月28日

CSS样式-实战练习1

摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文

posted @ 2021-02-28 23:27 #Friday 阅读(198) 评论(0) 推荐(0)

CSS样式-在导航栏均分四块

摘要： <!DOCTYPE html> <html lang="en"> <head> <style type="text/css"> body, div, ul, li { margin: 0; padding: 0; } #header, #nav, #content-main, #content-2, 阅读全文

posted @ 2021-02-28 17:15 #Friday 阅读(768) 评论(0) 推荐(0)

公告