Css макет в современном веб-дизайне - PullRequest
Новая
       11

Css макет в современном веб-дизайне

0 голосов
/ 03 сентября 2018

Я в ужасе от css с момента его рождения. Во всяком случае, я пытаюсь понять функциональный способ создания современного макета CSS.

Допустим, сайт с верхним меню, всплывающим меню слева, всплывающей новостной лентой справа и содержимым центра.

Я пробовал с этим: 

.leftcontent {
  float:left;
  height:100%;
  background-color:blue;
}
.rightcontent {
  float:left;
  height:100%;
  background-color:aqua;
}
.centercontent {
  height:100%;
  background-color:green;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="container">

  <div class="leftcontent">
    <p>
      Well, you can tell by the way I use my walk
      I'm a woman's man, no time to talk
      Music loud and women warm, I've been kicked around
      Since I was born
      And now it's alright, it's okay
      And you may look the other way
      We can try to understand
      The New York Times' effect on man
      Whether you're a brother or whether you're a mother
      You're stayin' alive, stayin' alive
      Feel the city breakin' and everybody shakin'
      And we're stayin' alive, stayin' alive
      Ah, ha, ha, ha, stayin' alive, stayin' alive
      Ah, ha, ha, ha, stayin' alive
      Well now, I get low and I get high
      And if I can't get either, I really try
      Got the wings of heaven on my shoes
      I'm a dancin' man and I just can't lose
      You know it's alright, it's okay
      I'll live to see another day
      We can try to understand
      The New…
    </p>
  </div>
  <div class="centercontent">
    Every day I wake up
    Every day I wake up alone
    Every day I wake up
    Every day I wake up alone
    Let me open up the discussion with 
    I'm not impressed 
    With any mother fucking word I say
    See I lied that I cried
    When he came inside
    And now I'm burning a highway Hades
    Shut the fuck up
    When I'm trying to think
    I gotta keep my concentration 
    Give me one more drink
    And then I'll try to remember all the advice 
    That my good book told me
    And all the lost souls say
    Every day I wake up
    Every day I wake up alone
    (Kill me just kill me)
    Or get me out of the sun
    Every day I wake up
    Every day I wake up alone
    (Kill me just kill me)
    Someone get me out of the sun
    Drugs, bars, backseats of cars blowing boys
    What a boring life I've led so far
    Just a prime thirteen 
    When I…
    Every day I wake up
    Every day I wake up alone
    Every day I wake up
    Every day I wake up alone
    Let me open up the discussion with 
    I'm not impressed 
    With any mother fucking word I say
    See I lied that I cried
    When he came inside
    And now I'm burning a highway Hades
    Shut the fuck up
    When I'm trying to think
    I gotta keep my concentration 
    Give me one more drink
    And then I'll try to remember all the advice 
    That my good book told me
    And all the lost souls say
    Every day I wake up
    Every day I wake up alone
    (Kill me just kill me)
    Or get me out of the sun
    Every day I wake up
    Every day I wake up alone
    (Kill me just kill me)
    Someone get me out of the sun
    Drugs, bars, backseats of cars blowing boys
    What a boring life I've led so far
    Just a prime thirteen 
    When I…Every day I wake up
    Every day I wake up alone
    Every day I wake up
    Every day I wake up alone
    Let me open up the discussion with 
    I'm not impressed 
    With any mother fucking word I say
    See I lied that I cried
    When he came inside
    And now I'm burning a highway Hades
    Shut the fuck up
    When I'm trying to think
    I gotta keep my concentration 
    Give me one more drink
    And then I'll try to remember all the advice 
    That my good book told me
    And all the lost souls say
    Every day I wake up
    Every day I wake up alone
    (Kill me just kill me)
    Or get me out of the sun
    Every day I wake up
    Every day I wake up alone
    (Kill me just kill me)
    Someone get me out of the sun
    Drugs, bars, backseats of cars blowing boys
    What a boring life I've led so far
    Just a prime thirteen 
    When I…
  </div>
  <div class="rightcontent">
    The only thing I ever wanted
    The only thing I ever needed
    Is my own way, I gotta have it all
    I don't want your opinion, I don't need your ideas
    Stay the fuck out of my face, stay away from me
    I am my own God, I do as I please
    Just wipe your own ass and shut your mouth
    I had enough and you're going down
    Shut your mouth
    What comes around you know goes around
    My mind is playing tricks on me
    I am not as stable as I used to be
    Pushed and shoved, you know you're going too far
    I will not break my back for you no more
    I am gonna go my way, I am gonna take control
    Time to wake up and dig myself out of this hell
    Just wipe your own ass and shut your mouth
    I had enough and you're going down
    Shut your…
  </div>

</div>

</body>
</html>

не работает, вау

Ну, я был разочарован. Все плавающие объяснения пошли на ветер. Я ожидал, ну, правый и левый плавающий div и центральный контент.

Или, какой лучший способ сделать то, что я описал? div с встроенным (или встроенным блоком) отображением? Я могу работать также, если вы связываете примеры

Кто-то может починить или привести рабочие примеры?

Ответы [ 2 ]

0 голосов
/ 03 сентября 2018

Flexbox довольно современный и решает проблему с минимальным CSS, просто добавьте этот класс: 

.container{
  display:flex;
  flex-direction:row;
}

Если вы хотите добиться, чтобы контент имел фиксированную позицию для прокрутки или другого эффекта, обратите внимание на этот ресурс MDN .

Лично, чтобы избежать создания макета с использованием чистого CSS, я рекомендую использовать Bootstrap , так как он поставляется с множеством инструментов и шаблонов, которые выглядят действительно хорошо и просты в использовании.

0 голосов
/ 03 сентября 2018

Вы можете использовать position: fixed для всплывающего меню слева и справа. 

body {
  margin: 0;
  padding: 0;
}
.leftcontent {
  position: fixed;
  width: 25%;
  top: 0;
  left: 0;
  background-color:blue;
}
.rightcontent {
  position: fixed;
  width: 25%;
  top: 0;
  right: 0;
  background-color:aqua;
}
.centercontent {
  width: 50%;
  margin: 0 auto;
  background-color:green;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="container">

  <div class="leftcontent">
    Well, you can tell by the way I use my walk
    I'm a woman's man, no time to talk
    Music loud and women warm, I've been kicked around
    Since I was born
    And now it's alright, it's okay
    And you may look the other way
    We can try to understand
    The New York Times' effect on man
    Whether you're a brother or whether you're a mother
    You're stayin' alive, stayin' alive
    Feel the city breakin' and everybody shakin'
    And we're stayin' alive, stayin' alive
    Ah, ha, ha, ha, stayin' alive, stayin' alive
    Ah, ha, ha, ha, stayin' alive
    Well now, I get low and I get high
    And if I can't get either, I really try
    Got the wings of heaven on my shoes
    I'm a dancin' man and I just can't lose
    You know it's alright, it's okay
    I'll live to see another day
    We can try to understand
    The New…
  </div>
  <div class="centercontent">
    Every day I wake up
    Every day I wake up alone
    Every day I wake up
    Every day I wake up alone
    Let me open up the discussion with 
    I'm not impressed 
    With any mother fucking word I say
    See I lied that I cried
    When he came inside
    And now I'm burning a highway Hades
    Shut the fuck up
    When I'm trying to think
    I gotta keep my concentration 
    Give me one more drink
    And then I'll try to remember all the advice 
    That my good book told me
    And all the lost souls say
    Every day I wake up
    Every day I wake up alone
    (Kill me just kill me)
    Or get me out of the sun
    Every day I wake up
    Every day I wake up alone
    (Kill me just kill me)
    Someone get me out of the sun
    Drugs, bars, backseats of cars blowing boys
    What a boring life I've led so far
    Just a prime thirteen 
    When I…
    Every day I wake up
    Every day I wake up alone
    Every day I wake up
    Every day I wake up alone
    Let me open up the discussion with 
    I'm not impressed 
    With any mother fucking word I say
    See I lied that I cried
    When he came inside
    And now I'm burning a highway Hades
    Shut the fuck up
    When I'm trying to think
    I gotta keep my concentration 
    Give me one more drink
    And then I'll try to remember all the advice 
    That my good book told me
    And all the lost souls say
    Every day I wake up
    Every day I wake up alone
    (Kill me just kill me)
    Or get me out of the sun
    Every day I wake up
    Every day I wake up alone
    (Kill me just kill me)
    Someone get me out of the sun
    Drugs, bars, backseats of cars blowing boys
    What a boring life I've led so far
    Just a prime thirteen 
    When I…Every day I wake up
    Every day I wake up alone
    Every day I wake up
    Every day I wake up alone
    Let me open up the discussion with 
    I'm not impressed 
    With any mother fucking word I say
    See I lied that I cried
    When he came inside
    And now I'm burning a highway Hades
    Shut the fuck up
    When I'm trying to think
    I gotta keep my concentration 
    Give me one more drink
    And then I'll try to remember all the advice 
    That my good book told me
    And all the lost souls say
    Every day I wake up
    Every day I wake up alone
    (Kill me just kill me)
    Or get me out of the sun
    Every day I wake up
    Every day I wake up alone
    (Kill me just kill me)
    Someone get me out of the sun
    Drugs, bars, backseats of cars blowing boys
    What a boring life I've led so far
    Just a prime thirteen 
    When I…
  </div>
  <div class="rightcontent">
    The only thing I ever wanted
    The only thing I ever needed
    Is my own way, I gotta have it all
    I don't want your opinion, I don't need your ideas
    Stay the fuck out of my face, stay away from me
    I am my own God, I do as I please
    Just wipe your own ass and shut your mouth
    I had enough and you're going down
    Shut your mouth
    What comes around you know goes around
    My mind is playing tricks on me
    I am not as stable as I used to be
    Pushed and shoved, you know you're going too far
    I will not break my back for you no more
    I am gonna go my way, I am gonna take control
    Time to wake up and dig myself out of this hell
    Just wipe your own ass and shut your mouth
    I had enough and you're going down
    Shut your…
  </div>

</div>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...