• 当前标签:white_text

程序开发 H5学习之制作个人简历

这个页面今天还没做完,明天做完再接着加代码,(已上传完) 代码如画: <html> <head>     <meta charset="UTF-8">     <title>个人简历</title>     <style>         body{            height: 100%;            background-image: url(images/wood.png);             font-size: 12px;            font-family: Arial, 时尚中黑简体;         }         section{             width: 392px;             height: 101px;             margin: 0 auto;             border-radius: 17px;             position: relative;             box-shadow: 0 3px 4px black;         }         section:nth-child(odd){             left: -60px;         }         section:nth-child(even){             left: 60px;         }         section:nth-child(1){             background-color: #1e1a17;             transform: rotate(-3deg);             margin-top: 50px;             z-index: 1000;             background-image: url(images/diwen.png);             background-size: 70%;             background-repeat: no-repeat;             background-position: 70% 30%;         }         section:nth-child(2){             background-color: #dededc;             z-index: 900;             top: -13px;         }         section:nth-child(3){             background-color: #c4be66;             z-index: 800;             top: -26px;         }         section:nth-child(4){             background-color: #bc8ebc;             z-index: 700;             top: -39px;         }         section:nth-child(5){             background-color: #dc214c;             z-index: 600;             top: -52px;         }         section:nth-child(6){             background-color: #e3efc1;             z-index: 500;             top: -65px;         }         section:nth-child(7){             background-color: #d5c2d8;             z-index: 400;             top: -78px;         }         section:nth-child(8){             background-color: #c0c2c1;             z-index: 300;             top: -91px;             /*超出父元素的部分剪切掉*/             overflow: hidden;         }         .hole{             display: block;             width: 24px;             height: 24px;             background-image: url(images/wood.png);             border-radius: 50%;             position: absolute;             bottom: 10px;             left: 10px;         }         #jl h2{             color: #6777a8;             font-weight: normal;             font-size: 37px;             position: relative;             top: 30px;             left: 34px;             display: inline-block         }         #jl h2 small{             display:block;             font-size: 19px;         }         #jl h1{             color: white;             font-size: 67px;             display: inline-block;             font-family: 迷你简双线体;             position: relative;             left: 137px;             top: -9px;         }         h1,h2,p{             margin: 0;             text-align: right;         }         .sh2{             padding: 7px 25px;         }         p{             line-height: 130%;             position: absolute;             right: 26px;             bottom: 10px;         }         #grxx p:nth-of-type(1){             right: 195px;         }         .sh2d{             padding: 19px 25px 0 0;         }         .white_text{             color: white;         }         #zwpj p:nth-of-type(1){             top: 21px;             left: 40px;             text-align: left;             font-size: 10px;             width: 240px;         }         #zwpj p:nth-of-type(2){             top: 75px;             left: 40px;             text-align: left;             font-size: 10px;         }         #qzyx h2{             text-align: center;             position: absolute;             top: 20px;             left: 30%;             color:#fee9fe;              z-index: 320;         }         #qzyx h3{             text-align: center;             position: absolute;             top: 27px;             left: 40%;             font-size: 27px;             color: #fee9fe;             z-index: 320;         }

2017-03-17 03:56:11 83 0 0
阅读详情
  • 1
前往