1. 首頁
  2. 問答
  3. 我的追隨元素風格不會改變超過某個點（CSS3）

我的追隨元素風格不會改變超過某個點（CSS3）

2016-09-19 46 views
0

所以我創建了一個個人投資組合網站，超出了實際的投資組合網格，我根本無法正確設計其他任何東西。這是非常有限的，我只是設法能夠得到超越它的任何東西！我的追隨元素風格不會改變超過某個點（CSS3）

我試了幾天（我還在學習）來解決這個問題，並且進展非常緩慢。

我已經屈服了，決定一個更聰明的男人或女人可能會很快知道我做錯了什麼。

這裏是直播的網站下面的代碼：

http://www.hghazni.com/v2/index.html

這裏是CSS/HTML：

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body, html { 
 
    margin: 0; 
 
    font: 1em "Open Sans", Sans-serif; 
 
} 
 

 
.nav-main { 
 
    position: fixed; 
 
    z-index: 9999; 
 
    width: 100%; 
 
    background-color: #222; 
 
    height: 5em; 
 
    color: #fff; 
 
} 
 

 
.nav-main .logo { 
 
    float: left; 
 
    font-weight: bolder; 
 
    height: 40px; 
 
    padding: 15px 30px; 
 
    font-size: 3.0em; 
 
    line-height:35px 
 
} 
 

 
.under-logo { 
 
    font-size: 1em; 
 
    color: #fff; 
 
    float: left; 
 
    margin-top: 45px; 
 
    margin-left: 55px; 
 
    line-height:40px; 
 
    position: absolute; 
 
} 
 

 
.nav-main > ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    float: right; 
 
    font-size: 3em; 
 
    font-weight: bold; 
 
    list-style-type: none; 
 
    padding-right: 30px; 
 
} 
 

 
.nav-main > ul > li { 
 
    float: left; 
 
} 
 

 
.nav-item { 
 
    display: inline-block; 
 
    padding: 15px 20px; 
 
    height: 40px; 
 
    line-height: 40px; 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 

 
.nav-item:hover { 
 
    background-color: #444; 
 
} 
 

 
.title { 
 
    height: 50em; 
 
    position: relative; 
 
    text-align: center; 
 
    color: #fff; 
 
    font-family: Open sans, Tahoma, Arial; 
 
    background: url(http://hghazni.com/v2/img/flat_mountain_bg.jpg) no-repeat center center fixed; 
 
    /*background-color: #ee712b;*/ 
 
    background-size: cover; 
 
-webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    overflow: visible; 
 
    /*position: absolute; 
 
    top: 20%; 
 
    left: 30%; 
 
    right: 30%*/ 
 

 
} 
 

 
.title img { 
 
    margin: 0; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-right: -50%; 
 
    transform: translate(-50%, -50%); 
 
    /*margin: auto;*/ 
 
    /*width: 100%;*/ 
 
} 
 
.title h1 { 
 
    position: absolute; 
 
    top:70%; 
 
    left: 50%; 
 
    margin-right: -50%; 
 
    transform: translate(-50%, -50%); 
 
    background-color:#000; 
 
    font-size: 4em; 
 
    /*position: static; 
 
    text-align: center; 
 
    margin: auto; 
 
    width: 70%;*/ 
 
} 
 

 
.title h2 { 
 
    /*background-color:#000; 
 
    position: static; 
 
    text-align: center; 
 
    margin: auto; 
 
    width: 80%;*/ 
 
    position: absolute; 
 
    top:82.5%; 
 
    left: 50%; 
 
    margin-right: -50%; 
 
    transform: translate(-50%, -50%); 
 
    background-color:#000; 
 
    font-size: 2.5em; 
 
} 
 

 
.content { 
 
    padding: 20px; 
 
    top: 100%; 
 
    left: 0; 
 
    background-color: #fff; 
 
    align-items: center; 
 
    padding-bottom: 40px; 
 
} 
 

 
.content h1 { 
 
    text-align: center; 
 
    font-size: 8em; 
 
    margin: auto; 
 
    margin-top: 50px; 
 
} 
 
.content h3 { 
 
    padding: 10px; 
 
    font-size: 2.2em; 
 
    font-weight: normal; 
 
    width:80%; 
 
    margin: auto; 
 
} 
 

 
.work-header { 
 
    padding-top: 40px; 
 
    padding-bottom: 40px; 
 
    width: 100%; 
 
    height: 100%; 
 
    left: 0; 
 
    text-align: center; 
 
    background-color: #343436; 
 
} 
 

 
/*Portfolio Header*/ 
 

 
.work-header h1 { 
 
    font-size: 4.2em; 
 
    color: #fff; 
 
} 
 

 
#brain { 
 
    color: #e4c027; 
 
} 
 
#heart { 
 
    color: #f90446 
 
} 
 
