`

Div+CSS的边框效果【原创】

CSS 
阅读更多

虽然本人做的是逻辑开发,但是偶尔会涉及到页面上的事儿,总感觉能用好看的框框规格好页面,清爽一点就很满足了。那么怎么用CSS来画出边框呢?

     <div style="float:left;width:450px;height:180px;background-color:;
       border-right: 1px solid #ccccff;
     border-bottom: 1px solid #ccccff;">

就是这样:1px solid #ccccf;

偶尔想要间距的话就用margin属性吧。

 

分享到:
评论

相关推荐

    div+css手册

    《div+css手册》是一本深入探讨网页布局技术的重要参考资料,尤其对于网页设计者和前端开发者来说,它具有极高的学习价值。这个手册的核心聚焦在HTML中的`div`元素和CSS(层叠样式表)的结合使用上,旨在帮助读者...

    DIV+CSS简单登录界面模板

    在网页设计领域,`DIV+CSS`是一种广泛使用的布局技术,它通过定义不同的`Div`(Division,分块)元素并应用相应的`CSS`(Cascading Style Sheets,层叠样式表)样式来构建页面结构和外观。标题提到的“DIV+CSS简单...

    div+css布局制作箭头步骤流程样式 - div+css教程

    总结一下,`div+css`布局制作箭头的步骤流程包括:创建`div`元素、定义边框、调整角度、定位箭头以及可能的复杂形状实现。这不仅有助于提升网页设计技能,也有助于理解CSS的灵活性和强大性。对于志峰创业室这样的...

    div+css布局大全

    9. **性能优化**:合理的div+css布局也应考虑性能,如减少CSS选择器的复杂性、优化图片和字体资源、使用适当的布局方法等,以提升页面加载速度和用户交互体验。 10. **浏览器兼容性**:尽管现代浏览器对CSS的支持...

    div+css div+css精通CSS

    标题与描述中提到的“div+css div+css精通CSS”这一主题,主要涉及的是网页设计与布局的核心技术——利用HTML中的div元素结合CSS样式表进行网页内容的组织与美化。接下来,我们将深入探讨这一主题所包含的关键知识点...

    DIV+CSS教程—十天学会web标准div+css标准之路WORD版

    《DIV+CSS教程—十天学会web标准div+css标准之路》是一份全面且深入的教程,旨在帮助初学者在短时间内掌握网页布局的核心技术——DIV和CSS。此教程以Word文档的形式提供,易于阅读和打印,适合自学或者作为教学参考...

    W3C网页标准、div+css教程、xhtml+css介绍

    4. **盒模型**:理解CSS盒模型是关键,它包括内容(content)、内边距(padding)、边框(border)和外边距(margin),影响元素的实际尺寸和位置。 **XHTML+CSS** XHTML+CSS是遵循W3C标准的开发方式,强调结构和...

    div+css后台登录模版

    3. **样式美化**:CSS提供了丰富的样式属性,如边框、背景色、阴影、过渡效果等,用于提升登录界面的视觉吸引力。比如,使用圆角边框、渐变背景和悬停效果可以使按钮看起来更生动。 4. **表单验证**:在登录模版中...

    DIV+CSS美化网站实用教程

    本教程《DIVCSS布局教程.pdf》将详细讲解这些概念,并通过实例指导如何在实践中应用,从而提升你的网站美化技能。无论你是初学者还是经验丰富的开发者,都能从中受益匪浅,为你的网页设计之路增添更多色彩和可能性。

    DIV+CSS绿色音乐模板

    通过CSS,我们可以设置这些`div`的宽度、高度、位置,以及背景色、边框等,从而形成绿色的音乐主题。 至于`images`目录,通常会包含模板中使用的图片资源,如音乐相关的图标、背景图片等。这些图片通过CSS的`...

    DIV+CSS案例(21-30)

    `CSS`可以用于实现复杂的背景效果、阴影和边框,使建筑作品更加引人注目。同时,`DIV`元素可以用来封装各个部分,如设计师简介、作品展示和联系信息。 "科技公司"案例可能是一个企业官网,`DIV+CSS`在这里用于构建...

    div+css案例,网页设计

    6. **样式应用**:如何为Div元素添加背景色、边框、文本样式,以及使用类(class)和ID选择器来应用样式。 7. **浮动元素与清除**:如何解决浮动元素导致的父元素高度塌陷问题,使用clearfix方法或CSS的overflow...

    div+css布局制作横向带箭头步骤流程样式

    在网页设计中,`div+css`布局是构建页面结构和样式的重要技术。它通过HTML的`&lt;div&gt;`元素作为容器来组织内容,并利用CSS(层叠样式表)来定义这些容器的外观、位置和样式。`div+css`布局能够实现灵活、可维护的网页...

    网页 Demo,div+css

    CSS还提供了盒模型概念,包括内容(content)、内边距(padding)、边框(border)和外边距(margin),这些都影响着`div`元素的实际尺寸。理解盒模型对于精确布局至关重要。 除此之外,CSS的定位机制包括静态定位...

    div+css select效果

    本教程将详细讲解如何使用`div+css`来实现一个兼容多浏览器的美化版`select`效果。 首先,我们需要创建一个`div`元素作为`select`的替代品,这将作为我们自定义样式的容器。通过设置`position`属性为`relative`,...

    div+css菜单

    在创建菜单时,我们通常会用&lt;div&gt;作为容器,再通过CSS设置背景色、边框、字体样式等属性,以创建各种效果的菜单项。 二、优点 1. 语义化:使用&lt;div&gt;元素可以提高HTML代码的可读性和可维护性。 2. 响应式:通过CSS...

    DIV+CSS的介绍和用法

    3. **样式化**:利用CSS,我们可以改变`DIV`的宽度、高度、背景色、边框、内边距、外边距等属性,以实现不同的布局效果。 **CSS布局** 1. **盒模型**:理解CSS盒模型是布局的基础,包括内容(content)、内边距...

    div+css经典案例源码

    7. **动画与过渡**:通过CSS动画和过渡效果,为网页增加动态元素,提升用户体验。 三、实战学习与提升 通过分析这些div+css的实例源码,你可以: 1. **模仿实践**:逐行阅读代码,理解每个样式规则的作用,尝试...

    div+css网页模板

    9. **实战应用**:学习这个模板后,你可以尝试修改Div的样式,调整布局,甚至添加交互效果,以此提升自己的前端开发技能。同时,这样的模板也可以作为快速构建新网页的基础,提高工作效率。 10. **最佳实践**:在...

    DIV+CSS导航栏

    这些`&lt;div&gt;`可以嵌套或者并排排列,通过CSS设置样式,如宽度、高度、背景色、边框等,来实现不同样式的导航栏。例如,我们可以创建一个基础的水平导航栏: ```html &lt;div class="navbar"&gt; &lt;div class="nav-item"&gt;...

Global site tag (gtag.js) - Google Analytics