DIV+CSS圆角框组件

最新推荐文章于 2024-05-20 22:08:52 发布
最新推荐文章于 2024-05-20 22:08:52 发布
阅读量81 收藏
点赞数
分类专栏： css html 文章标签： div html css
html 同时被 2 个专栏收录
28 篇文章 0 订阅
订阅专栏
css
14 篇文章 0 订阅
订阅专栏 

<html>
<head>
<title>DIV+CSS圆角框组件</title>
<style type="text/css">

/*原理：由左右边框长度、左右缩进以及溢出隐藏实现。*/
/*高度由div的width决定*/
div#sidebar_f {
	margin: 0;
	padding: 0;
	float: left;
	width: 800px;
	text-align: center;
}

div#sidebar {

}

div.linetop,div.linebottom,div.line1,div.line2,div.line3 {
	overflow: hidden;
	display: block;
}

div.linetop {
	margin: 0 5px;
	height: 1px;
	border-bottom: 1px solid;
}

div.linebottom {
	margin: 0 5px;
	height: 1px;
	border-top: 1px solid;
}

div.line1 {
	margin: 0 3px;
	height: 1px;
	border-left: 2px solid;
	border-right: 2px solid;
}

div.line2 {
	margin: 0 2px;
	height: 1px;
	border-left: 1px solid;
	border-right: 1px solid;
}

div.line3 {
	margin: 0 1px;
	height: 2px;
	border-left: 1px solid;
	border-right: 1px solid;
}

/*高度由middle的height决定*/
div.middle {
	margin: 0 0;
	height: auto;
	border-left: 1px solid;
	border-right: 1px solid;
}

/*设置背景颜色*/
div.middle,div.line1,div.line2,div.line3 {
	background-color: #F8F8F8;
}

/*设置边框颜色*/
div.linetop,div.linebottom,div.middle,div.line1,div.line2,div.line3 {
        border-color: #7F9DB9;
}
</style>

</head>

<body>

			<div id="sidebar_f">
				<div class="linetop"></div>
				<div class="line1"></div>
				<div class="line2"></div>
				<div class="line3"></div>
				<div class="middle" id="sidebar">
					这是内容。
				</div>
				<div class="line3"></div>
				<div class="line2"></div>
				<div class="line1"></div>
				<div class="linebottom"></div>
			</div>

</body>
</html>
iteye_20824
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
智慧屏和智能穿戴开发：容器组件div
HarmonyOS技术社区
12-01 1344
HarmonyOS应用开发文档更新修改说明：div组件补充示例代码和示例效果图，方便开发者掌握该组件的使用方式 基础容器，用作页面结构的根节点或将内容进行分组。 支持设备 表1组件的设备支持情况 智慧屏 智能穿戴 支持 支持 权限列表 无 子组件 支持。 属性 名称 类型 默认值 必填 描述..
html中div动态边框,[实践总结]纯css实现动态边框
weixin_32093689的博客
06-09 1714
这几天工作中遇到一个交互需求，要求实现一个效果，当鼠标移入一个元素的时候，元素出现一个动态的边框，如图： 动态边框思路看到这个效果，我首先想到的是设置元素的border属性，可惜border不能设置长度，无法实现动效。另外一种实现思路是添加四个div来分别实现上下左右的边框效果，虽然可行，但是要添加四个额外元素，有点儿得不偿失的感觉。难道就没有更好的解决方案了...就在我绞尽脑汁的时候，灵光乍现...
一段自适应高度的圆角css矩形
漠上风情的专栏
12-06 1118
html xmlns="http://www.w3.org/1999/xhtml">head>meta http-equiv="Content-Type" content="text/html; charset=gb2312" />title>自适应圆角做法title>style type="text/css">#xsnazzy h1, #xsnazzy h2,
挺好用的可编辑div组件（一）
harmsworth的博客
04-27 2732
可编辑div组件
div控件的相关介绍
sunny19890816的专栏
05-26 1831
  第一次用Ajax技术来做一个简单的网站，登陆页面使用的是form，div，input三种元素来布局，希望的效果是一个带图片的div显示在距form元素左边框的约20%（form的width）的距离处，经过查看资料，了解到：1.html中元素可分为内联元素（inline element）和块元素（block element）；  a）块元素（block element），一般是其他元素的
