2017-12-17 5 views
0

Dreamweaver로 작업하고 일부 CSS를 수정 한 후에 본문에 대한 내 배경이 나타나지 않습니다. 링크가 끊어 졌는지 확인하기 위해 단색으로 바꿨지 만, 브라우저에서 열 때 기껏해야 흰색으로 바뀌기 전에 반 초 동안 보여줍니다. 나는 말 그대로 당황 스럽다.내 배경이 방금 사라졌습니다.

내 배경이 거기에 있었고, 고정되어 있고, 다른 div가 맨 위에 오르기 때문에, 어떻게 시작했는지 정확히 알 수 없습니다. 이제 그것은 텅 빈 공백입니다. 여기

내 코드입니다 : 여기에서

rel="stylesheet">@charset "utf-8"; 
 
/* CSS Document */ 
 

 
.bodydiv { 
 
    background:red;url(Images/backgroundp1.jpg) ; 
 
    background-size: cover; 
 
    width:100%; 
 
    padding:0; 
 
    margin:0; 
 

 

 
} 
 

 
/* Font families : font-family: 'Cabin Sketch', cursive; 
 
font-family: 'Averia Sans Libre', cursive;* font-family: 'Special Elite', cursive;*/ 
 

 

 

 

 
.page1 { 
 
    margin-right: auto; 
 
    margin-left : auto; 
 
    width: 100%; 
 
    height:40em; 
 
    background-size:cover; 
 
    padding: 0; 
 
    margin: 0; 
 

 

 
} 
 

 

 
#me { 
 
    grid-column: 2; 
 
    display:block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    margin-bottom: auto; 
 
    margin-top: 7em 
 

 
} 
 

 
h1{ 
 
    text-align: center; 
 
    font-size: 4em; 
 
    font-family: 'Cabin Sketch'; 
 
} 
 

 
p { 
 
    font-family: 'Special Elite', cursive; 
 
    line-height: 180%; 
 
} 
 

 
h3 { 
 
    font-family: 'Cabin Sketch'; 
 
    text-transform: capitalize; 
 
} 
 

 

 

 
.page1content{ 
 
    width: 800px; 
 
    height: 800px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 

 
.page2{ 
 
    background: url(Images/DSC04168.jpg) center center ; 
 
    background-size: cover; 
 
    height: 50em; 
 
    padding-bottom: -10; 
 
    margin-bottom: 0; 
 

 
} 
 

 
.page3{ 
 
    background: url(Images/DSC00472.jpg) center center; 
 
    background-size: cover; 
 
    height:50em; 
 
    padding-top: 0; 
 
    padding-bottom: 0; 
 
} 
 

 
.page4 { 
 
    display:grid; 
 
    grid-template-columns: 50% 50%; 
 
    height: 70em 
 

 
} 
 

 
.page4a { 
 
    grid-column: 1; 
 
    background: rgba(81,81,81,1.00); 
 
    color:rgba(198,198,198,1.00); 
 
    display: grid; 
 
    grid-template-columns: 15% auto 15%; 
 
    grid-template-rows: 15% auto 15%; 
 
} 
 

 
.aboutme { 
 
    grid-column: 2; 
 
    grid-row: 2; 
 
} 
 

 
.page4b { 
 
    grid-column: 2; 
 
    background: rgba(198,198,198,1.00); 
 
    color: rgba(81,81,81,1.00); 
 
    display:grid; 
 
    grid-template-columns: 15% auto 15%; 
 
    grid-template-rows: 15% auto 10%; 
 
} 
 

 
.form { 
 
    grid-column: 2; 
 
    grid-row: 2; 
 
} 
 

 
input[type], select{ 
 
    width: 100%; 
 
    padding: 12px 20px; 
 
    margin: 8px; 
 
    display: inline-block; 
 
    border 2px solid; 
 
    border-radius: 5px; 
 
    box-sizing: border-box; 
 
    background-color: rgba(81,81,81,1.00); 
 
    color: rgba(198,198,198,1.00) 
 

 
} 
 

 
input[type=text]:focus { 
 
    border: 2px solid rgba(81,81,81,1.00) ; 
 
} 
 

 
textarea{ 
 
    width: 100%; 
 
    height: 150px; 
 
    padding: 12px 20px; 
 
    box-sizing: border-box; 
 
    border: 2px solid #ccc; 
 
    border-radius: 4px; 
 
    background-color: rgba(81,81,81,1.00); 
 
    font-size: 16px; 
 
    resize: none; 
 
} 
 

 
input[type=submit] { 
 
    width: 33%; 
 
    background-color:rgba(198,198,198,1.00) ; 
 
    color: rgba(81,81,81,1.00); 
 
    padding: 14px 20px; 
 
    margin: 8px 0; 
 
    border: 2px solid rgba(81,81,81,1.00); 
 
    border-radius: 4px; 
 
    cursor: pointer; 
 
}
<!doctype html> 
 
<html> 
 
<head> 
 
    <link href="https://fonts.googleapis.com/css?family=Averia+Sans+Libre|Cabin+Sketch|Special+Elite" rel="stylesheet"> 
 
    <link rel="stylesheet" href="s"> 
 
<meta charset="utf-8"> 
 
<title>Mrhuggies-portfolio</title> 
 
<link rel="stylesheet" href="styles.css"> 
 
</head> 
 

 

 

 
<body> 
 

 
<div class="bodydiv">  
 

 
    <div class="page1"> 
 

 
     <div class="page1content"> 
 
       <img id="me" src="Images/pof2.png" width="600" height="370px" alt="Picture of Thomas Hughes"/> 
 
<h1>ThomasHughesPortfolio<br>WebDesigner/Photographer</h1> 
 
     </div> 
 
</div> 
 

 

 
    <div class="page2"> 
 

 
     </div> 
 

 

 
    <div class="page3"> 
 

 
    </div> 
 

 
    <div class="page4"> 
 

 
     <div class="page4a"> 
 
      <div class="aboutme"> 
 
       <h3>About Me</h3> 
 
       <p> Hello, I'm a 25 year old that goes by the name of Thomas Hughes, based in <b>Glagow</b>. I design UI/UX whlist writing all of my own code. I enjoy making something beautiful, functional and enjoyable to use and browse. Solving problems, <b>capturing beauty</b> and a keen eye for design is where my passions lie. 
 
        Adept at Photoshop, Dreamweaver and getting to grips with other programmes that Adobe Suit has to offer. 
 
        Feel free to get in touch with any free-lance <b>opportunities</b> or job proposals</p> 
 
       </div> 
 
     </div> 
 
    <div class="page4b"> 
 
     <div class="form"> 
 
     <h3><b>I want</b> to hear from you</h3> 
 

 
     <p>Want to talk about a job, see how I'm doing or maybe ask me out for a coffee?</p> 
 

 
      <form action=""> 
 
      <label for="name"></label> 
 
       <input type="text" id="name" name="firstName" placeholder="Your name..." 
 

 

 
       <label for="name"></label> 
 
       <input type="text" id="name" name="firstName" placeholder="Email..." 
 

 

 
      <label for="name"></label> 
 
       <textarea><input type="text" id="name" name="firstName" placeholder="Write your message in here..."></textarea> 
 

 

 
     <input type="submit" value="Send Message"> 
 

 

 

 

 
         </form> 
 

 

 
         </fom> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 

 

 
    </div> 
 
    </body> 
 
</html>

+0

'styles.css' 파일을 공유 할 수 있습니까? –

답변

1

background:red;url(Images/backgroundp1.jpg); 
"빨간색"가 아닌 세미콜론 후 쉼표가 있어야

:

background:red, url(Images/backgroundp1.jpg); 

그렇지 않으면 url(Images/backgroundp1.jpg);은 자체적으로 (의미가없는) 규칙입니다.

+0

나는; 그래서 CSS는 파일에 대한 링크를 무시하고 대신 배경을 빨간색으로 바꿉니다. 어느 쪽도 작동하지 않는다. –

관련 문제