#soul { 
 
    color: #6442e9 
 
} 
 

 
/*Portfolio Grid Section baby*/ 
 

 
.work { 
 
    background-color: #fff; 
 
    position: relative; 
 
    padding-top: 40px; 
 
    padding-bottom: 40px; 
 
    padding-left: 8%; 
 
    margin: 0; 
 
    width: 92%; 
 
    height: 100%; 
 
    text-align: center; 
 
} 
 

 
.work h1 { 
 
    padding-bottom: 2em; 
 
    padding-right: 6em; 
 
} 
 

 
.box { 
 
    float:left; 
 
    position: relative; 
 
    width: 28%; 
 
    padding-left: 1%; 
 
    padding-bottom: 1%; 
 
    background-color: #fff; 
 
} 
 
.boxInner { 
 
    position: relative; 
 
    left: 20px; 
 
    right: 10px; 
 
    top: 10px; 
 
    bottom: 10px; 
 
    overflow: hidden; 
 
} 
 
.boxInner img { 
 
    width: 100%; 
 
    overflow: auto; 
 
} 
 
.boxInner .titleBox { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin-bottom: -50px; 
 
    background: #000; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    color: #FFF; 
 
    padding: 10px; 
 
    text-align: center; 
 
    -webkit-transition: all 0.3s ease-out; 
 
    -moz-transition: all 0.3s ease-out; 
 
    -o-transition: all 0.3s ease-out; 
 
    transition: all 0.3s ease-out; 
 
} 
 
body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox { 
 
    margin-bottom: 1em; 
 
    height: 3em; 
 
    padding-top: 1em; 
 
    font-size: 2em; 
 
    font-weight: bold; 
 
} 
 

 
/*contact page*/ 
 

 
.work parent { 
 
    position: relative; 
 
    padding-top: 50px; 
 

 
} 
 
.work parent contact { 
 
    overflow: hidden; 
 
} 
 

 
.work parent contact h1 { 
 
position: absolute; 
 
margin: auto; 
 
} 
 

 
.work parent contact h4 { 
 
    color: #000; 
 
    position: absolute; 
 
    margin: auto; 
 
    font-size: 50px; 
 
} 
 

 
/*contact form*/ 
 

 
@media only screen and (max-width : 480px) { 
 
    /* Smartphone view: 1 tile */ 
 
    .box { 
 
     width: 100%; 
 
     padding-bottom: 100%; 
 
    } 
 
} 
 
@media only screen and (max-width : 650px) and (min-width : 481px) { 
 
    /* Tablet view: 2 tiles */ 
 
    .box { 
 
     width: 50%; 
 
     padding-bottom: 50%; 
 
    } 
 
} 
 
@media only screen and (max-width : 1050px) and (min-width : 651px) { 
 
    /* Small desktop/ipad view: 3 tiles */ 
 
    .box { 
 
     width: 33.3%; 
 
     padding-bottom: 33.3%; 
 
    } 
 
} 
 
