8.鼠标滑动变大变小效果
摘要：有时候我们在前端需要一种效果就是鼠标滑入然后商品变大或者变小的效果。显示为选中的效果在电商里面使用很频繁代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=
阅读全文
posted @ 2023-01-05 10:35
随笔分类 - css基础知识点
7.css浮动
摘要：知识点1.盒子摆放标准 普通流，浮动，定位 思考1:浮动div会压着普通的标准流,不占用本来的位置,多个div浮动，改变div显示方式变为行内块元素 思考2：其实一般布局都是父div包括子div ，但是父div不设置高度，子div左右浮动，然后给子div设置高度，撑大父div 思考3：浮动元素和父盒
阅读全文
posted @ 2022-03-27 10:39
6.[css基础知识]知识点总结-导航栏
摘要：1.前面所有知识点做一个小结 效果图: 2.代码展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta
阅读全文
posted @ 2022-03-19 21:52
5.[模拟新闻页面模块]-练习
摘要：1.效果 2.代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0px; padding:0px; } li { list-style
阅读全文
posted @ 2021-11-11 23:11
4.模仿新浪导航栏[padding实际运用]
摘要：1.盒子边框[border] border-width border-style ; dotted |dashed | solid border-color 综合写法: border:1px solid #ccc 思考:html中的input,table 框的边框可以通过它来进行修改，网页上面的一些
阅读全文
posted @ 2021-11-11 23:10
3.[css基础知识背景图片]导航栏简单实现
摘要：1.知识点 2.效果 3.代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> .nav{ text-align: center; } .na
阅读全文
posted @ 2021-11-09 21:25
2.[css基础知识]标签展示方式
摘要：1知识点 知识点: 块状元素和行内块元素之间转化 2.效果图 3.代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> a { width:100px;
阅读全文
posted @ 2021-11-08 22:23
1.css基础知识讲解[字体讲解]内容
摘要：1.知识点 2.案例 3.代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { font-size: 16px; } .title { font
阅读全文
posted @ 2021-11-07 20:57
