div外观例子

博客原文 https://longweibing.github.io/2018/01/15/div外观例子/

标题

我的标题

内容

Font Awesome gives you scalable vector icons that can instantly be customized - size, color, drop shadow, and anything that can be done with the power of CSS.

css源码

/* The designer of div */

.title_white{

color: #fafafa;

letter-spacing: 0;

font-size: 50px;

text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;

}

/* The color of word in div is white and the background color is blue(the blue is a little light) */

.content_blue {

padding: 5px;

margin: 12px;

display:inline-block;

*display:inline;

*zoom:1;

background-color: #017CC2;

color: #ffffff;

font-family: 微软雅黑;

letter-spacing: 2px;

}

/* The color of word in div is yellow and the background color is black(the yellow is a little light) */

.content_black {

padding: 5px;

margin: 12px;

display:inline-block;

*display:inline;

*zoom:1;

background-color: #1c1c1c;

color: #EEFF99;

font-family: 微软雅黑;

letter-spacing: 2px;

}

/* The color of word in div is black and the background color is gray */

.content_gray {

padding: 5px;

margin: 12px;

display:inline-block;

*display:inline;

*zoom:1;

background-color: #cccccc;

color: #000000;

font-family: 微软雅黑;

letter-spacing: 2px;

}

/* The color of word in div is black and the background color is white, but the border is gray */

.content_gray_border {

padding: 5px;

margin: 12px;

display:inline-block;

*display:inline;

*zoom:1;

border: 0.5px solid #cccccc;

background-color: #ffffff;

color: #017cc2;

font-family: 微软雅黑;

letter-spacing: 2px;

}

/* The color of word in div is black and the background color is yellow(the yellow is a little light), but it has a little shadow. */

.content_yellow_shadow{

padding: 5px;

margin: 12px;

display:inline-block;

*display:inline;

*zoom:1;

-webkit-box-shadow: #666 0px 0px 10px;

-moz-box-shadow: #666 0px 0px 10px;

box-shadow: #666 0px 0px 10px;

background: #EEFF99;

font-family: 微软雅黑;

letter-spacing: 2px;

}

导入html格式

1.在html的head标签加入
2.在div中导入

html实例代码如下



<!DOCTYPE html>

<html>

<head>

	<link rel="stylesheet" type="text/css" href="css/div_designer.css">

	<title>div desinger</title>

</head>

<body>

	<div class="title_white">我的标题</div>

	<div class="content_blue">Font Awesome gives you scalable vector icons that can instantly be customized - size, color, drop shadow, and anything that can be done with the power of CSS.</div>

	<div class="content_black">Font Awesome gives you scalable vector icons that can instantly be customized - size, color, drop shadow, and anything that can be done with the power of CSS.</div>

	<div class="content_gray">Font Awesome gives you scalable vector icons that can instantly be customized - size, color, drop shadow, and anything that can be done with the power of CSS.</div>

	<div class="content_gray_border">Font Awesome gives you scalable vector icons that can instantly be customized - size, color, drop shadow, and anything that can be done with the power of CSS.</div>

	<div class="content_yellow_shadow">Font Awesome gives you scalable vector icons that can instantly be customized - size, color, drop shadow, and anything that can be done with the power of CSS.</div>

</body>

</html>