@media only screen and (max-width : 1290px) and (min-width : 1051px) { 
 
    /* Medium desktop: 4 tiles */ 
 
    .box { 
 
     width: 25%; 
 
     padding-bottom: 25%; 
 
    } 
 

 
<!--[if lt IE 9]> 
 
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
 
<![endif]-->
<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
     <title>Haroon Ghazni</title> 
 
     <meta charset="utf-8"> 
 
     <link rel="stylesheet" href="stylesheet.css"> 
 
     <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans"> 
 
    </head> 
 

 
    <body class="no-touch"> 
 
    <nav class="nav-main"> 
 
     <div class="logo">HGHAZNI</div> 
 
     <div class="under-logo">WEB/UI/UX/GRAPHIC</div> 
 
     <ul> 
 
     <li> 
 
      <a href="#about" class="nav-item">About</a> 
 
     </li> 
 
     <li> 
 
      <a href="#work" class="nav-item">Work</a> 
 
     </li> 
 
     <li> 
 
      <a href="#contact" class="nav-item">Contact</a> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 
    <div class="title" > 
 
     <img src="img/hg_avatar.png" alt="Haroon Ghazni" /> 
 
     <h1>I’m Haroon Ghazni.</h1> 
 
     <h2>A Web Designer from the little big city of Nottingham.</h2> 
 
    </div> 
 
    <div class="content" id="about"> 
 
     <h1>Who?</h1> 
 
     <h3>I am a dynamic and creative web designer with experience of working on international brands in a fast paced collaborative environment.</h3> 
 
     <h3>As a hands on individual who isn’t afraid of a pen and paper I work through the full UX lifecycle from research to design and testing utilising all elements of a user centred design process to create innovative cross platform experiences.</h3> 
 
     <h3>I enjoy learning new skills as well as playing an active part in the design community.</h3> 
 
    </div> 
 
    <div class="work-header" id="work"> 
 
     <h1>My Work – <span id="brain">Brain</span>,<span id="heart"> Heart</span> and <span id="soul">Soul.</span></h1> 
 
    </div> 
 
    <div class="work"> 
 
     <!-- <h1> me wurk </h1> --> 
 

 
     <div class="box"> 
 
     <div class="boxInner"> 
 
      <img src="http://hghazni.com/v2/img/port1.jpg" /> 
 
      <div class="titleBox">Butterfly</div> 
 
     </div> 
 
     </div> 
 
     <div class="box"> 
 
     <div class="boxInner"> 
 
      <img src="http://hghazni.com/v2/img/port2.jpg" /> 
 
      <div class="titleBox">La Pura Vida</div> 
 
     </div> 
 
     </div> 
 
     <div class="box"> 
 
     <div class="boxInner"> 
 
      <img src="http://hghazni.com/v2/img/port3.jpg" /> 
 
      <div class="titleBox">Bohemian Purple</div> 
 
     </div> 
 
     </div> 
 
     <div class="box"> 
 
     <div class="boxInner"> 
 
      <img src="http://hghazni.com/v2/img/port4.jpg" /> 
 
      <div class="titleBox">Lost in Innocence</div> 
 
     </div> 
 
     </div> 
 
     <div class="box"> 
 
     <div class="boxInner"> 
 
      <img src="http://hghazni.com/v2/img/port5.jpg" /> 
 
      <div class="titleBox">Cerebral Experience</div> 
 
     </div> 
 
     </div> 
 
     <div class="box"> 
 
     <div class="boxInner"> 
 
      <img src="http://hghazni.com/v2/img/port6.jpg" /> 
 
      <div class="titleBox">Mario Escort</div> 
 
     </div> 
 
     </div> 
 
     <div class="box"> 
 
     <div class="boxInner"> 
 
      <img src="http://hghazni.com/v2/img/port7.jpg" /> 
 
      <div class="titleBox">Restaurant iOS App</div> 
 
     </div> 
 
     </div> 
 
     <div class="box"> 
 
     <div class="boxInner"> 
 
      <img src="http://hghazni.com/v2/img/port8.jpg" /> 
 
      <div class="titleBox">Nottingham Sober Yaught Dragons</div> 
 
     </div> 
 
     </div> 
 
     <div class="box"> 
 
     <div class="boxInner"> 
 
      <img src="http://hghazni.com/v2/img/port9.jpg" /> 
 
      <div class="titleBox">Poet Farmer</div> 
 
     </div> 
 
     </div> 
 
     <div class="parent"> 
 

 
     <div class="contact" id="contact"> 
 
      <h1>Do not hesitate to get in touch</h1> 
 
      <h4>[email protected]</h4> 
 
      <p> HEY HEY HEY asdasdas dasdasda sdad</p> 
 
     </div> 
 
    </div> 
 

 
     </div> 
 

 
</body> 
 

 

 
</html>

任何幫助WO我非常感謝，因爲我真的很苦惱這個！

只是重新迭代我想聯繫部分網站的限制較少，所以我可以添加聯繫人表單和頁腳！

謝謝！

來源

2016-09-19 Harry

回答

0

檢查了這一點，

你有一些沒有。像parent它應該是.parent，我已經改變了一些樣式，只是演示，你可以改變它到任何你喜歡的。

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body, html { 
 
    margin: 0; 
 
    font: 1em "Open Sans", Sans-serif; 
 
} 
 

 
.nav-main { 
 
    position: fixed; 
 
    z-index: 9999; 
 
    width: 100%; 
 
    background-color: #222; 
 
    height: 5em; 
 
    color: #fff; 
 
} 
 

 
.nav-main .logo { 
 
    float: left; 
 
    font-weight: bolder; 
 
    height: 40px; 
 
    padding: 15px 30px; 
 
    font-size: 3.0em; 
 
    line-height:35px 
 
} 
 

 
.under-logo { 
 
    font-size: 1em; 
 
    color: #fff; 
 
    float: left; 
 
    margin-top: 45px; 
 
    margin-left: 55px; 
 
    line-height:40px; 
 
    position: absolute; 
 
} 
 

 
.nav-main > ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    float: right; 
 
    font-size: 3em; 
 
    font-weight: bold; 
 
    list-style-type: none; 
 
    padding-right: 30px; 
 
} 
 

 
.nav-main > ul > li { 
 
    float: left; 
 
} 
 

 
.nav-item { 
 
    display: inline-block; 
 
    padding: 15px 20px; 
 
    height: 40px; 
 
    line-height: 40px; 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 

 
.nav-item:hover { 
 
    background-color: #444; 
 
} 
 

 
.title { 
 
    height: 50em; 
 
    position: relative; 
 
    text-align: center; 
 
    color: #fff; 
 
    font-family: Open sans, Tahoma, Arial; 
 
    background: url(http://hghazni.com/v2/img/flat_mountain_bg.jpg) no-repeat center center fixed; 
 
    /*background-color: #ee712b;*/ 
 
    background-size: cover; 
 
-webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    overflow: visible; 
 
    /*position: absolute; 
 
    top: 20%; 
 
    left: 30%; 
 
    right: 30%*/ 
 

 
} 
 

 
.title img { 
 
    margin: 0; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-right: -50%; 
 
    transform: translate(-50%, -50%); 
 
    /*margin: auto;*/ 
 
    /*width: 100%;*/ 
 
} 
 
.title h1 { 
 
    position: absolute; 
 
    top:70%; 
 
    left: 50%; 
 
    margin-right: -50%; 
 
    transform: translate(-50%, -50%); 
 
    background-color:#000; 
 
    font-size: 4em; 
 
    /*position: static; 
 
    text-align: center; 
 
    margin: auto; 
 
    width: 70%;*/ 
 
} 
 

 
.title h2 { 
 
    /*background-color:#000; 
 
    position: static; 
 
    text-align: center; 
 
    margin: auto; 
 
    width: 80%;*/ 
 
    position: absolute; 
 
    top:82.5%; 
 
    left: 50%; 
 
    margin-right: -50%; 
 
    transform: translate(-50%, -50%); 
 
    background-color:#000; 
 
    font-size: 2.5em; 
 
} 
 

 
.content { 
 
    padding: 20px; 
 
    top: 100%; 
 
    left: 0; 
 
    background-color: #fff; 
 
    align-items: center; 
 
    padding-bottom: 40px; 
 
} 
 

 
.content h1 { 
 
    text-align: center; 
 
    font-size: 8em; 
 
    margin: auto; 
 
    margin-top: 50px; 
 
} 
 
.content h3 { 
 
    padding: 10px; 
 
    font-size: 2.2em; 
 
    font-weight: normal; 
 
    width:80%; 
 
    margin: auto; 
 
} 
 

 
.work-header { 
 
    padding-top: 40px; 
 
    padding-bottom: 40px; 
 
    width: 100%; 
 
    height: 100%; 
 
    left: 0; 
 
    text-align: center; 
 
    background-color: #343436; 
 
} 
 

 
/*Portfolio Header*/ 
 

 
.work-header h1 { 
 
    font-size: 4.2em; 
 
    color: #fff; 
 
} 
 

 
#brain { 
 
    color: #e4c027; 
 
} 
 
#heart { 
 
    color: #f90446 
 
} 
 
