这是我自己做的设计和写的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="#edu">教育经历</a></li> 158 <li><a href="#skill">技能掌握</a></li> 159 <li><a href="#lang">语言能力</a></li> 160 <li><a href="#award">获奖状况</a></li> 161 <li><a href="#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="#" 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，简洁自制
原文：http://www.cnblogs.com/DongJianguo/p/4189444.html
