这是我自己做的设计和写的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>
时间： 2024-10-18 06:09:40