HTML
关注
分享
扫一扫
shijie_nihao
二流搬砖人，cv工程师。
展开
-
img图片 保持比例、居中显示
外部容器设置 固定宽度高度，设置line-height与height相等（垂直居中），设置text-align是center(水平居中)，内部img设置style（max-height:100%;max-width:100%;vertical-align: middle; margin: 0 auto;）。 <div style="width: 398px;height: 298px;line-height: 298px;text-align: center;borde...原创 2020-05-26 09:47:29 · 4136 阅读 · 0 评论 -
checkbox 列表布局
要求是做出如下效果： 并排写了checkbox，img，label，垂直方向 不默认对齐，于是就 试试改vertical-align样式，达到对齐效果。虽不知道vertical-align的作用机制，在这里记录下，便于以后使用。<style>*{margin: 0px;padding: 0px;}</style><body styl...原创 2020-03-26 22:39:47 · 760 阅读 · 0 评论 -
CSS 单行和多行文本溢出显示省略号
1、单行文本溢出 overflow: hidden; text-overflow:ellipsis; /* 文本溢出显示省略号 */ white-space:nowrap; /*文本不会换行（单行文本溢出）*/2、多行文本溢出 overflow: hidden; text-overflow:ellipsis;/*文本溢出显示省略号 */ display: -...原创 2019-08-19 21:04:43 · 125 阅读 · 0 评论 -
white-space word-wrap word-break
1、white-space 决定空白/换行符的表现形式，用通俗的话来说就是 标签内容的文字是否换行。 white-space：nowrap; /* 加上这句就是不换行，不带这句就是换行（默认换行），就会用这一个。。。 */2、word-break 这个和是否换行没关系，决定在何处换行。 normal 使用浏览器默认的换行...原创 2019-08-19 21:44:52 · 211 阅读 · 0 评论 -
HTML隐藏滚动条，还带着滚动效果
1、问题描述，见下图。 在不出现滚动条的情况下，头部和内容区域宽度相等，但是内容区域的内容太多，必须得保留滚动效果，不出现滚动条。2、解决方法 在内容区域外层套一个div，设置div的overflow:hidden样式，把内容区域的宽度设置为 “100% + 20px”；<div style="width:400px;height:400px;bor...原创 2019-08-20 21:25:42 · 21738 阅读 · 1 评论 -
html跑马灯效果
该笔记记录 <marquee> 标签，跑马灯除了使用js实现，还可以使用 marquee标签，自带跑马灯效果。（marquee已经Obsolete了，但是它很好用） 基本用法 <!-- marquee是块元素，直接在其内部放入要滚动的文字即可，字体样式通过 其属性控制 --> <!--...转载 2019-08-30 20:22:55 · 7538 阅读 · 0 评论 -
HTML无缝滚动的表格
1、表格滚动效果2、实现原理 1)、最外层是一个class为scrollBody的div，里面有8个ul（ABCDEFGH），每行是一个ul，ul里面是两个li，用div>ul>li这 种结构模拟表格。 2)、每个ul使用绝对定位的样式，每次触发定时器函数的时候，设置每个ul的位置。（并没有删除或者添加dom元...原创 2019-08-31 15:30:39 · 4540 阅读 · 1 评论