1
나는이 두 가지가 가장 쉬운 신인 오류라고 생각하지만 문제를 해결할만큼 충분한 경험이 없습니다.배경 이미지가 표시되지 않고 이미지가 줄 바꿈되지 않음
일단 전체 컨테이너의 배경을 설정하면 배경이 제자리에 있지만 텍스트 뒤에 신체 배경이 표시되므로 원하는 것은 아닙니다. 또 다른 문제는 텍스트입니다. 웹 사이트 계획과 마찬가지로 이미지의 측면에서 어떻게 정렬할지 모릅니다. Click to see the picture
이 내가 그것을 같이 할 것입니다 :
이
문제의 사진입니다 Click to see the picture 다음
, 나는 여전히 내 전체 코드 learnin하고있다가 좋지 않을까 경우 사람 변화되는 것을 통해 나를 걸을 수 있습니다. 또한 나쁜 습관이나 실수를 발견한다면 나에게 매우 유용 할 것이라고 말해주십시오. 고맙습니다.
@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900,300,300italic,100,100italic,400italic,700italic,900italic);
* {
margin: 0;
padding: 0;
}
body,
header,
article,
nav,
section,
footer,
aside {
display: block;
font-family: 'Lato', normal;
font-weight: 400;
background-repeat: repeat;
background-image: url("../img/background-lighter.png");
}
/* Classes */
.wrap {
max-width: 100%;
max-height: 100%;
width: 100%;
height: auto;
margin: auto;
}
.cell-triple {
width: 25%;
display: inline-block;
padding: 5px 20px;
vertical-align: top;
}
.cell-double {
width: 40%;
display: inline-block;
padding: 5px 10px;
vertical-align: top;
}
.cell-single {
width: 100%;
display: inline-block;
padding: 5px 10px;
vertical-align: text-top;
}
.pre-article {
padding: 70px 50px 50px 50px;
text-align: center;
}
.pre-article-image {
display: inline-block;
padding: 70px 0px 20px 0px;
}
.article1 {
display: inline-block;
background-image: url("../img/background-light.png");
}
.cell-double-article {
width: 40%;
display: inline-block;
padding: 5px 10px;
vertical-align: top;
text-align: left;
}
.shadow {
box-shadow: 0px 1px 1px #000000;
}
.underline {
border-bottom: 3px double #8c8b8b;
padding-bottom: 5px;
margin-left: 30%;
margin-right: 30%;
}
.subheading {
font-weight: 700;
line-height: 35px;
}
/* Navigation Bar */
nav {
background: rgba(0, 0, 0, 0.7);
width: 100%;
height: auto;
position: fixed;
box-shadow: 0px 1px 1px #000000;
}
nav li a {
color: white;
text-decoration: none;
font-family: 'Lato', normal;
font-size: 18px;
font-weight: 400;
line-height: 50px;
}
nav li {
list-style-type: none;
padding-left: 60%;
margin-right: 10%;
}
nav li a:hover:not(.active) {
background-color: rgba(0, 0, 0, 0.3);
font-size: 130%;
-webkit-transition: 0.5s;
/* Safari */
transition: 0.7s;
}
nav .active {
background-color: rgba(0, 255, 255, 0.5);
}
li a {
display: block;
padding: 0px 10px;
float: left;
text-decoration: none;
vertical-align: text-top;
}
h1 {
font-family: 'Lato', normal;
font-weight: 400;
}
/* */
h2 {
font-family: 'Lato', normal;
font-weight: 300;
}<!DOCTYPE html>
<html>
<head>
<title>Streamlite | Index</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<!--[if lt IE 9]>
\t \t \t <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
\t \t <![endif]-->
</head>
<body>
<header id="page-header" class="">
<nav>
<ul>
<li><a class="active" href="#">ABOUT<a></li>
\t \t \t \t \t <li><a href="#">SERVICES<a></li>
\t \t \t \t \t <li><a href="#">PRICING<a></li>
\t \t \t \t \t <li><a href="#">PORTFOLIO<a></li>
\t \t \t \t \t <li><a href="#">CONTACT<a></li> \t \t \t \t
\t \t \t \t </ul>
\t \t \t </nav>
\t \t \t
\t \t \t <img class="shadow" src="img/pc1.jpg" alt="computer" height="100%" width="100%">
\t \t
\t \t </header>
\t \t
\t \t
\t \t
\t \t
\t \t
\t \t <div id="wrapper" class="">
\t \t
\t \t
\t \t
\t \t
\t \t
\t \t \t <article id="pre-article" class="pre-article">
\t \t \t
\t \t \t \t <header id="pre-article-header">
\t \t \t \t \t <h1 class="underline"> STREAMLITE SPECIALIZES IN DIGITAL MARKETING SOLUTIONS</h1>
\t \t \t \t \t <h2> We provide a range of online marketing and advertising solutions. </h2>
\t \t \t \t </header> \t \t
\t \t \t \t
\t \t \t \t <section>
\t \t \t
\t \t \t
\t \t \t
\t \t \t
\t \t \t
\t \t \t \t \t <section class="cell-triple">
\t \t \t \t \t
\t \t \t \t \t \t <img class="pre-article-image" src="img/icon-bulb.png" alt="computer" height="70" width="70">
\t \t \t \t \t
\t \t \t \t \t \t <header class="subheading">
\t \t \t \t \t \t \t PROFESSIONAL DESIGN
\t \t \t \t \t \t </header>
\t \t \t \t \t
\t \t \t \t \t \t We offer only the best responsive websites to our clients. By going with Streamlite,
\t \t \t \t \t \t you are guaranteed a modern and sleek bespoke website tailored exactly to your needs.
\t \t \t \t \t \t
\t \t \t \t \t </section>
\t \t \t \t \t
\t \t \t \t \t
\t \t \t \t \t
\t \t \t \t \t
\t \t \t \t \t
\t \t \t \t \t <section class="cell-triple">
\t \t \t \t \t
\t \t \t \t \t \t <img class="pre-article-image" src="img/icon-pc.png" alt="computer" height="70" width="70">
\t \t \t \t \t
\t \t \t \t \t \t <header class="subheading">
\t \t \t \t \t \t \t USER FRIENDLY
\t \t \t \t \t \t </header>
\t \t \t \t \t
\t \t \t \t \t \t We make sure that your website is easy to use and of exquisite quality. We never fail to neglect the importance of readibility and accessibility.
\t \t \t \t \t \t We make sure that the content is suited exactly to your traffic's demographics.
\t \t \t \t \t \t
\t \t \t \t \t </section>
\t \t \t \t \t
\t \t \t \t \t
\t \t \t \t \t
\t \t \t \t \t
\t \t \t \t \t
\t \t \t \t \t <section class="cell-triple">
\t \t \t \t \t
\t \t \t \t \t \t <img class="pre-article-image" src="img/icon-mobile.png" alt="computer" height="70" width="70">
\t \t \t \t \t
\t \t \t \t \t \t <header class="subheading">
\t \t \t \t \t \t \t MOBILE DEVICES
\t \t \t \t \t \t </header>
\t \t \t \t \t
\t \t \t \t \t \t We are at a time where your business is no longer stationary and therefore, we utilise modern responsive web development techniques as a standard in order
\t \t \t \t \t \t to make sure that your company is accessible on devices such as mobile phones and tablets.
\t \t \t \t \t \t
\t \t \t \t \t </section>
\t \t \t
\t \t \t
\t \t \t
\t \t \t
\t \t \t
\t \t \t \t </section>
\t \t \t \t
\t \t \t </article>
\t \t \t
\t \t \t
\t \t \t
\t \t \t
\t \t \t
\t \t \t <article class="article1"> \t \t
\t \t \t \t
\t \t \t \t
\t \t \t \t \t <img class="" src="img/3devices.jpg" alt="computer" height="25%" width="25%"> \t \t \t \t
\t \t \t \t
\t \t \t \t
\t \t \t \t \t <section class="cell-double-article">
\t \t \t \t \t
\t \t \t \t \t
\t \t \t \t \t \t <header class="subheading">
\t \t \t \t \t \t \t RESPONSIVE WEBSITES
\t \t \t \t \t \t </header>
\t \t \t \t \t \t
\t \t \t \t \t \t \t Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet dolor in justo tincidunt convallis.
\t \t \t \t \t \t \t Aenean vitae facilisis felis, vitae mollis est. Cras vehicula felis purus, eu semper ante malesuada sed. Donec leo nisi,
\t \t \t \t \t \t \t rhoncus eget faucibus eget, porttitor vitae lorem. Aenean venenatis orci non sapien tristique luctus.
\t \t \t \t \t \t \t Curabitur at nisl fermentum, sollicitudin mi eu, dignissim tortor. Vivamus sodales.
\t \t \t \t \t \t
\t \t \t \t \t </section>
\t \t \t \t \t
\t \t \t \t \t
\t \t \t \t \t
\t \t \t \t \t
\t \t \t \t \t
\t \t \t \t \t <section class="cell-double-article">
\t \t \t \t \t
\t \t \t \t \t
\t \t \t \t \t \t <header class="subheading">
\t \t \t \t \t \t \t SEO & POSITIONING
\t \t \t \t \t \t </header>
\t \t \t \t \t
\t \t \t \t \t \t \t Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet dolor in justo tincidunt convallis.
\t \t \t \t \t \t \t Aenean vitae facilisis felis, vitae mollis est. Cras vehicula felis purus, eu semper ante malesuada sed. Donec leo nisi,
\t \t \t \t \t \t \t rhoncus eget faucibus eget, porttitor vitae lorem. Aenean venenatis orci non sapien tristique luctus.
\t \t \t \t \t \t \t Curabitur at nisl fermentum, sollicitudin mi eu, dignissim tortor. Vivamus sodales.
\t \t \t \t \t \t
\t \t \t \t \t \t
\t \t \t \t \t </section>
\t \t \t \t \t
\t \t \t \t \t
\t \t \t \t \t
\t \t \t \t \t
\t \t \t \t \t
\t \t \t \t \t <section class="cell-double-article">
\t \t \t \t \t
\t \t \t \t \t
\t \t \t \t \t \t <header class="subheading">
\t \t \t \t \t \t \t SOCIAL MEDIA ADVERTISING
\t \t \t \t \t \t </header>
\t \t \t \t \t
\t \t \t \t \t \t \t Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet dolor in justo tincidunt convallis.
\t \t \t \t \t \t \t Aenean vitae facilisis felis, vitae mollis est. Cras vehicula felis purus, eu semper ante malesuada sed. Donec leo nisi,
\t \t \t \t \t \t \t rhoncus eget faucibus eget, porttitor vitae lorem. Aenean venenatis orci non sapien tristique luctus.
\t \t \t \t \t \t \t Curabitur at nisl fermentum, sollicitudin mi eu, dignissim tortor. Vivamus sodales.
\t \t \t \t \t \t
\t \t \t \t \t \t
\t \t \t \t \t </section>
\t \t \t \t \t
\t \t \t \t \t
\t \t \t \t \t
\t \t \t \t \t
\t \t \t \t \t
\t \t \t \t \t <section class="cell-double-article">
\t \t \t \t \t
\t \t \t \t \t
\t \t \t \t \t \t <header class="subheading">
\t \t \t \t \t \t \t CONTINUED SUPPORT
\t \t \t \t \t \t </header>
\t \t \t \t \t
\t \t \t \t \t \t \t Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet dolor in justo tincidunt convallis.
\t \t \t \t \t \t \t Aenean vitae facilisis felis, vitae mollis est. Cras vehicula felis purus, eu semper ante malesuada sed. Donec leo nisi,
\t \t \t \t \t \t \t rhoncus eget faucibus eget, porttitor vitae lorem. Aenean venenatis orci non sapien tristique luctus.
\t \t \t \t \t \t \t Curabitur at nisl fermentum, sollicitudin mi eu, dignissim tortor. Vivamus sodales.
\t \t \t \t \t \t
\t \t \t \t \t </section>
\t \t \t \t \t
\t \t \t \t \t
\t \t \t \t \t
\t \t \t \t \t
\t \t \t \t \t
\t \t \t </article>
\t \t \t \t
\t \t \t
\t \t </div>
\t
\t
\t
\t
\t
\t \t <footer id="footer" class="">
\t \t
\t \t
\t \t
\t \t </footer>
\t
\t
\t </body>
</html> \t