導航:首頁 > 萬維百科 > 網頁設計中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相關的知識