![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
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 · 3844 阅读 · 0 评论 -
checkbox 列表布局
要求是做出如下效果: 并排写了checkbox,img,label,垂直方向 不默认对齐,于是就 试试改vertical-align样式,达到对齐效果。虽不知道vertical-align的作用机制,在这里记录下,便于以后使用。<style>*{margin: 0px;padding: 0px;}</style><body styl...原创 2020-03-26 22:39:47 · 709 阅读 · 0 评论 -
CSS 单行和多行文本溢出显示省略号
1、单行文本溢出 overflow: hidden; text-overflow:ellipsis; /* 文本溢出显示省略号 */ white-space:nowrap; /*文本不会换行(单行文本溢出)*/2、多行文本溢出 overflow: hidden; text-overflow:ellipsis;/*文本溢出显示省略号 */ display: -...原创 2019-08-19 21:04:43 · 106 阅读 · 0 评论 -
white-space word-wrap word-break
1、white-space 决定空白/换行符的表现形式,用通俗的话来说就是 标签内容的文字是否换行。 white-space:nowrap; /* 加上这句就是不换行,不带这句就是换行(默认换行),就会用这一个。。。 */2、word-break 这个和是否换行没关系,决定在何处换行。 normal 使用浏览器默认的换行...原创 2019-08-19 21:44:52 · 171 阅读 · 0 评论 -
HTML隐藏滚动条,还带着滚动效果
1、问题描述,见下图。 在不出现滚动条的情况下,头部和内容区域宽度相等,但是内容区域的内容太多,必须得保留滚动效果,不出现滚动条。2、解决方法 在内容区域外层套一个div,设置div的overflow:hidden样式,把内容区域的宽度设置为 “100% + 20px”;<div style="width:400px;height:400px;bor...原创 2019-08-20 21:25:42 · 21553 阅读 · 1 评论 -
html跑马灯效果
该笔记记录 <marquee> 标签,跑马灯除了使用js实现,还可以使用 marquee标签,自带跑马灯效果。(marquee已经Obsolete了,但是它很好用) 基本用法 <!-- marquee是块元素,直接在其内部放入要滚动的文字即可,字体样式通过 其属性控制 --> <!--...转载 2019-08-30 20:22:55 · 7467 阅读 · 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 · 4396 阅读 · 1 评论