先上效果图：
包含五个板块
home、about、portfolio、contact和footer
底部的图片不动，就像板块浮在上面。
css文件：(取名为studio.css)
1 html,body{
2 padding:0;
3 margin: 0; //解决了底部footer跟浏览器的间隙问题
4 }
5 *{
6 box-sizing: border-box;
7 }
8 *:hover{
9 box-sizing: border-box;
10 }
11 body{
12 overflow-x:hidden;
13 }
14 a{
15 text-decoration: none;
16 color:#272822;
17 }
18 a:hover{
19 color: #fff;
20 }
21 ul{
22 list-style-type: none;
23 margin-left: 780px;
24 }
25 li{
26 display: inline;
27 margin-left: 30px;
28 }
29 h1{
30 font-size: 60px;
31 color: #B8B7B6;
32 line-height: 1.1;
33 }
34 h2{
35 font-size: 40px;
36 }
37 h3{
38 font-size: 30px;
39 }
40 .text-center{
41 text-align: center;
42 }
43 .font-style{
44 font-family: Georgia;
45 margin-top: 120px;
46 }
47 .header-nav{
48 position:fixed;
49 z-index:1000;//以上两句共同解决导航栏不随滚动条滚动,并且滑动的div从导航栏后面滑上去
50 float: left;
51 top: 0;
52 left: 0;
53 background-color:#8A8A88;
54 width: 100%;
55 }
56 .nav-brand{
57 margin-left: 30px;
58 float: left;
59
60 }
61 .nav-li-style{
62 font-size: 19px;
63 font-family: Georgia;
64 text-align: center;
65 color: #000;
66 }
67 .bg-img{
68 position:fixed;
69 float: left;
70 background:url("http://7xtsii.com1.z0.glb.clouddn.com/2.jpg");
71 width:100%;
72 height: 90%;
73 margin-top: 50px;
74 left: 0;
75 top: 0;
76 }
77 #container{ //把五个板块放到一个div里面
78 width: 1400px;
79 height: 3500px;
80 position: relative;
81 float: left;
82 }
83 .container-block{ //五个div
84 width: 80%;
85 height: 800px;
86 margin-left: 110px;
87 margin-right: 80px;
88 }
89 .home-style{ //bome板块
90 margin-top: 60px;
91 padding-top: 68px;
92 }
93 .home-intro-divider{
94 border-top: 1px solid #f8f8f8;
95 border-bottom: 1px solid rgba(0, 0, 0, 0.2);
96 }
97 .about-style{//about板块
98 position: relative;
99
100 }
101 .about-introduce{
102 position: absolute;
103 width: 400px;
104 height: 200px;
105 margin-left: 30px;
106 font-family: Georgia;
107
108 }
109 .about-introduce-seay{
110 font-size: 25px;
111 }
112 .about-people-img{
113 position: absolute;
114 top: 200px;
115 right: 90px;
116 width: 400px;
117 height: 300px;
118
119 }
120 .about-smaller-img{
121 width: 280px;
122 height: 280px;
123 border-radius: 50%;
124 }
125 .portfolio-title{ //portfolio：放应用板块
126 position: relative;
127 width: 1000px;
128 height:200px;
129 }
130 .portfolio-block{ //六个框框
131 position: relative;
132 float: left;
133 width: 310px;
134 height: 280px;
135 background-color: #DADFE1;
136 margin:20px 20px 20px 40px;
137 transition: all 0.6s;
138 outline: #A19FAC inset 10px;
139 text-align: center;
140 }
141 .portfolio-block:hover{
142 box-shadow:30px 30px 30px rgba(0, 0, 0, 0.9);//标记
143 }
144 .portfolio-hover{
145 position: absolute;
146 width: 300px;
147 height: 180px;
148 transition: all 0.6s;
149
150 }
151 .portfolio-hover:hover{
152 background:rgba(0, 0, 0, 0.7)none repeat scroll 0 0;
153 transition: all 0.6s;//缓慢延伸
154 }
155 .portfolio-hover-incon{
156 position: absolute;
157 width: 300px;
158 height: 30px;
159 text-align: center;
160 margin-top: 40px;
161
162 }
163 .portfolio-small-img{
164 width: 280px;
165 height: 150px;
166 margin-left: 10px;
167 }
168 .portfolio-apply-title{
169 background-color:#1C1D1F;
170 position: absolute;
171 width: 300px;
172 height: 90px;
173 margin-top: 30px;
174 text-align: center;
175 color: white;
176 }
177 .portfolio-apply-title.h4{
178 font-size: 25px;
179 }
180 .contact-style{ //联系界面
181 padding-top: 50px;
182 }
183 .contact-tip{
184 position: relative;
185 float: left;
186 width: 600px;
187 margin-top: 130px;
188
189 }
190 .contact-ways{
191 position: relative;
192 float: right;
193 top:40px;
194 width: 350px;
195 height: 600px;
196 }
197 .ul-position{
198 position: relative;
199 float: right;
200 margin-right: 100px;
201 margin-top: 130px;
202 }
203 .home-btn-style{
204 margin-left: 180px;
205 }
206 .btn-style{
207 background-color: #C0C0C0;
208 border:2px outset #000;
209 font-size: 20px;
210 border-radius: 4px;
211 box-shadow:3px 3px 3px rgba(0, 0, 0, 0.5);//标记
212 display:inline-block;
213 padding:10px 16px;
214 margin: 6px;
215 transition: all 0.21s;
216 letter-spacing: 2px;
217 }
218
219 .btn-style:hover{
220 background:rgba(0, 0, 0, 0.9) none repeat scroll 0 0;
221 border:2px outset rgba(0, 0, 0, 0.9);
222 letter-spacing: 2px;
223 transform: scale(1.11);//放大
224 transition: all 0.21s;//缓慢延伸
225 }
226 .portfolio-font{
227 font-family: Georgia;
228 font-size: 50px;
229 }
230 .contact-font{
231 font-family: Cursive;
232 }
233 .home-btn{
234 float: left;
235 }
236 .contact-btn{
237 margin-left: 0;
238 float: right;
239 }
240 .btn-position{
241 position: relative;
242 margin-top: 20px;
243 margin-left: 30px;
244 }
245 .bottom-nav{ //footer板块
246 width: 1349px;
247 height: 220px;
248 padding: 0;
249 margin: 0;
250 }
251 .bottom-nav-ul{
252 background-color: #C6C6C6;
253 position: relative;
254 float: left;
255 width: 100%;
256 height: 120px;
257 margin-top: 20px;
258 padding-top: 20px;
259
260 }
261 .bottom-nav-li{
262 width: 100%;
263 color: #6E7AB7;
264 }
265 .bottom-tip{
266 position: absolute;
267 margin-top: 60px;
268 margin-left: 90px;
269 color: #7B7777;
270 }
html文件：
1 <html> 2 <head> 3 <meta name="generator" 4 content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" /> 5 <meta charset="UTF-8" /> 6 <link href="font-awesome-4.5.0/font-awesome-4.5.0/css/font-awesome.min.css" rel="stylesheet" > 7 <link href="font-awesome-4.5.0/font-awesome-4.5.0/css/font-awesome-ie7.min.css" rel="stylesheet" > 8 <link href="studio.css" rel="stylesheet"> 9 <title></title> 10 <style type="text/css"> 11 12 </style> 13 </head> 14 <body> 15 <div class="header-nav"> 16 <nav> 17 <a href="http://virtual-dawn.com/index_english.html" class="nav-brand nav-li-style"> Thiago Ferreira</a> 18 <ul> 19 <li><a href="#home" class="nav-li-style">Home</a></li> 20 <li><a href="#about" class="nav-li-style">About</a></li> 21 <li><a href="#portfolio" class="nav-li-style">Portfolio</a></li> 22 <li><a href="#contact" class="nav-li-style">Contact</a></li> 23 </ul> 24 </nav> 25 </div> 26 <div class="bg-img"> 27 </div> 28 <a name="home"></a> 29 <div id="container"> 30 <div class="home-style container-block"> 31 <h1 class="text-center font-style">Infinito Web Design Studio</h1> 32 <h3 class="text-center">Where Awesomeness Is Brought To Life.</h3> 33 <hr class="home-intro-divider" /> 34 <div class="home-btn-style"> 35 <a href="https://twitter.com/Ferreir4Thiago" target="blank" class="btn-position home-btn btn-style "><i class="fa fa-twitter fa-fw"></i><span class="network-name"><strong>Twitter</strong></span></a> 36 <a href="https://github.com/Lynn081" target="blank" class="btn-position home-btn btn-style"><i class="fa fa-github fa-fw"></i><span class="network-name"><strong>Github</strong></span></a> 37 <a href="https://www.linkedin.com/profile/guided?dl=no&trk=uno-choose-ge-no-intent" target="blank" class="btn-position home-btn btn-style "><i class="fa fa-linkedin fa-fw"></i><span class="network-name "><strong>Linkedin</strong></span></a> 38 <a href="https://www.freecodecamp.cn/lynn081" target="blank" class="btn-position home-btn freecode-btn btn-style"><i class="fa fa-fire fa-fw"></i><span class="network-name"><strong>freeCodeCamp</strong></span></a> 39 </div> 40 </div> 41 <a name="about"></a> 42 <div class="about-style container-block"> 43 <div class="about-introduce"> 44 <h2>Infinito Web Design Studio</h2> 45 <p class="about-introduce-seay">My name is Lynn！I‘m a self taught web designer, developer, co-founder and entrepreneur based in Finland. I‘m currently part of a small web development team in an upcoming start-up, building web and mobile applications. My passion is to use technology based solutions, to help solve real world challenges. Competences: Languages and Frameworks: Javascript, HTML5, CSS3, jQuery, Bootstrap3, Angular.js, Meteor.js. Tools & expertise: Git, Responsive Web Design, Agile Methodologies.</p> 46 </div> 47 <div class="about-people-img"> 48 <img class="about-smaller-img" src="me.jpg" /> 49 </div> 50 </div> 51 <a name="portfolio"></a> 52 <div class="portfolio-style container-block"> 53 <div class="portfolio-title"> 54 <h2 class="text-center portfolio-font">Awesomeness Portfolio</h2> 55 <h3 class="text-center">Below you‘ll find some of my recent work.</h3> 56 </div> 57 <div class="portfolio-block"> 58 <a href="应用1"> 59 <div class="portfolio-hover"> 60 <div class="portfolio-hover-incon"> 61 <i class="fa fa-fire fa-3x"></i> 62 </div> 63 </div> <img class="portfolio-small-img" src="a.jpg" /> </a> 64 <div class="portfolio-apply-title"> 65 <h4>My 1st apply</h4> 66 <p>css and JavaScript</p> 67 </div> 68 </div> 69 <div class="portfolio-block"> 70 <a href="应用2"> 71 <div class="portfolio-hover"> 72 <div class="portfolio-hover-incon"> 73 <i class="fa fa-fire fa-3x"></i> 74 </div> 75 </div> <img class="portfolio-small-img" src="b.jpg" /> </a> 76 <div class="portfolio-apply-title"> 77 <h4>My 1st apply</h4> 78 <p>css and JavaScript</p> 79 </div> 80 </div> 81 <div class="portfolio-block"> 82 <a href="应用3"> 83 <div class="portfolio-hover"> 84 <div class="portfolio-hover-incon"> 85 <i class="fa fa-fire fa-3x"></i> 86 </div> 87 </div> <img class="portfolio-small-img" src="c.jpg" /> </a> 88 <div class="portfolio-apply-title"> 89 <h4>My 1st apply</h4> 90 <p>css and JavaScript</p> 91 </div> 92 </div> 93 <div class="portfolio-block"> 94 <a href="应用4"> 95 <div class="portfolio-hover"> 96 <div class="portfolio-hover-incon"> 97 <i class="fa fa-fire fa-3x"></i> 98 </div> 99 </div> <img class="portfolio-small-img" src="d.jpg" /> </a> 100 <div class="portfolio-apply-title"> 101 <h4>My 1st apply</h4> 102 <p>css and JavaScript</p> 103 </div> 104 </div> 105 <div class="portfolio-block"> 106 <a href="应用5"> 107 <div class="portfolio-hover"> 108 <div class="portfolio-hover-incon"> 109 <i class="fa fa-fire fa-3x"></i> 110 </div> 111 </div> <img class="portfolio-small-img" src="e.jpg" /> </a> 112 <div class="portfolio-apply-title"> 113 <h4>My 1st apply</h4> 114 <p>css and JavaScript</p> 115 </div> 116 </div> 117 <div class="portfolio-block"> 118 <a href="应用6"> 119 <div class="portfolio-hover"> 120 <div class="portfolio-hover-incon"> 121 <i class="fa fa-fire fa-3x"></i> 122 </div> 123 </div> <img class="portfolio-small-img" src="f.jpg" /> </a> 124 <div class="portfolio-apply-title"> 125 <h4>My 1st apply</h4> 126 <p>css and JavaScript</p> 127 </div> 128 </div> 129 </div> 130 <a name="contact"></a> 131 <div class="contact-style container-block"> 132 <div class="contact-tip"> 133 <h3 class="contact-font">Connect with Infinito Web Design Studio:<br /> [email protected]</h3> 134 </div> 135 <div class="contact-ways"> 136 <ul class="ul-position"> 137 <li><a href="https://twitter.com/Ferreir4Thiago" target="blank" class="btn-position home-btn btn-style "><i class="fa fa-twitter fa-fw"></i><span class="network-name"><strong>Twitter</strong></span></a></li> 138 <li><a href="https://github.com/Lynn081" target="blank" class="btn-position home-btn btn-style"><i class="fa fa-github fa-fw"></i><span class="network-name"><strong>Github</strong></span></a></li> 139 <li><a href="https://www.linkedin.com/profile/guided?dl=no&trk=uno-choose-ge-no-intent" target="blank" class="btn-position home-btn btn-style "><i class="fa fa-linkedin fa-fw"></i><span class="network-name "><strong>Linkedin</strong></span></a></li> 140 <li><a href="https://www.freecodecamp.cn/lynn081" target="blank" class="btn-position home-btn freecode-btn btn-style"><i class="fa fa-fire fa-fw"></i><span class="network-name"><strong>freeCodeCamp</strong></span></a></li> 141 </ul> 142 </div> 143 </div> 144 </div> 145 <footer class="bottom-nav"> 146 <div class="bottom-nav-ul"> 147 <ul class="nav-brand"> 148 <li><a href="#home"><span class="bottom-nav-li"><strong>Home</strong></span></a></li> 149 <li><a>.</a></li> 150 <li><a href="#about"><span class="bottom-nav-li"><strong>About</strong></span></a></li> 151 <li><a>.</a></li> 152 <li><a href="#portfolio"><span class="bottom-nav-li"><strong>Portfolio</strong></span></a></li> 153 <li><a>.</a></li> 154 <li><a href="#contact"><span class="bottom-nav-li"><strong>Contact</strong></span></a></li> 155 </ul> 156 <p class="bottom-tip">Copyright © Infinito Web Design Studio 2015. All Rights Reserved</p> 157 </div> 158 </footer> 159 </body> 160 </html>
---------------------------------------------------------我是分割线---------------------------------------------
途中遇到的问题：
1、按钮效果过于生硬
2、导航栏不能固定在顶部，并且滚动页面时，页面从导航栏前面划过
3、footer、导航栏和背景图片都与浏览器之间有空隙
4、引用font Awesome icon
解决问题：
1、按钮按下去过于生硬是由于忽略了一个属性 "transition" ，没错，仔细学习发现这个属性让一切都变得那么温和，哈哈
2、导航栏问题：
position:fixed;
z-index:1000;
top:0;
left:0;
解决了空隙问题，以及滚动页面时页面从导航栏后面滑进去
3、间隙问题：
背景图片：放在一个div里面，看代码可以知道我设置成了position:fixed; left:0;解决了间隙问题，原本打算把图片放在body里面，但是这样做图片会跟着滚动条一起滚动。
footer：起初把width:100%都不管用，就是有空隙，然而又不能设置成fixed吧！就这样：
html,body{
padding:0;
margin: 0; //解决了底部footer跟浏览器的间隙问题
}
4、引用了font awesome icon 神奇的图库，省了不少事。下载完毕后，在自己的项目中加入link，注意里面的href是相对路径！！！！！就是把解压后的文件里的这货放进去：
font-awesome.min.css。然后就可以开心地使用图标了~~~
补充说明：
由于还是新手，并没有做应用，所以在界面的应用板块的六个框框里面木有放应用（苦逼脸.png）后续会更新自己做的小应用。
最后一句：有任何指教请留言或邮件，感激不尽！
时间： 2024-10-12 04:50:04