1.首先,您需要创建一个div,对div进行添加一个class。我们利用CSS通过class来设置div的边框。
2.创建一个用于设置边框的CSS文件,对于您实际开发中,将边框添加到您的CSS文件中即可。
3.在CSS文件中设置DIV的边框,首先我们可以先给div一个宽度与高度。
4.得到了宽度与高度后,如果我们没有边框,是看不到样式的。如果您的div中有内容,那么只是显示那些内容而已。
5.接下来,添加一个border边框。
6.我们将边框设置为1px.如果只是设置了宽度而没有设置颜色与具体的显示样式的话,边框并不会显示,您现在可以刷新一下您的页面看一下,添加了border:1px后是否显示,答案是肯定不显示的,因为我们参数没有写完整。
7.参加第二个参数颜色值,具体的颜色您可以百度搜索具体的样式值的代码,您可以使用基本色直接使用单词拼写也是可以的。
8.最后一个参数是显示样式,您可以选择不同的样式来进行显示,我们这里使用的是实线的方式来实现。
9.如果您使用的是一些专门用来做前端开发的软件,您输入后,会有一些提示,您如果选择不同样式来试一试看。
10.添加了上述的三个属性后,您的div边框即可显示出来了。
网页设计问题,就是如何在css布局中设定边框大小、颜色问题孩子,我想告诉你,如果你还继续使用表格建站的话,会一直找不到工作的。我想这一定是大学老师在教你用表格建站吧
听我一言,现在都是用div+css建站!
你要的边框效果css这样写
先来个<div class="biaoge"></div>
然后写css:
<style>
.biaoge{ width:200pxheight:100pxborder:1px solid #000}
</style>
网页设计css布局问题paddin:100px ,0px
是上下100px 左右0px
padding:10px;
是上下左右各10
IE6 浏览器下 应该是有变化的。
火狐浏览器下 没有变化 因为padding值 超过了li的高度
IE7应该是和火狐一样的 这个我没有测试 因为没装IE7
产生这个问题的原因是IE和火狐对于padding的解释不同
IE会把padding值加到物件高度和宽度中,从而使物件变大
但是火狐不会这样,他会把padding的值从物件高度宽度中扣除
物件实际大小不发生变化,可用大小发生变化。
IE7改变了许多地方,变的和火狐有些相像了。
网页设计中DIV+CSS布局问题你可以把父DIV里面的两个并排的DIV的属性同时设定为浮动LEFT,这个问题即可解决。
#about { width: 727px}改为:#about { width: 728px}即可,因为里面两个DIV加上边距超过了这个长度,所以显示不正确,修改里面那两个DIV长度也可以。
网页设计布局css问题这个小角是个图片而已, 是一个长条的图片, "角"以外的部分做成透明的, 或者和背景色相同, 看上去就是一个独立的角了
CSS布局中的div设定问题全部设定为一样的高度
div2的属性里面加上这个就行
overflow-y:scroll
就ok了
如何在css中设定选单的边框颜色
select样式要想非常好看,单用CSS是实现不了的,必须要用到JS才行!
下面这个例子是CSS实现的效果:
<!DOCTYPE PUBLIC "-W3CDTD XHTML 1.0 TransitionalEN" ":w3./TR/x1/DTD/x1-transitional.dtd">
<xmlns=":w3./1999/x">
<head>
<meta -equiv="Content-Type" content="text/charset=utf-8" />
<title>如何让select的样式也漂亮起来</title>
<style type=text/css>
<!--
.select * {
margin: 0
padding: 0
}
.select {
border:1px solid #
float: left
display: inline
}
.select div {
border:1px solid #f9f9f9
float: left
}
/* 子选择器,在FF等非IE浏览器中识别 */
.select>div {
width:120px
height: 17px
overflow:hidden
}
/* 通配选择符,只在IE浏览器中识别 */
* .select div select {
display:block
float: left
margin: -2px
}
.select div>select {
display:block
width:124px
float:none
margin: -2px
padding: 0px
}
.select:hover {
border:1px solid #666666滑鼠移上的效果
}
.select select>option {
text-indent: 2pxoption在FF等非IE浏览器缩排2px
}
-->
</style>
</head>
<body><div class="select">
<div>
<select>
<option>看见效果了吧</option>
<option>看见效果了吧</option>
<option>看见效果了吧</option>
</select>
</div>
</div>
</body>
</>
-------------------
关于JS程式码,你可以去看下这个,改了之后就能达到你要的效果:
:geekso./select-css/
单纯的CSS是实现不了的!
网页设计师请进,有个css布局的问题一、只对表格table标签设置边框 - TOP
只对table标签设置border(边框)样式,将让此表格最外层table一个边框,而表格内部不产生边框样式。
案例详细如下:
1、对应css代码
<style>.table-a table{border:1px solid #F00} /* css注释:只对table标签设置红色边框样式 */ style>
2、对应html代码片段
<divclass="table-a"><tablewidth="400"border="0"cellspacing="0"cellpadding="0"><tr><tdwidth="105">站名td><tdwidth="181">网址td><tdwidth="112">说明td>tr><tr><td>DIVCSS5td><td>www.divcss5.comtd><td>CSS学习td>tr><tr><td>CSS5td><td>www.css5.com.cntd><td>CSS切图td>tr>table>div>
二、对td设置边框 - TOP
对table表格td设置边框样式,表格对象内td将实现边框样式,但中间部分td会导致出现双边框。
详细案例教程如下:
1、对应css代码
<style>.table-b table td{border:1px solid #F00} /* css注释:只对table td标签设置红色边框样式 */ style>
2、对应html源代码片段
<divclass="table-b"><tablewidth="400"border="0"cellspacing="0"cellpadding="0"><tr><tdwidth="105">站名td><tdwidth="181">网址td><tdwidth="112">说明td>tr><tr><td>DIVCSS5td><td>www.divcss5.comtd><td>CSS学习td>tr><tr><td>CSS5td><td>www.css5.com.cntd><td>CSS切图td>tr>table>
三、对table和td技巧性设置表格边框 - TOP
如上第二点,只对表格对象td设置单一边框样式,中间部分td与td标签之间就会出现双边框现象。
解决方法:对td只设置两个边的边框,对table也设置两个边的边框样式。
解释:对td设置左与上边框,这样td与td相邻就会只出现单一边框样式,这样就会出现表格右侧和下部没有边框,这个时候我们设置table右和下 边框解决显示右侧和下侧td剩下未显示边框。
1、对应css代码:
<style>.table-c table{border-right:1px solid #F00border-bottom:1px solid #F00} .table-c table td{border-left:1px solid #F00border-top:1px solid #F00} /* css 注释: 只对table td设置左与上边框; 对table设置右与下边框; 为了便于截图,我们将css 注释说明换行排版 */ style>
2、对应html源代码片段:
<divclass="table-c"><tablewidth="400"border="0"cellspacing="0"cellpadding="0"><tr><tdwidth="105">站名td><tdwidth="181">网址td><tdwidth="112">说明td>tr><tr><td>DIVCSS5td><td>www.divcss5.comtd><td>CSS学习td>tr><tr><td>CSS5td><td>www.css5.com.cntd><td>CSS切图td>tr>table>
四、对table和td设置背景,实现完美表格边框 - TOP
1、基础设置
1)、先设置table css背景为红色
2)、设置table单元之间间距为1
使用DW软件辅助设置table表格单元间距为1,具体DW软件可视化操作步骤简要说明,首先(视图模式)选中表格后,对应DW软件编辑窗口底部会“属性”面板会出现对应table表格属性设置地方,我们将“间隔”填写为“1”。这个时候我们会看到table表格标签里cellspacing值为“1”(cellspacing="1")。
借助DW软件设置表格单元之间间距
或
直接对
标签内cellspacing="1"即可,得到:
<tablewidth="400"border="0"cellspacing="1"cellpadding="0">
3)、设置table td背景为白色
2、css代码:
<style>.table-d table{ background:#F00} .table-d table td{ background:#FFF} /* css注释:设置table背景为红色,td背景为白色 */ style>
3、对应html源代码:
<divclass="table-d"><tablewidth="400"border="0"cellspacing="1"cellpadding="0"><tr><tdwidth="105">站名td><tdwidth="181">网址td><tdwidth="112">说明td>tr><tr><td>DIVCSS5td><td>www.divcss5.comtd><td>CSS学习td>tr><tr><td>CSS5td><td>www.css5.com.cntd><td>CSS切图td>tr>table>div>
五、css table表格边框实现总结 - TOP
以上四种方式实现table表格边框样式方法,推荐使用第三和第四种方法来解决表格边框样式。希望DIVCSS5整理总结html table边框布局方法对大家有帮助并能掌握,平时需要时灵活运用。