先上效果圖：

包含五個板塊

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;//以上兩句共同解決導(dǎo)航欄不隨滾動條滾動,并且滑動的div從導(dǎo)航欄后面滑上去 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：放應(yīng)用板塊 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);//標(biāo)記 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{ //聯(lián)系界面 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);//標(biāo)記 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 } View Code

?

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&amp;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 &amp; 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="應(yīng)用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="應(yīng)用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="應(yīng)用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="應(yīng)用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="應(yīng)用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="應(yīng)用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 /> 1090023975@qq.com</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&amp;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 &copy; Infinito Web Design Studio 2015. All Rights Reserved</p> 157 </div> 158 </footer> 159 </body> 160 </html> View Code

?

?

---------------------------------------------------------我是分割線---------------------------------------------

途中遇到的問題：

1、按鈕效果過于生硬

2、導(dǎo)航欄不能固定在頂部，并且滾動頁面時，頁面從導(dǎo)航欄前面劃過

3、footer、導(dǎo)航欄和背景圖片都與瀏覽器之間有空隙

4、引用font Awesome icon

?

解決問題：

1、按鈕按下去過于生硬是由于忽略了一個屬性 ?"transition" ，沒錯，仔細學(xué)習(xí)發(fā)現(xiàn)這個屬性讓一切都變得那么溫和，哈哈

?

2、導(dǎo)航欄問題：

　　　　　　position:fixed;

　　　　　　z-index:1000;

　　　　　　top:0;

　　　　　　left:0;

? 解決了空隙問題，以及滾動頁面時頁面從導(dǎo)航欄后面滑進去

?

3、間隙問題：

　　背景圖片：放在一個div里面，看代碼可以知道我設(shè)置成了position:fixed; ?left:0;解決了間隙問題，原本打算把圖片放在body里面，但是這樣做圖片會跟著滾動條一起滾動。

　　footer：起初把width:100%都不管用，就是有空隙，然而又不能設(shè)置成fixed吧！就這樣：

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　html,body{
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　padding:0;
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　margin: 0; //解決了底部footer跟瀏覽器的間隙問題
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　}

?

4、引用了font awesome icon 神奇的圖庫，省了不少事。下載完畢后，在自己的項目中加入link，注意里面的href是相對路徑！！！！！就是把解壓后的文件里的這貨放進去：

font-awesome.min.css。然后就可以開心地使用圖標(biāo)了~~~

?

?

?

補充說明：

由于還是新手，并沒有做應(yīng)用，所以在界面的應(yīng)用板塊的六個框框里面木有放應(yīng)用（苦逼臉.png）后續(xù)會更新自己做的小應(yīng)用。

?

最后一句：有任何指教請留言或郵件，感激不盡！

?

轉(zhuǎn)載于:https://www.cnblogs.com/Lynn0814/p/5744671.html

總結(jié)

以上是生活随笔為你收集整理的前端基础之设计一个个人工作室介绍界面的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。