html下边框样式,css border-bottom div css下边框样式设置
css border-bottom div下边框对象底部边框样式设置
border-bottom是对对象下边边框设置样式单词,对层等对象设置下边框颜色、宽度、样式,所用CSS border-bottom下边框底部边框属性实现。
一、css border-bottom边框语法
border-bottom语法:
border-bottom:1px solid #000
设置下边边框宽度为1px、实线样式、颜色为黑色。
div{border-bottom:1px solid #000}
设置div下边框样式,下边框宽度为(厚度)1px,边框样式为实线(solid)、边框颜色为黑色(#000)。
border-bottom单独分拆与简写:
border-bottom:1px solid #000可以分拆为:
border-bottom-width:1px
border-bottom-style:solid
border-bottom-color:#000
可见分拆后CSS下边框样式代码比较多,所以一般通常我们简写:
border-bottom:1px solid #000
这样简写缩写border-bottom样式达到代码最简代码量最少,也是推荐使用的代码写法。
二、常规border-bottom下边框应用
1、对对象设置下边框border-bottom CSS样式。
.exp-a{ border-bottom:1px solid #F00}
对class=”exp-a”设置1px实线红色下边框样式。
下边框border-bottom样式应用效果截图
2、应用border-bottom对文字加下划线效果
当然我们知道对文字加下划线除了HTML标签和CSS text-decoration实现,当然我们也可以使用border-bottom达到一样下划线效果。这里只作为一种应用,实际布局时候根据需求选择下划线CSS或HTML标签。
当然border-bottom实现文字下划线就可以改变下划线粗细等效果
关键CSS代码如下:
.exp-a{ border-bottom:4px solid #F00}
完整HTML+CSS代码
border-bottom应用 CSS5
.exp-a{ border-bottom:4px solid #F00}
CSS5测试文字,加下划线border-bottom
使用span加class应用.exp-a,这样不改变文段排版。
border-bottom下划线效果截图:
border-bottom实现下划线实例效果截图
三、border-bottom小结
下边框属性border-bottom与边框border语法相同,布局应用相同,只是只对单边框设置边框效果。从以上两个border-bottom应用实例,掌握其用法,灵活布局演变出更多布局需求。
作者:div css
html下边框样式,css border-bottom div css下边框样式设置相关推荐
- 使用div和css重构网站,DIV+CSS网页重构概念详解
本文和大家重点讨论一下DIV+CSS网页重构的概念,常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方 ...
- css html5360百科,div+css
所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序. 内联样式(inline style) > ID选择符 > 类选择符(class), 伪类(pseudo-class)和属*( ...
- HTML5div css入门案例,div+css教学教案(学习入门到精通~)详细讲解.doc
| div+cssHYPERLINK "/"教程(入门到精通) 目录: 一.div+css教程(入门到精通)详细讲解 二.DIV+CSS网页布局常用基础知识 三.div+css常用 ...
- div css教程 属性,Div+CSS布局入门教程
在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础 ...
- psd转div+css,PSD转DIV+CSS的方法.doc
PSD转DIVCSS的方法 把psd页面利用div+css切割成html页面 首先看看效果下面的图片就是效果图,切割出来后,可能头部和底部会宽点..... 新建文件夹 开始时,在您的计算机中创建一个文 ...
- html中写css代码,开发DIV CSS时 先写CSS代码还是先写HTML代码
相信良多LOVE用DIV+CSS技术启示重构网页的爱好者友好,在起源学习DIV+CSS的时分都邑想一个标题,想晓得DIV+CSS妙手或有教育者在开发制作html页面的时刻,下场是先写html照样先写c ...
- html/css题库,DIV+CSS题库
C D 2.在CSS语言中下列哪一项是"左边框"的语法?(C ) A.border-left-width: B.border-top-width: C.border-left: D ...
- html如何给图片加四周边框,css如何给div加上四角边框
先看效果图 HTML代码(注:view是微信小程序中的div,如果是html或者vue换成div即可): CSS代码: .a { width: 10px; height: 10px; position ...
- CSS学习笔记--Div+Css布局(div+span以及盒模型)
1.DIV与SPAN 1.1简介 1.DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式 2.DIV和span的区别在与,span是内联元素,div是块级元素 内联元 ...
- css 浮动 解决,div+css浮动的解决方法
如何清楚浮动(一) 已知一个大的div容器,这个容器包含了两个子div容器,然后在这两个子div容器的后面再添加一个div(这个div表示清除浮动的div容器),清楚浮动的div容器设置css样式为c ...
最新文章
- android xUtils的使用
- 基于HTML5 Canvas 实现弹出框
- Cenos7 部署asp.net core站点
- asp.net core mvc权限控制:在视图中控制操作权限
- MapReduce读取本地文件,而不是HDSF上的文件
- iOS - 实现语言本地化/国际化
- Java 生态碎片化 和 .NET生态的一致性
- idea出现 Error:(1, 16) java: 非法字符: '\u0a0d'
- php定义数据表类,phpwind中的数据库操作类
- DotNetNuke模块开发简介
- odoo 对 many2many one2many的操作
- linux安装windows常用中文字体库
- python显示单片机温度_基于Python串口和单片机的实时温度采集系统
- 夜神模拟器使用过程遇到的问题
- JVM内存设置参数分析
- CTF easycap Banmabanma
- RHCSA 知识点汇总
- [C++] 小游戏—三国杀
- 如何去远程控制公司电脑 这三样必备一样也不能少
- 显著性物体检测与分割