HTML+CSS D07 边框、div

最新推荐文章于 2024-03-06 13:38:19 发布

weixin_30787531

最新推荐文章于 2024-03-06 13:38:19 发布

阅读量228

点赞数

原文链接：http://www.cnblogs.com/kylyww/p/5249430.html

版权

1.边框（border）

　　常用表达

　　border-width　　px

thin	定义细的边框。
medium	默认。定义中等的边框。
thick	定义粗的边框。
length	允许您自定义边框的宽度。
inherit	规定应该从父元素继承边框宽度。

　　border-style　　dotted定义点状边框。在大多数浏览器中呈现为实线。 solid定义实线。　　double定义双线。双线的宽度等于 border-width 的值。　　groove定义 3D 凹槽边框。其效果取决于 border-color 的值。

　　border-color　　

color_name	规定颜色值为颜色名称的边框颜色（比如 red）。
hex_number	规定颜色值为十六进制值的边框颜色（比如 #ff0000）。
rgb_number	规定颜色值为 rgb 代码的边框颜色（比如 rgb(255,0,0)）。
transparent	默认值。边框颜色为透明。
inherit	规定应该从父元素继承边框颜色。

border	在一个声明中设置所有的边框属性。	1
border-bottom	在一个声明中设置所有的下边框属性。	1
border-bottom-color	设置下边框的颜色。	2
border-bottom-style	设置下边框的样式。	2
border-bottom-width	设置下边框的宽度。	1
border-color	设置四条边框的颜色。	1
border-left	在一个声明中设置所有的左边框属性。	1
border-left-color	设置左边框的颜色。	2
border-left-style	设置左边框的样式。	2
border-left-width	设置左边框的宽度。	1
border-right	在一个声明中设置所有的右边框属性。	1
border-right-color	设置右边框的颜色。	2
border-right-style	设置右边框的样式。	2
border-right-width	设置右边框的宽度。	1
border-style	设置四条边框的样式。	1
border-top	在一个声明中设置所有的上边框属性。	1
border-top-color	设置上边框的颜色。	2
border-top-style	设置上边框的样式。	2
border-top-width	设置上边框的宽度。	1
border-width	设置四条边框的宽度。	1

　　例1：

 1 <html>
 2     <head>
 3         <title>div.1</title>
 4         <style type="text/css">
 5             div{width:500px;height:300px;background-color:#eee;
 6             border-bottom-width:5px;
 7             border-bottom-style:dotted;
 8             border-bottom-color:red;
 9             
10             border-left-width:10px;
11             border-left-style:dotted;
12             border-left-color:green;
13             
14             border-top-width:20px;
15             border-top-style:dotted;
16             border-top-color:red;
17             
18             border-right-width:30px;
19             border-right-style:dotted;
20             border-right-color:blue;
21             }
22         </style>
23     </head>
24     <body>
25         <div>
26             asdfghjkl
27         </div>
28     </body>
29 
30 </html>

　　例2:

 1 <html>
 2     <head>
 3         <title>div.2</title>
 4         <style type="text/css">
 5             .class1{width:500px;height:300px;line-height:300px;
 6                     color:blue;font-size:30px;background-color:red;
 7                     border:15px solid green;
 8                     text-align:center;
 9             }
10             .class2{width:400px;height:400px;line-height:400px;
11                     background-color:#aaa;
12                     color:red;font-size:40;px;text-align:center;
13                     border:20px dotted blue;
14             }
15         </style>
16     </head>
17     <body>
18         <div class="class1">
19             asdfghjkl
20         </div>
21         <div class="class2">
22             sdnhfajkhfjksdhfu
23         </div>
24     </body>
25 
26 </html>

　　例3：

 1 <html>
 2     <head>
 3         <title>div</title>
 4         <style type="text/css">
 5             div{width:500px;height:300px;background-color:#eee;
 6             border-bottom-width:5px;
 7             border-bottom-style:solid;
 8             border-bottom-color:red;
 9             
10             border-left-width:10px;
11             border-left-style:solid;
12             border-left-color:green;
13             
14             border-top-width:20px;
15             border-top-style:solid;
16             border-top-color:red;
17             
18             border-right-width:30px;
19             border-right-style:solid;
20             border-right-color:blue;
21             }
22         </style>
23     </head>
24     <body>
25         <div>
26             asdfghjkl
27         </div>
28     </body>
29 
30 </html>

2.div

　　<div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

　　<div> 元素的另一个常见的用途是文档布局。

转载于:https://www.cnblogs.com/kylyww/p/5249430.html

weixin_30787531

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS D07 边框、div

1.边框（border）　　常用表达　　border-width　　pxthin定义细的边框。medium默认。定义中等的边框。thick定义粗的边框。length允许您自定义边框的宽度。inherit规定应该从父元素继承边框宽度。　　border-style　　dotted定义点...
复制链接

扫一扫