首页 > 代码库 > html版简历，无引用模板，无引用插件，无javascript，简洁自制
html版简历，无引用模板，无引用插件，无javascript，简洁自制
这是我自己做的设计和写的html模板，ie高版本的效果还是可以的，拿出来跟大家分享，希望大家可以给些建议。
1 <!DOCTYPE html> 2 <html lang=zh-CN> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Dong Jianguo的简历</title> 6 <style> 7 body{ 8 font-family:arial,sans-serif; 9 } 10 div.header{ 11 position:fixed; 12 top:0; 13 width:100%; 14 min-width:415px; 15 background:#3498DB; 16 color:white; 17 z-index:10; 18 } 19 div.header h1{ 20 margin-left:15%; 21 color:#2C3E50; 22 } 23 div.myinfo{ 24 float:left; 25 margin-left:40px; 26 } 27 div.myinfo p{ 28 margin:0; 29 } 30 div.nav{ 31 float:right; 32 margin-right:40px; 33 } 34 div.nav li{ 35 display:inline-block; 36 list-style:none; 37 position:relative; 38 background:white; 39 } 40 div.nav li:before{ 41 content:‘‘; 42 width:16px; 43 height:6px; 44 background:white; 45 position:absolute; 46 top:-8px; 47 left:0; 48 } 49 div.nav li:after{ 50 content:‘‘; 51 width:0; 52 height:0; 53 border-left:8px solid transparent; 54 border-right:8px solid transparent; 55 border-top:16px solid white; 56 position:absolute; 57 top:78px; 58 left:0; 59 } 60 div.nav a{ 61 display:inline-block; 62 text-decoration:none; 63 color:#3498DB; 64 width:1em; 65 } 66 div.nav li:hover{ 67 background:#3498DB; 68 } 69 div.nav li:hover a{ 70 color:white; 71 } 72 div.section{ 73 height:400px; 74 padding-top:200px; 75 position:relative; 76 color:#2C3E50; 77 } 78 div.section h2{ 79 margin-left:15%; 80 background:#3498DB; 81 padding-left:20px; 82 } 83 div#contact{ 84 position:fixed; 85 bottom:60px; 86 left:30px; 87 } 88 div#contact a{ 89 display:block; 90 text-decoration:none; 91 font-size:20px; 92 padding:10px 30px; 93 color:white; 94 background:#3498DB; 95 position:relative; 96 } 97 div#contact a:hover div.pop{ 98 display:block; 99 }100 div.pop{101 position:absolute;102 bottom:46px;103 left:-30px;104 padding:10px 40px;105 color:white;106 background:rgba(0,0,0,.7);107 display:none;108 z-index:20;109 }110 div.footer{111 text-align:center;112 color:#95A5A6;113 }114 div.heart{115 width:40px;116 height:40px;117 background:#E74C3C;118 -webkit-transform:rotate(-45deg); 119 -moz-transform:rotate(-45deg); 120 -ms-transform:rotate(-45deg); 121 -o-transform:rotate(-45deg); 122 transform:rotate(-45deg);123 position:relative;124 margin:0 auto;125 }126 div.heart:before,div.heart:after{127 position:absolute;128 content:‘‘;129 width:40px; 130 height:40px; 131 background:#E74C3C; 132 -moz-border-radius:20px; 133 border-radius:20px; 134 }135 div.heart:before{136 top:-20px;137 left:0;138 }139 div.heart:after{140 top:0;141 left:20px;142 }143 </style>144 </head>145 <body>146 <div class="header">147 <h1>董健国的简历</h1>148 <div class="myinfo">149 <p>姓名：董健国</p>150 <p>就读学校：深圳大学</p>151 <p>学院：信息工程</p>152 <p>专业：通信工程</p>153 <p>邮箱：706388859@qq.com</p>154 </div>155 <div class="nav">156 <ul>157 <li><a href=http://www.mamicode.com/"#edu">教育经历</a></li>158 <li><a href=http://www.mamicode.com/"#skill">技能掌握</a></li>159 <li><a href=http://www.mamicode.com/"#lang">语言能力</a></li>160 <li><a href=http://www.mamicode.com/"#award">获奖状况</a></li>161 <li><a href=http://www.mamicode.com/"#word">自我评价</a></li>162 </ul>163 </div>164 </div>165 <div class="artcile">166 <div class="section" id="edu">167 <h2>教育经历</h2>168 </div>169 <div class="section" id="skill">170 <h2>技能掌握</h2>171 </div>172 <div class="section" id="lang">173 <h2>语言能力</h2>174 </div>175 <div class="section" id="award">176 <h2>获奖状况</h2>177 </div>178 <div class="section" id="word">179 <h2>自我评价</h2>180 </div>181 </div>182 <div class="footer">183 <div class="heart"></div>184 <p>这是一个没有引入框架以及没有用到javascript的简历，谢谢观看</p>185 186 </div>187 <div id="contact">188 <a href=http://www.mamicode.com/"#" id="contact">联系方式189 <div class="pop">190 <p>QQ:706388859</p>191 <p>微博:塞那可谛</p>192 <p>博客园:sainaac</p>193 </div>194 </a> 195 </div>196 </body>197 </html>
html版简历，无引用模板，无引用插件，无javascript，简洁自制
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。