div外观例子

longweibing 2018-01-15 原文

title: div外观例子
date: 2018-1-15 14:00:00
tags:

前端
div
css
categories: 前端框架
—

标题

我的标题

内容

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>