div+CSS3实现圆角按钮代码
清叶 的专栏
05-18 692
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>div+CSS3实现制作精美漂亮的圆角按钮特效代码</title> <style type="text/css"> .demo{width:760px; margin:20px auto 0 auto; height:70px;} .button { display: inline-block; ou.
HTML+CSS 开发简单组件(四)
tian_yanT的博客
07-12 97
HTML+CSS 开发简单组件(四) 手写一个滑块开关 html部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>滑块开关</title> <link rel="stylesheet" type="text/css" href="index.css"/> </head> <body> <div
HTML+CSS 开发简单组件(二)
tian_yanT的博客
07-12 126
HTML+CSS 开发简单组件(二) 仿制网易滑块验证 废话不说，直接上代码 html部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>html+css+js编写滑块验证码</title> <link rel="stylesheet" type="text/css" href="index.css"/> </head>
HTML+CSS 开发简单组件(五)
tian_yanT的博客
07-12 111
HTML+CSS 开发简单组件(五) 仿制选项卡 废话不说，直接上代码 html部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>选项卡制作</title> <link rel="stylesheet" type="text/css" href="index.css" /> </head> <body>
div+css制作圆角矩形的原理示例解读
09-25
圆角矩形的制作想必大家都会吧，但真正的实现原理想必并没有几个人知道，在本文有个不错的示例或许能帮助大家更好的理解其中的原理，感兴趣的朋友可以参考下
使用Div+CSS纯图片实现圆角矩形的方法小结
09-24
主要介绍了使用Div+CSS纯图片实现圆角矩形的方法小结,CSS3中用代码绘制圆角矩形非常方便,而本文要介绍的则是利用图片来实现兼容性更强的方法,需要的朋友可以参考下
DIV+CSS简单登录界面模板
06-06
DIV+CSS简单登录界面模板，DIV+CSS布局，有用户名、密码登录框，登录按钮。
div+css无图边框圆角实现思路及代码
01-19
css圆角效果</title> <meta http-equiv=”content-type” content=”text/html; charset=gb2312″> <style type=”text/css”> div.RoundedCorner{background: #9BD1FA} b.rtop, b.rbottom{...
HTML静态网页作业(HTML+CSS+JS)——动漫蜡笔小新网页设计制作(4个页面)
weixin_42283461的博客
05-20 338
HTML静态网页作业(HTML+CSS+JS)——动漫蜡笔小新网页设计制作(4个页面)
Web开发——HTML&CSS
最新发布
一切皆是定数的博客
05-20 160
HTML：HyperText Markup Language，超文本标记语言超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。标记语言：由标签构成的语言，HTML标签都是预定义好的。HTML代码直接在浏览器中运行，HTML标签由浏览器解析。CSS：Cascading Style Sheet，层叠样式表，用于控制页面的样式（表现）。以下就是html代码以及css样式搭配之后的显示效果。
HTML常见标签-换行标签-水平线标签
weixin_44201223的博客
05-14 184
换行标签 水平线标签
HTML的使用（中）
weixin_74141222的博客
05-14 1045
在许多网页平台上浏览，大多逃不了登录账号。此时在网页中填写的用户名文本框与密码文本框，就属于HTML的表单元素。以上就是HTML表单的内容了，表单提供了大量能使浏览器用户快速便捷地填写数据的方法，构建了数据的交互传输。
html 根字号 以及 设置根元素font-size:calc(100vw/18.75)、元素rem实现自适应
hx_1199的博客
05-17 397
rem 是相对文档根元素(html)字体大小的尺寸单位，当元素的尺寸或文字字号等使用 rem 单位时，会随着根元素的 font-size变化而变化。以750px 设计稿为例 100vw=750px 750/18.75=40 即 1rem=40px;以1920px 设计稿为例 100vw=1920px 1920 / 48 =40 即 1rem=40px;在不同分辨率的设备下动态设置根元素的字体大小就可以实现页面自适应。
怎么给搜索框组件 添加颜色
06-08
要为整个搜索框组件添加颜色，您可以使用CSS样式为搜索框及其周围的元素设置背景色、边框等属性。以下是一个例子： HTML代码： ```html <div class="search-container"> <button type="submit">Search </div...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值