#soul { 
 
    color: #6442e9 
 
} 
 

 
/*Portfolio Grid Section baby*/ 
 

 
.work { 
 
    background-color: #fff; 
 
    position: relative; 
 
    padding-top: 40px; 
 
    padding-bottom: 40px; 
 
    padding-left: 8%; 
 
    margin: 0; 
 
    width: 92%; 
 
    height: 100%; 
 
    text-align: center; 
 
} 
 

 
.work h1 { 
 
    padding-bottom: 2em; 
 
    padding-right: 6em; 
 
} 
 

 
.box { 
 
    float:left; 
 
    position: relative; 
 
    width: 28%; 
 
    padding-left: 1%; 
 
    padding-bottom: 1%; 
 
    background-color: #fff; 
 
} 
 
.boxInner { 
 
    position: relative; 
 
    left: 20px; 
 
    right: 10px; 
 
    top: 10px; 
 
    bottom: 10px; 
 
    overflow: hidden; 
 
} 
 
.boxInner img { 
 
    width: 100%; 
 
    overflow: auto; 
 
} 
 
.boxInner .titleBox { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin-bottom: -50px; 
 
    background: #000; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    color: #FFF; 
 
    padding: 10px; 
 
    text-align: center; 
 
    -webkit-transition: all 0.3s ease-out; 
 
    -moz-transition: all 0.3s ease-out; 
 
    -o-transition: all 0.3s ease-out; 
 
    transition: all 0.3s ease-out; 
 
} 
 
