HTML CSS
文章平均质量分 70
前端遇到的一些问题
草木红
这个作者很懒,什么都没留下…
展开
-
js写的一个简单的时间范围日历
简单的日历,用js和flex布局实现原创 2023-01-06 16:20:36 · 907 阅读 · 1 评论 -
css修改浏览器原生的单选框和复选框
通过css修改浏览器远程的单选框和复选框原创 2022-08-18 10:47:22 · 307 阅读 · 0 评论 -
使用position:stickey固定表格左边列与表格标题
position:stickey 会与表格的 border collapse样式冲突,所以使用 box-shadow样式来做表格的边框样式。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conte原创 2022-05-26 09:04:24 · 594 阅读 · 0 评论 -
表格左边固定并且每一行的高度随内容的变化而变化(纯css)
本例子需要引入bootstrap.css当页面滚动时,表格左边固定,并且有一个阴影效果,每一行的高度随内容的变化而变化。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width原创 2022-01-19 21:40:55 · 700 阅读 · 0 评论 -
无法使用clearfix时,使子元素排列一行,避免结构混乱
前提:三个元素占据一整行当多个元素都浮动时,每行的三个元素的高度不一致,第四个元素就会紧跟着高度最高的元素后边,导致界面变乱。如下元素4跟在元素2的后边第一感觉是给前三个元素包裹一个div,使用bootstrap的clearfix类,隔离掉第四个元素。这是最简单的办法,但是原来写的css选择器就会失效。<div class="box clearfix container"> <div class="clearfix"> <!--添加一个父元素div-->原创 2021-01-22 16:19:30 · 133 阅读 · 0 评论 -
div中文字不换行(textarea中输入的文字,输出到div中文字不换自动换行的问题)
在文本域中输入文件,并点击回车开始下一行,点击按钮将信息输出到div中<textarea name="" id="content" cols="30" rows="10"></textarea><div id="info"></div><button id="btn">按钮</button><script src="./js/jquery.min.js"></script><script>原创 2021-01-09 10:55:16 · 4619 阅读 · 0 评论 -
7. 等高、双飞翼和圣杯布局
(一) 等高布局多列的情况下,以最高的列为基准,形成等高的布局方式。利用martin-bottom负值与padding-bottom配合实现。* { margin: 0; padding: 0;}#parent { border: 1px black solid; overflow: hidden; background-color: slategray;}#box1 { float: left; background-color:原创 2020-07-01 21:59:51 · 147 阅读 · 1 评论 -
6.前端基础 - 移动web
(一)flex弹性盒布局1). flex父容器样式[1]. lex-directionflex-direction用来控制子项整体布局方向,是从左往右还是从右往左,是从上往下还是从下往上。[2]. flex-wrapflex-wrap用来控制子项整体单行显示还是换行显示。默认是如果子容器即使设置宽的情况下,所有子容器整体内容没有超出行的宽度,是会自适应的平分正行,如果内容超出行的宽度,内容是会溢出,无论是否查过行的宽度,都不会换行显示[3]. flex-flowflex-flow属性时原创 2020-06-27 22:13:04 · 309 阅读 · 0 评论 -
5.前端基础 - BFC
一、BFC规范(一) BFC定义BFC即Block Formatting Contexts(块级格式化上下文),具有BFC特性的元素可以看做是隔离了的独立容器,容器里面的元素不会在布局上影响外面的元素,并且BFC具有普通容器没有的一些特性。(二) 触发BFC浮动元素:float除none以外绝对定位元素:positon(absolute、fixed)display为inline-block、table-cells、flexoverflow除了visible以外的值(hidden、auto、s原创 2020-06-27 21:47:29 · 170 阅读 · 1 评论 -
4.前端基础 - css
一、Css基础语法(一) 背景样式background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;[1]. 背景图平铺方式:background-repeatrepeat-x x轴平铺repeat-y y轴平铺repeat x,y轴都平铺no-repeat 都不平铺[2]. 背景图位置:background-positio原创 2020-06-27 21:40:32 · 434 阅读 · 0 评论 -
3. 前端基础 - html
一、HTML标签(一) 标签[1].标题标签在一个网页中,h1标签最重要,并且一个.html文件中只能出现一次h1标签,其他都随意h5~h6不经常使用。<h1></h1> ~<h6></h6>[2].文本修饰标签两个都可以对文本进行强调,strong比em更强烈strong和em是具备语义化的,而b和i不具备语义化插入文本一般是配合删除文本来使用<strong>和<b>:加粗<em&原创 2020-06-27 20:36:09 · 510 阅读 · 0 评论 -
2.移动web开发:流式布局
流式布局流式布局:就是百分比布局,非固定像素,内容向两侧填充,理解成流动的布局,称为流式布局视口viewportviewport是一个虚拟区域,浏览器承载viewport,viewport承载网页。viewport功能: 1. width 设置宽度 &nbs...原创 2020-03-29 10:49:22 · 152 阅读 · 0 评论 -
1. body高度设置为100%却没有起作用
当给body添加如下样式时,可以看到页面背景色为粉红色,这时传递的信息好像是因为body占据了整个窗口,才引起的页面背景色为粉红色,但是选取到body元素,可以看到body的高度为0。body{ background-color:pink; height: 100%; width: 100%;}原因是:[1] 设置元素高度为百分比时,此元素需要向上遍...原创 2020-03-22 17:04:57 · 2892 阅读 · 1 评论