Софтуерно Инженерство
Loading...
SeanDoherty avatar SeanDoherty -2 Точки

Подредба на 3 секции

Здравейте колеги, 

Опитвам се да реша задачата от снощната лекция - Conference,

но имам затруднения с подредбата на трите секции с картинки, под header-a.

Някой усложлив разбирач може ли да ме опъти малко?

Поздрави!

 

П.П

Ако помага, отдолу ще копирам html-а ми ->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Styles Conference</title>
    <link rel="stylesheet" href="conference.css">
</head>
<body>
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Speakers</a></li>
        <li><a href="#">Schedule</a></li>
        <li><a href="#">Venue</a></li>
        <li><a href="#">Register</a></li>
    </ul>
</nav>
<div id="info">
    <p>
        August 24th-26th - Chicago, IL
    </p>
</div>

<header class="container">
    <h1>Styles Conference</h1>
    <h2>Dedicated to the Craft of Building Websites</h2>
    <p>Every year the brightest web designers and front-end developers
        descend on Chicago to discuss the latest technologies. Join us
        this August!
    </p>
    <button class="btn">
        Register Now
    </button>
</header>

<main>
    <article class="first">
        <h3>Speakers</h3>
        <img src="Background/speakers.jpg" height="150" width="200"/>
        <h2>World-Class Speakers</h2>
        <p>Joining us from all around the world are over twenty fantastic
        speakers, here to share their stories.
        </p>
    </article>

    <article class="second">
        <h3>Schedule</h3>
        <img src="Background/schedule.jpg" height="150" width="200"/>
        <h2>Three Inspiring Days</h2>
        <p>Enjoy three inspiring and action-packed days of talks,
        gatherings, and all-around good times.
        </p>
    </article>


    <article class="third">
        <h3>Venue</h3>
        <img src="Background/venue.jpg" height="150" width="200"/>
        <h2>The Chicago Theatre</h2>
        <p>Within the heart of Chicago, The Chicago Theatre will provide a beautiful
        conference venue.
        </p>
    </article>
</main>

<footer>
    <p>
        &copy;styles conference
    </p>
    <ul>
        <li>Home</li>
        <li>Speakers</li>
        <li>Schedule</li>
        <li>Venue</li>
        <li>Register</li>
    </ul>
</footer>
</body>
</html>
Тагове:
0
Web Basics
SeanDoherty avatar SeanDoherty -2 Точки

http://codepen.io/anon/pen/wgXwMM Заповядай!

0
TeodorDimitrov89 avatar TeodorDimitrov89 266 Точки

Има и по-умни начини,но аз се сетих за този като най-бърз.

http://codepen.io/TeodorDimitrov89/pen/MJXgJO

Мисля, че първо трябва да сложиш width на картинките,но в css-a за всички еднакви.

2. Трябва да сложиш размери на section-ните бяха articles промених го, примерно 300px или колкото на картинките.

3. Използвал си float left на две картинки и display inline-block,което в случая няма да ти свърши работа.

4. Използвах един div който да ми хване 3-те section-ни и след което му казах display flex и justify-content:center;

5.Не е хубаво да слагаш padding-bottom 300 на header-a може да му зададеш виочина 300px

Малко ти се счупи header-a поправи си го и футъра няма нужда да е толкова висок

Използвай nav-тага във footer-a и в него сложи ul li a. 

Информация за flex-box https://css-tricks.com/snippets/css/a-guide-to-flexbox/

0
04/02/2017 12:42:07
SeanDoherty avatar SeanDoherty -2 Точки

Благодаря!

0