首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    CSS实现自适应分隔线的N种方法

    可能别人的重点不在这些上面吧 下面列举几种更好的实现方式,不会露馅的那种 1.伪元素+transform:translateX(-100%); 主要原理是设置文本居中text-align: center...分隔线 (伪元素+flex) 3.伪元素+box-shadow/outline+clip-path 同样利用text-align: center使文本和伪元素居中,然后生成足够大的box-shadow或者...分隔线 (伪元素+box-shadow/outline+clip-path) 4.伪元素+right:100% 这个实现需要多一层标签,外部仍然是text-align: center,内部文本里添加两个伪元素绝对定位...也可以用其他方式**/ background-size: 100% 1px; } CSS分隔线 (伪元素+table-cell) 8.fieldset+legend 利用fieldset和legend...+legend) 小结 上面一共列举了8中方式来实现分隔线的效果,每种方法思路各不相同,重要的是可以发散自己的想象力,可能这才是CSS与其他语言所不同的吧~ 这里整理了一下,整体效果如下非大家在实际项目中可自行选取所需要的方式

    2.3K20

    【CSS】510- CSS实现自适应分隔线的N种方法

    可能别人的重点不在这些上面吧 下面列举几种更好的实现方式,不会露馅的那种 1.伪元素+transform:translateX(-100%); 主要原理是设置文本居中text-align: center...分隔线 (伪元素+flex) 3.伪元素+box-shadow/outline+clip-path 同样利用text-align: center使文本和伪元素居中,然后生成足够大的box-shadow或者...分隔线 (伪元素+box-shadow/outline+clip-path) 4.伪元素+right:100% 这个实现需要多一层标签,外部仍然是text-align: center,内部文本里添加两个伪元素绝对定位...也可以用其他方式**/ background-size: 100% 1px; } CSS分隔线 (伪元素+table-cell) 8.fieldset+legend 利用fieldset和legend...+legend) 小结 上面一共列举了8中方式来实现分隔线的效果,每种方法思路各不相同,重要的是可以发散自己的想象力,可能这才是CSS与其他语言所不同的吧~ 这里整理了一下,整体效果如下非大家在实际项目中可自行选取所需要的方式

    77210

    从零开始学 Web 之 CSS(四)CSS初始化、定位、overflow、标签规范

    以上参考链接:Gavin_zhong 3、常见的一些CSS初始化代码 腾讯 body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend...:none; } a:hover { text-decoration:underline; } sup { vertical-align:text-top; } sub{ vertical-align...默认属性是: vertical-align:baseline; baseline: 默认。元素放置在父元素的基线上。 sub: 垂直对齐文本的下标。...super: 垂直对齐文本的上标 top: 把元素的顶端与行中最高元素的顶端对齐 text-top: 把元素的顶端与父元素字体的顶端对齐 middle: 把此元素放置在父元素的中部。...bottom: 把元素的顶端与行中最低的元素的顶端对齐。 text-bottom: 把元素的底端与父元素字体的底端对齐。

    1.3K30

    Reset CSS(CSS初始化)总结

    市面上浏览器众多,各种浏览器对标签默认属性值的定义不尽相同。 那如何保持CSS在每个浏览器上的显示效果相同呢?这就涉及到了CSS初始化的问题。 熟话说,先破后立。...,th,var { font-weight: normal; font-style: normal; } ol,ul { list-style: none; } caption,th { text-align...,th,var { font-weight: normal; font-style: normal; } ol,ul { list-style: none; } caption,th { text-align...关于CSS Reset的讨论我在知乎上看到一个帖子,讨论Normalize.css 与传统的 CSS Reset 有哪些区别? 上面说到: Normalize.css 是改良派。...他们提倡,各个元素都有其存在的道理,简单粗暴地一视同仁是不好的。body 那一圈确实挤压了页面的生存空间,那就改掉。士农工商,谁有谁的作用,给他们制定个规范,确保他们在任何浏览器里都干好自己的活儿。

    2.5K21

    CSS中的vertical-align跟line-height相互作用

    : super; vertical-align: text-top; vertical-align: text-bottom; vertical-align: middle; vertical-align...举个简单的例子,如下CSS代码: { line-height: 30px; vertical-align: -10%; } 实际上,等同于: { line-height: 30px; vertical-align...首先,大家一定要意识到这么一点:对于内联元素,vertical-align与line-height虽然看不见,但实际上「到处都是」! ? ?...所以,妹子图片的下边缘就和后面zxx中的字母x下边缘对齐(见下图)。而字符zxx本身是有高度的,对吧,于是,图片下面就留空了。 而zxx文字的高度是由行高决定的。...当然不是,“幽灵字符”可以受具有继承特性的CSS属性影响,于是,我们可以通过其他东西来做调整,让字符的中线和字符内容中心线在一起,或者说在一个位置上就可以了。有人可能要疑问了,这能行吗?

    88910

    CSS中的伪类和伪元素

    定义 伪类 CSS 伪类 是添加到选择器的关键字,指定要选择的元素的特殊状态。 例如,:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。...*/ p::first-line { color: blue; text-transform: uppercase; } 伪类连同伪元素一起,他们允许你不仅仅是根据文档 DOM 树中的内容对元素应用样式...,而且还允许你根据诸如像导航历史这样的外部因素来应用样式(例如 :visited),同样的,可以根据内容的状态(例如在一些表单元素上的 :checked),或者鼠标的位置(例如 :hover 让你知道是否鼠标在一个元素上悬浮...这个时候,被修饰的 元素依然处于文档树中。...总结 1.伪类本质上是为了弥补常规CSS选择器的不足,以便获取到更多信息; 2.伪元素本质上是创建了一个有内容的虚拟容器; 3.CSS3中伪类和伪元素的语法不同; 4.可以同时使用多个伪类,而只能同时使用一个伪元素

    2.8K10

    FSWD_1_BasicHtmlCss

    本文是中国香港中文大学《Full Stack Web Development》系列课程中的笔记 网络开发概述 网络结构 html一般用于组织网页的文字、图片、视频 css是组织...> go here 备注: 关于id和name属性,一般情况下建议用id,只有在与表单form交互时必须用name,另外上面代码中的网页内锚点也用...两种,默认采用get,一般来说,get不传输文件,并且get的信息不保密,会在url上显示。...> text-align:right">lala href 值为外部资源地址,这里是css的地址 rel 定义当前文档与被链接文档之间的关系,这里是外部css样式表即stylesheet...type 规定被链接文档的 MIME 类,这里是值为text/css anchor id #id class .class multiclass class=”c1 c2” style

    40410

    伪类以及伪元素的一些使用小技巧

    在浏览器版本越来越高的情况下,很多以前顾及到兼容问题不敢使用的html以及css属性现在已经很普遍的在使用了。比如一些伪类和伪元素。这里稍微提一下在实际工作中用到的一些小技巧,算是笔记。...其实道理都是一样的,利用chenked或者focus的状态,通过css来定义样式,比如用图片替代checkbox框,原理就是隐藏checkbox之后,通过label操作他的兄弟元素样式。....checkbox-wrap input:checked + label span{background-position: 0 -20px;} 在input的checked状态下改变span元素的背景图片..." placeholder="账号/手机/邮箱"> text" placeholder="请输入密码"> ...demo比较粗糙,实际应用的时候需要微调). 以上只是做个笔记,实际应用中遇到新的技巧我会继续添加。

    94590

    Web前端教程-HTML及标签的使用

    表单标签 form默认是GET方法提交,直接通过地址信息提交,用于大量文本且不敏感的信息 form可以通过method改为post, 输入的敏感信息就不会再地址中显示出来,用于少量文本且敏感的信息 标签名称...说明 form 定义供用户输入的HTML表单 input 输入控件 textarea 多行输入控件 button 按钮 select 选择列表 optgroup 选择列表中相关选项的组合 option...选择列表中的选项 label input 元素的标注 fieldset 定义围绕表单中元素的边框 legend 定义 fieldset 元素的标题 datalist 定义下拉列表 keygen 定义生成密钥...output 输出的一些类型 例子: 1. form元素(用以用户输入数据): text的属性: maxlength,size, name, value, readonly, disabled, list提供建议值,required必须输入才能提交, palceholder输入字符的提示

    1.1K10
    领券