前端基础之设计一个个人工作室介绍界面

先上效果图：

包含五个板块

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  }
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="应用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 /> 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、导航栏不能固定在顶部，并且滚动页面时，页面从导航栏前面划过

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）后续会更新自己做的小应用。

 

最后一句：有任何指教请留言或邮件，感激不尽！

 

posted @ 2016-08-06 18:48  白一  阅读(1731)  评论(0)  编辑  收藏  举报