body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox { 
 
    margin-bottom: 1em; 
 
    height: 3em; 
 
    padding-top: 1em; 
 
    font-size: 2em; 
 
    font-weight: bold; 
 
} 
 

 
    /*contact page*/ 
 

 
.work .parent { 
 
    position: relative; 
 
    padding-top: 50px; 
 
} 
 

 
.work .parent .contact {} 
 

 
.work .parent .contact h1 { 
 
    text-align: center; 
 
} 
 

 
.work .parent .contact h4 { 
 
    color: #000; 
 
    text-align: center; 
 
    font-size: 50px; 
 
} 
 
/*contact form*/ 
 

 
@media only screen and (max-width : 480px) { 
 
    /* Smartphone view: 1 tile */ 
 
    .box { 
 
     width: 100%; 
 
     padding-bottom: 100%; 
 
    } 
 
} 
 
@media only screen and (max-width : 650px) and (min-width : 481px) { 
 
    /* Tablet view: 2 tiles */ 
 
    .box { 
 
     width: 50%; 
 
     padding-bottom: 50%; 
 
    } 
 
} 
 
@media only screen and (max-width : 1050px) and (min-width : 651px) { 
 
    /* Small desktop/ipad view: 3 tiles */ 
 
    .box { 
 
     width: 33.3%; 
 
     padding-bottom: 33.3%; 
 
    } 
 
} 
 
