1
私はこれらの2つが一番簡単なルーキーエラーだと信じていますが、私はそれらを修正するのに十分な経験はありません。バックグラウンドイメージが表示されず、テキストが行単位で表示されない
何らかの理由で、一度完全なコンテナの背景を設定すると、背景が配置されていますが、テキストの背景に背景の背景が表示されますが、私はそれを望んでいません。別の問題はテキストです、私はそれが私のウェブサイトの計画のようにイメージの側面に整列させる方法を知らない。
これが問題の写真です： 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