2023年10月22日
阴影，圆角边框，字体引入
摘要： 文本阴影 盒子阴影 圆角边框 半圆 扇形 字体引入 阅读全文
posted @ 2023-10-22 16:48 故塔拉黑暗之神 阅读(20) 评论(0) 推荐(0)
选择器（折叠面板）
摘要： 层级选择器：1.>选择父盒子的子盒子加属性 2.+当前元素的下一个兄弟元素 3.~当前元素后面所有的兄弟盒子 <style> /* 子代选择器 */ .box>li{border:1px solid red } /* +当前元素的下一个兄弟 */ .child+li{background-color 阅读全文
posted @ 2023-10-22 16:08 故塔拉黑暗之神 阅读(24) 评论(0) 推荐(0)
2023年10月15日
学校官网
摘要： 首先对官网进行区域分块，如图所示 先把三部分都放在一个大盒子里设置好背景色 part1 分为欢迎条，搜索栏，导航栏三部分 搜索栏：分为左右两部分，进行浮动。给右边部分加入绝对定位与左边拉开间距。 导航栏： 问题：1.二级菜单把下面的内容顶下去 使用给菜单绝对定位把菜单脱离文档流 具体操作：a.给子盒 阅读全文
posted @ 2023-10-15 12:32 故塔拉黑暗之神 阅读(33) 评论(0) 推荐(0)
2023年10月14日
grid布局
摘要： 实现同时对行和列的控制 1.指定每列的宽度 .grid{displaya;grind; grid-template-colums:100px 100px 100px; } 2.用fr指定浮动宽度（fr是grid布局专有单位，类似于对整个盒子的宽度进行平等划分，1fr就是占一份） .grid{ gri 阅读全文
posted @ 2023-10-14 11:51 故塔拉黑暗之神 阅读(56) 评论(0) 推荐(0)
H5
摘要： 新增语义化标签 音频标签 <!-- 音频 --> <audio src="音频文件" controls></audio> <!-- controls控制栏 loop循环 autoplay自动播放 muted静音 --> 视频 <!-- 视频 --> <video src="音频文件" poster= 阅读全文
posted @ 2023-10-14 10:22 故塔拉黑暗之神 阅读(16) 评论(0) 推荐(0)
表单
摘要： 单选框 redio <div> <input type="radio"name="aaa" id="one"> <!-- 如果不加name或者name不一样，那么可以多选 --> <label for="one">非常满意</label> <!-- 给文字加上label可以点击文字进行单选框的选择 阅读全文
posted @ 2023-10-14 09:16 故塔拉黑暗之神 阅读(20) 评论(0) 推荐(0)
两栏布局，三栏布局
摘要： 两栏布局：窗口被分为左右两个部分，一部分为宽度固定，高度自适应。一部分为宽度高度都是自适应。如下：左边为固定宽度，右边为自适应 方法一 <style> *{margin: 0; padding: 0; } html,body{ height:100%; } .box1{ width:500px; h 阅读全文
posted @ 2023-10-14 01:57 故塔拉黑暗之神 阅读(46) 评论(0) 推荐(0)
宽高自适应和窗口自适应（二级菜单问题解决）
摘要： 自适应：元素的大小能够根据窗口或子元素自动调整 宽度自适应，常用于导航栏之类的 <style> div{background-color: yellowgreen; width:auto; /* 宽度不写或者设为auto,就是宽度自适应 */ padding: 100px;} </style> 宽度 阅读全文
posted @ 2023-10-14 01:15 故塔拉黑暗之神 阅读(133) 评论(0) 推荐(0)
2023年10月13日
锚点
摘要： 锚点作用：页面不同区域的跳转，使用a链接(a链接还可以实现本页面内的跳转） <a href="#锚点名字“></a> <div id="锚点名字”></div> <style> *{margin: 0; padding: 0; } ul{list-style: none; position: fix 阅读全文
posted @ 2023-10-13 17:22 故塔拉黑暗之神 阅读(67) 评论(0) 推荐(0)
定位控制元素水平垂直居中
摘要： 浏览器中盒子的位置 1.使用绝对元素，相对于浏览器第一窗口进行50%的距离设置，盒子会移动到第四象限； 再使用外边距设置让盒子移动到中间位置（注意正负值的设置） *{margin: 0; padding: 0; } div{ width:200px; height:200px; background 阅读全文
posted @ 2023-10-13 16:54 故塔拉黑暗之神 阅读(12) 评论(0) 推荐(0)
下一页