导航:首页 > 万维百科 > 网页设计中border

网页设计中border

发布时间:2020-10-13 21:49:28

1、请问,网页设计中怎样用div+css进行如下图的分块,谢谢。

如果有成图的话,可以考虑PS切图

手写的话,代码就比较多了

<!DOCTYPE html>
<html>
<head>
<title>手写代码</title>
<meta charset="utf-8">
<style type="text/css">
*{padding:0;margin: 0;}
.w1260{width: 1260px;margin: 12px auto;margin-top: 0;}
.h-1{border: 1px solid #bbb;height: 120px;}
.h-2{border: 1px solid #bbb;height: 80px;}
.h-3{border: 1px solid #bbb;position: relative;overflow: hidden;}
.h-3 .h3-l{float: left;width: 33%;border-right: 1px solid #bbb;padding:1%;}
.h-3 .h3-l .h3-l1{border: 1px solid #bbb;height: 200px;}
.h-3 .h3-l .h3-l2{border: 1px solid #bbb;height: 200px;margin-top: 12px;}
.h-3 .h3-r{float: right;width: 62.6%;padding: 1%;padding-left: 0;}
.h-3 .h3-r .h3-r1{position: relative;width: 100%;border: 1px solid #bbb;overflow: hidden;}
.h-3 .h3-r .h3-r1 .h3-r1-l{float: left;height: 80px;border-right: 1px solid #bbb;width: 75%}
.h-3 .h3-r .h3-r1 .h3-r1-r{float: right;height: 80px;width: 24%;}
.h-3 .h3-r .h3-r2{position: relative;width: 100%;border: 1px solid #bbb;overflow: hidden;height: 100px;margin-top: 12px;}
.h-3 .h3-r .h3-r3{position: relative;width: 100%;border: 1px solid #bbb;overflow: hidden;margin-top: 12px;}
.h-3 .h3-r .h3-r3 .h3-r3-l{float: left;height: 200px;border-right: 1px solid #bbb;width: 75%}
.h-3 .h3-r .h3-r3 .h3-r3-r{float: right;height: 200px;width: 24%;}
.h-4{border: 1px solid #bbb;height: 80px;}
</style>
</head>
<body>
<div class="h-1 w1260"></div>
<div class="h-2 w1260"></div>
<div class="h-3 w1260">
<div class="h3-l">
<div class="h3-l1"></div>
<div class="h3-l2"></div>
</div>
<div class="h3-r">
<div class="h3-r1">
<div class="h3-r1-l"></div>
<div class="h3-r1-r"></div>
</div>
<div class="h3-r2"></div>
<div class="h3-r3">
<div class="h3-r3-l"></div>
<div class="h3-r3-r"></div>
</div>
</div>
</div>
<div class="h-4 w1260"></div>
</body>
</html>

2、网页制作中使用什么标记符给图像加边框

直接border=1,或者使用css

img {
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
/*定义图片边框*/

颜色需要在css里边加上

border-top-color: #FF0000;
border-right-color: #FF0000;
border-bottom-color: #FF0000;
border-left-color: #FF0000;

3、网页设计中,怎么让DIV的边框的4个角呈圆角形?

怎么能让一个DIV或者一个图片的四角为圆形呢?其实并不需要我们去把每个角都剪切掉,而只需要设置每个解的圆狐度即可。

案例代码:

div{border-radius:5px 5px 0 0;}设置DIV对象盒子左上角和右上角5px圆角,其它两个角为0不圆角

border-radius:3px 4px 5px 6px代表设置对象左上角3px圆角、右上角4px圆角、右下角5px圆角、左下角6px圆角.box2 img{border-radius:5px}

设置DIV中的图片为圆角图片。

4、网页设计中CSS的表格单元格边框设置

border:2px 3px 6px 9px 这个要加上 width才有效 border-width:2px 3px 6px 9px
四边框一同设置的数值不同的时候只能设置一个 color或者style或者width
border-width:1px 2px 3px 4px;
border-style: groove double dashed solid ;
border-style: #000 #0fh #250 #fff ;

5、网页制作:css 中倾斜的border 样式怎么写

font:italic bold 12px sans-serif;从左到右依次是 斜体 加粗 12号sans-serif字体

6、网页设计问题,就是如何在css布局中设置边框大小、颜色问题

我个人建议你应该先学学基本的HTML和CSS知识,可视化的网页编辑工具对于新手来说是比较方便,但是这样的结果是“知其然不知其所以然”,而且有的时候用软件是达不到想要的效果的,还得直接修改HTML和CSS代码。

img {border:1px solid #666666;}

7、网页设计中,用表格布局页面,Border为0

可以在全局定义时给body{margin:0px; padding;0px;}这样body的元素内外边距都为0定义了。可以试试可不可以

8、网页制作中表格的CellPad、CellSpace和Border属性是什么意思

http://tech.tom.com/2006-07-11/005F/08063436.html

CellPad是指表格中两个单元格之间的距离,CellSpace是指每个单元格与它中间的内容之间的间隔距离。通过改变这两个参数,并配合背景色彩的变化,可以方便的做出1像素的表格边框。

Border指的是边宽,即边线宽度。

9、网页设计中,怎么让DIV的边框的4个角呈圆角形

代码:
div{border-radius:5px 5px 0 0;}
设置DIV对象盒子左上角和右上角5px圆角,其它两个角为0不圆角
border-radius:3px 4px 5px 6px
代表设置对象左上角3px圆角、右上角4px圆角、右下角5px圆角、左下角6px圆角。
.box2 img{border-radius:5px}
设置DIV中的图片为圆角图片。

10、如何在网页设计中使用圆圈

第一是用图片代替,在ps中做出圆角之后再导出在页面进行制作;第二就是利用圆角样式border-radius:10px;因为这个样式有兼容性问题,所以做一些兼容备注,如下:-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;注:border-radius:10px;是样式的简写,这样写表示四个角的半径都是10px,如果写全的话就是border-radius:10px 10px 10px 10px;

与网页设计中border相关的知识