@media only screen and (max-width : 1290px) and (min-width : 1051px) { 
 
    /* Medium desktop: 4 tiles */ 
 
    .box { 
 
     width: 25%; 
 
     padding-bottom: 25%; 
 
    } 
 

 
<!--[if lt IE 9]> 
 
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
 
<![endif]-->
<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
     <title>Haroon Ghazni</title> 
 
     <meta charset="utf-8"> 
 
     <link rel="stylesheet" href="stylesheet.css"> 
 
     <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans"> 
 
    </head> 
 

 
    <body class="no-touch"> 
 
    <nav class="nav-main"> 
 
     <div class="logo">HGHAZNI</div> 
 
     <div class="under-logo">WEB/UI/UX/GRAPHIC</div> 
 
     <ul> 
 
     <li> 
 
      <a href="#about" class="nav-item">About</a> 
 
     </li> 
 
     <li> 
 
      <a href="#work" class="nav-item">Work</a> 
 
     </li> 
 
     <li> 
 
      <a href="#contact" class="nav-item">Contact</a> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 
    <div class="title" > 
 
     <img src="img/hg_avatar.png" alt="Haroon Ghazni" /> 
 
     <h1>I’m Haroon Ghazni.</h1> 
 
     <h2>A Web Designer from the little big city of Nottingham.</h2> 
 
    </div> 
 
    <div class="content" id="about"> 
 
     <h1>Who?</h1> 
 
     <h3>I am a dynamic and creative web designer with experience of working on international brands in a fast paced collaborative environment.</h3> 
 
     <h3>As a hands on individual who isn’t afraid of a pen and paper I work through the full UX lifecycle from research to design and testing utilising all elements of a user centred design process to create innovative cross platform experiences.</h3> 
 
     <h3>I enjoy learning new skills as well as playing an active part in the design community.</h3> 
 
    </div> 
 
    <div class="work-header" id="work"> 
 
     <h1>My Work – <span id="brain">Brain</span>,<span id="heart"> Heart</span> and <span id="soul">Soul.</span></h1> 
 
    </div> 
 
    <div class="work"> 
 
     <!-- <h1> me wurk </h1> --> 
 

 
     <div class="box"> 
 
     <div class="boxInner"> 
 
      <img src="http://hghazni.com/v2/img/port1.jpg" /> 
 
      <div class="titleBox">Butterfly</div> 
 
     </div> 
 
     </div> 
 
     <div class="box"> 
 
     <div class="boxInner"> 
 
      <img src="http://hghazni.com/v2/img/port2.jpg" /> 
 
      <div class="titleBox">La Pura Vida</div> 
 
     </div> 
 
     </div> 
 
     <div class="box"> 
 
     <div class="boxInner"> 
 
      <img src="http://hghazni.com/v2/img/port3.jpg" /> 
 
      <div class="titleBox">Bohemian Purple</div> 
 
     </div> 
 
     </div> 
 
     <div class="box"> 
 
     <div class="boxInner"> 
 
      <img src="http://hghazni.com/v2/img/port4.jpg" /> 
 
      <div class="titleBox">Lost in Innocence</div> 
 
     </div> 
 
     </div> 
 
     <div class="box"> 
 
     <div class="boxInner"> 
 
      <img src="http://hghazni.com/v2/img/port5.jpg" /> 
 
      <div class="titleBox">Cerebral Experience</div> 
 
     </div> 
 
     </div> 
 
     <div class="box"> 
 
     <div class="boxInner"> 
 
      <img src="http://hghazni.com/v2/img/port6.jpg" /> 
 
      <div class="titleBox">Mario Escort</div> 
 
     </div> 
 
     </div> 
 
     <div class="box"> 
 
     <div class="boxInner"> 
 
      <img src="http://hghazni.com/v2/img/port7.jpg" /> 
 
      <div class="titleBox">Restaurant iOS App</div> 
 
     </div> 
 
     </div> 
 
     <div class="box"> 
 
     <div class="boxInner"> 
 
      <img src="http://hghazni.com/v2/img/port8.jpg" /> 
 
      <div class="titleBox">Nottingham Sober Yaught Dragons</div> 
 
     </div> 
 
     </div> 
 
     <div class="box"> 
 
     <div class="boxInner"> 
 
      <img src="http://hghazni.com/v2/img/port9.jpg" /> 
 
      <div class="titleBox">Poet Farmer</div> 
 
     </div> 
 
     </div> 
 
     <div class="parent"> 
 

 
     <div class="contact" id="contact"> 
 
      <h1>Do not hesitate to get in touch</h1> 
 
      <h4>[email protected]</h4> 
 
      <p> HEY HEY HEY asdasdas dasdasda sdad</p> 
 
     </div> 
 
    </div> 
 

 
     </div> 
 

 
</body> 
 

 

 
</html>

來源

2016-09-19 05:06:59 Majid

+0

嗨馬吉德這是輝煌的，謝謝！如果我想完成網站現在將是完美的！ 雖然我也想添加頁腳，但似乎並不允許我在投資組合/聯繫人部分之後添加另一個可見部分/元素。 我試圖添加一個

，但從中得不到任何東西。我試圖通過查看元素的位置（絕對/相對等），但沒有運氣，看看限制添加新內容的限制。 – Harry

+0

你根本不需要使用絕對位置！除非你有充分的理由。然而，我看到的只是在工作類的div標籤下添加另一個div類，這意味着您應該複製一個類或工作，並將其名稱更改爲「footer」或其他。如果您在這裏遇到問題分享，並且如果我最近給出的答案對您來說可以接受，請接受它，希望它能在稍後搜索並在此處查找時適用。 – Majid

+0

嗨馬吉德，我實際上監督了你在我擺弄它後第一次幫助我跟進問題的事實！真的很感謝支持:) – Harry

相關問題

 相關問題