div+css实现英文证书布局代码-html代码-BFW代码库

代码语言：html

代码描述：div+css实现英文证书布局代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
  
<style>
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  src: url(//repo.bfw.wiki/bfwrepo/font/OpenSans.ttf) format('truetype');
}
@font-face {
  font-family: 'Pinyon Script';
  font-style: normal;
  font-weight: 400;
  src: url(//repo.bfw.wiki/bfwrepo/font/PinyonScript.ttf) format('truetype');
}
@font-face {
  font-family: 'Rochester';
  font-style: normal;
  font-weight: 400;
  src: url(//repo.bfw.wiki/bfwrepo/font/Rochester.ttf) format('truetype');
}
.cursive {
  font-family: 'Pinyon Script', cursive;
}
.sans {
  font-family: 'Open Sans', sans-serif;
}
.bold {
  font-weight: bold;
}
.block {
  display: block;
}
.underline {
  border-bottom: 1px solid #777;
  padding: 5px;
  margin-bottom: 15px;
}
.margin-0 {
  margin: 0;
}
.padding-0 {
  padding: 0;
}
.pm-empty-space {
  height: 40px;
  width: 100%;
}
body {
  padding: 20px 0;
  background: #ccc;
}
.pm-certificate-container {
  position: relative;
  width: 800px;
  height: 600px;
  background-color: #618597;
  padding: 30px;
  color: #333;
  font-family: 'Open Sans', sans-serif;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  /*background: -webkit-repeating-linear-gradient(
    45deg,
    #618597,
    #618597 1px,
    #b2cad6 1px,
    #b2cad6 2px
  );
  background: repeating-linear-gradient(
    90deg,
    #618597,
    #618597 1px,
    #b2cad6 1px,
    #b2cad6 2px
  );*/
}
.pm-certificate-container .outer-border {
  width: 794px;
  height: 594px;
  position: absolute;
  left: 50%;
  margin-left: -397px;
  top: 50%;
  margin-top: -297px;
  border: 2px solid #fff;
}
.pm-certificate-container .inner-border {
  width: 730px;
  height: 530px;
  position: absolute;
  left: 50%;
  margin-left: -365px;
  top: 50%;
  margin-top: -265px;
  border: 2px solid #fff;
}
.pm-certificate-container .pm-certificate-border {
  position: relative;
  width: 720px;
  height: 520px;
  padding: 0;
  border: 1px solid #E1E5F0;
  background-color: #ffffff;
  background-image: none;
  left: 50%;
  margin-left: -360px;
  top: 50%;
  margin-top: -260px;
}
.pm-certificate-container .pm-certificate-border .pm-certificate-block {
  width: 650px;
  height: 200px;
  position: relative;
  left: 50%;
  margin-left: -325px;
  top: 70px;
  margin-top: 0;
}
.pm-certificate-container .pm-certificate-border .pm-certificate-header {
  margin-bottom: 10px;
}
.pm-certificate-container .pm-certificate-border .pm-certificate-title {
  position: relative;
  top: 40px;
}
.pm-certificate-container .pm-certificate-border .pm-certificate-title h2 {
  font-size: 34px !important;
}
.pm-certificate-container .pm-certificate-border .pm-certificate-body {
  padding: 20px;
}
.pm-certificate-container .pm-certificate-border .pm-certificate-body .pm-name-text {
  font-size: 20px;
}
.pm-certificate-container .pm-certificate-border .pm-earned {
  margin: 15px 0 20px;
}
.pm-certificate-container .pm-certificate-border .pm-earned .pm-earned-text {
  font-size: 20px;
}
.pm-certificate-container .pm-certificate-border .pm-earned .pm-credits-text {
  font-size: 15px;
}
.pm-certificate-container .pm-certificate-border .pm-course-title .pm-earned-text {
  font-size: 20px;
}
.pm-certificate-container .pm-certificate-border .pm-course-title .pm-credits-text {
  font-size: 15px;
}
.pm-certificate-container .pm-certificate-border .pm-certified {
  font-size: 12px;
}
.pm-certificate-container .pm-certificate-border .pm-certified .underline {
  margin-bottom: 5px;
}
.pm-certificate-container .pm-certificate-border .pm-certificate-footer {
  width: 650px;
  height: 100px;
  position: relative;
  left: 50%;
  margin-left: -325px;
  bottom: -105px;
}
</style>


  
</head>

  <body>
  <div class="container pm-certificate-container">
    <div class="outer-border"></div>
    <div class="inner-border"></div>
    
    <div class="pm-certificate-border col-.........完整代码请登录后点击上方下载按钮下载查看