在HTML前端开发中,无数次会对div设置边框

2019-09-08 郑州网站建设  

给DIV加一个边框方案教程,实现div边框技俩。经由过程CSS border花色属性实现加边框。

如下是各种给DIV加不合边框实例与材干教程、html代码。

一、div加四边加边框

1、用到css单词与值

border:1px solid #F00 

设置对象边框为红色边框

2、div完整小实例实例代码:

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 

<title></title> 

<style> 

.a-4{ border:1px solid #F00} 

</style> 

</head> 

<body> 

<div class="a-4">四边为赤色</div> 

</body> 

</html> 

实例截图:

给div 边框

经由border轻松配置div 4条边边框

二、div上边加边框

1、使用单词和值

border-top:1px solid #F00 

2、残缺实例代码

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 

<title></title> 

<style> 

.a-top{ border-top:1px solid #F00} 

</style> 

</head> 

<body> 

<div class="a-top">只配置div上边框</div> 

</body> 

</html> 

3、效果截图

div 边框-上边框

三、div下边加边框

1、应用单词与值

border-bottom:1px solid #000 

2、完整实例代码

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 

<title></title> 

<style> 

.a-bottom{ border-bottom:1px solid #000} 

</style> 

</head> 

<body> 


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1376.html转载请标明出处,谢谢合作!
标签:
  • HTML
  • 设置
  • DIV
  • 前端
  • 开发
  • 数次
  • 会对