- 博客(20)
- 收藏
- 关注
RSS订阅原创 用js写弹幕
HTML <div id="box"> <div id="content"> <img src="./images/u=414259162,185616959&fm=26&gp=0.jpg" alt=""> <!-- <p class="danmu"> <img src="./images/u=414259162,185616959&a
2021-04-13 20:32:09
205
原创 用js写轮播图
HTML <div class="wrapBox"> <div class="swiperBox"> <p class="active"> <img src="./images/QQ图片20201106100557.jpg" alt=""> </p> <p><img src="./images/QQ图片2020
2021-04-13 20:29:57
96
原创 用js写购物车
CSS <style> * { margin: 0; padding: 0; list-style-type: none; } a { color: #666; text-decoration: none; } table { border-collapse: colla
2021-04-13 20:25:34
219
原创 用js写轮播图
HTML <div class="wrapBox"> <div class="swiperBox"> <p class="active"> <img src="./images/QQ图片20201106100557.jpg" alt=""> </p> <p><img src="./images/QQ图片20201
2021-04-13 20:22:36
81
原创 用js写进度条
HTML <div id="progress"> <!-- 进度条 --> <div id="filldiv"></div> <!-- 百分比 --> <span id="percent"></span> </div> CSS <style> #progress { position:
2021-04-13 20:18:37
223
原创 用js写选项卡
HTML <button class="on">1</button> <button>2</button> <button>3</button> <p class="active">111</p> <p>222</p> <p>333</p> CSS <style> p {
2021-04-13 20:15:38
100
原创 用js写日历
这是css <style> * { margin: 0; padding: 0; list-style: none; } #box { width: 280px; height: 360px; margin: 50px auto; background: url(./QQ图片2.
2021-04-13 20:12:54
84
原创 用js写留言板
这是css <style> * { padding: 0; margin: 0; } body { width: 100%; height: 100%; background: rgb(65, 65, 63); } .bacground { width: 700px;.
2021-04-13 20:09:23
169
原创 全选与反选
var oneCheck = document.getElementById('checkone'); var allCheck = document.getElementsByClassName('checkAll'); //全选 oneCheck.onclick = function () { // 遍历每一个allcheck的值 for (var i = 0; i < allChe...
2021-04-13 20:05:55
79
原创 移动端上下固定方法
移动端上下固定效果 html,body { height:100%; } body { display:flex; flex-direction:columu; } 滚动条： overflow-y:scroll; 让他不收缩 .header { height:100px; background-color:#ffo; flex-shrink:0; } .footer { height:100px; background-color:#000; flex-shri
2021-03-17 20:38:51
223
原创 响应式布局
弹性布局flex-grow用法 给左边设宽度后,右边的平分剩余空间 .left { width:260px; } .right { flex-grow:1; } 伪类选择器加图片方法 .chat dd p:before { content:url() } 响应式布局 宽度百分比 高度自适应 区分不同屏幕大小 媒体查询 /*手机端*/ @media screen and (max-width:767px) { } /*平板*/ @media screen an
2021-03-13 10:58:27
87
原创 弹性盒模型
弹性盒模型 弹性盒模型是一种新的布局模式。页面需要适应不同的屏幕大小以及设备类型 弹性盒模型使用步骤 定义弹性盒 display：flex； 确定主轴 flex-direction:row / column / row-reverse / column-reverse 主轴对齐 justify-content flex-start / flex-end / center / space-around / space-between 是否换行 flex-wrap:wrap / nowra
2021-03-13 09:42:27
120
1
原创 2021-03-04
浮动的问题 清除浮动就是让飘的盒子依然在文档中占位 浮动和display:inline-block 不要共存, 因为都是实现左右排列 注意的问题 display:block 独占一行 , margin:auto 对block元素生效 居中用display:inline-block text-align:center 写在父元素上面,对行内和行内块生效 固定定位bug 定位会改变元素的宽度.加了定位得给宽度 定位不占位置,下面的盒子得给一个外边距硬挤 圆角 bo
2021-03-04 19:53:53
98
1
原创 3.3
有序列表 ol 无序列表 ul 自定义列表 dl 网络中的单标签: hr br img input mate padding不可以有负值 ,margin可以有负值 清除浮动的方法 给父盒子设高 在所有浮动后面加一个div 上设 style= “clear:right” (重要) overflow: hidden 在父元素上面加 行内元素,左右排列不支持宽高? 方法一: 浮动的盒子就支持宽高,浮动改变元素特性,无论什么标签都支持宽高和间距 方法二 :display:block 未知.
2021-03-03 20:53:20
71
原创 3.02知识点整理
css的基石就是盒模型: padding + margin + border + content margin:auto 和 margin:0 auto是相等的 背景尺寸 background - size必须单独写 经常更换的图片用 img 直接插入 但是logo比较重要也用img 不会更换的小图标用背景图 图片垂直居中方法: 1. 在父元素上写行高 2. 在图片上写vertical-align 列表前的圆点可用背景图做 background: url() no-repaet 0 c.
2021-03-02 17:51:35
107
1
原创 网页bug和权重问题
1.bug 1 如果子元素的 margin-top 传递到父元素上,父元素和子元素一起下来 解决方案:在父元素上面添加 overflow:hidden 或者有浮动 , margin-top 也不会传递到父元素上 2.溢出隐藏初始化: 1. white-space:nowrap (文本强制不换行) 2. overflow:hidden (溢出隐藏) 3. text-overflow:ellipsis (文本超出省略号) 3.bug 2 图片
2021-03-01 20:56:56
133
原创 部分整理知识点
通配符选择器:* 外边距:margin:right/left 文本水平对齐:text-ailgn:center/left/right 文本居中对齐:行高等于高/line-height 首行缩进: text-indent
2021-02-26 15:54:57
80
原创 标签和类
1,标签的嵌套 嵌套:大盒子套小盒子 嵌套规则: 块级标签嵌套行内标签 p 不能嵌套块级元素,可嵌套行内元素 行内标签之间可以相互嵌套 a标签不能嵌套a标签 双标签嵌套单标签,单标签不能嵌套 2.类名 类名使用规则: 不能使用中文 不能用数字开头 不能使用特殊符号 建议使用小写单词 记单词:background-color 背景色 height 高度 width 宽度 ...
2021-02-24 18:47:54
142
原创 网页标签和路径
1.标签 标签的分类:块级标签和行内标签 ul里面必须是li,li里面可以随便写 br换行 hr水平线 行内标签有:span b加粗 strong强调加粗 del删除线 em强调倾斜 sup上角标 sub下角标 2.路径 路径分为绝对路径和相对路径 网络中不允许使用绝对路径 相对路径:就是通过当前文件找到目标文件 …/返回上一级 相对路径的底线就是不能跨盘 ...
2021-02-23 17:31:46
166
原创 网站建设流程
网站建设流程 注册域名 租用空间 网站建设 1.确定网站主题 2.搜集资料 3.规划网站 4.制作页面 网站推广 网站维护 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心
2021-02-23 09:34:54
202
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人