2021年7月1日

前端基础---高度塌陷最终方案

摘要： /* 通过after伪类想元素最后添加一个空白的块元素,然后对齐清除浮动这样做和添加一个div的原理一样,可以达到相同的效果而且不会在页面中添加多余的div,这是我们最推荐的使用方式,几乎没有副作用 */ .clearfix::after{ content: ""; display: block 阅读全文

posted @ 2021-07-01 15:48 leiyanting 阅读(69) 评论(0) 推荐(0)

前端基础---导航条练习

摘要： Index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>导航条练习</title> <link rel="stylesheet" type="text/css" href="css/清除默认样式.css"/> <l 阅读全文

posted @ 2021-07-01 14:58 leiyanting 阅读(94) 评论(0) 推荐(0)

前端基础---解决高度塌陷

摘要： 1. overflow: hidden 2. IE8以下 zoom: 1 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .box1{ border: 10p 阅读全文

posted @ 2021-07-01 12:01 leiyanting 阅读(146) 评论(0) 推荐(0)

前端基础---浮动(二) 文字环绕

摘要：浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以通过浮动来设置文字环绕图片的效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ mar 阅读全文

posted @ 2021-07-01 10:49 leiyanting 阅读(936) 评论(0) 推荐(0)

前端基础---浮动(一)

摘要： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } /* 如果希望块元素在页面中水平排列,可以使块元素脱离文档阅读全文

posted @ 2021-07-01 10:35 leiyanting 阅读(101) 评论(0) 推荐(0)

前端基础---文档流中的块与内联元素

摘要： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 文档流文档流处在网页的最底层,他表示的是一个页面中的位置我们所创建的元素都处在文档流中元素在文档流中的特点块元素阅读全文

posted @ 2021-07-01 10:11 leiyanting 阅读(77) 评论(0) 推荐(0)

前端基础---overflow的使用

摘要： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box1{ width: 200px; height: 200px; background-color: #00 阅读全文

posted @ 2021-07-01 09:52 leiyanting 阅读(753) 评论(0) 推荐(0)

2021年6月30日

前端基础---display和visibility

摘要： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> a{ background-color: red; /* 将一个内联元素变成块元素通过display可以修改元素阅读全文

posted @ 2021-06-30 20:32 leiyanting 阅读(86) 评论(0) 推荐(0)

前端基础---内联元素的盒模型

摘要： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>内联元素的盒模型</title> <style type="text/css"> .box{ width: 100px; height: 100px; background-col 阅读全文

posted @ 2021-06-30 20:21 leiyanting 阅读(57) 评论(0) 推荐(0)

前端基础---浏览器默认样式

摘要： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>浏览器默认样式</title> <style type="text/css"> .box{ width: 100px; height: 100px; background-colo 阅读全文

posted @ 2021-06-30 19:52 leiyanting 阅读(70) 评论(0) 推荐(0)