Search Bloguru posts

こんにちは。紫のバラの人です。

https://en.bloguru.com/love

🌹マニュアル🌹WEB🌎HTML🌎フッター

thread


---------

< div class="header" > フッター部を入力するよ
< div class="header-logo" >Progate< /div > フッターのロゴはProgate
< div class="header-list" > フッターのリストは、
< ui > 箇条書きで、
< li >永尾まりやちゃん< /li >
< li >高石光ちゃん< /li >
< li >後藤恭子さま< /li >
< /ui > 箇条書き終わり
< /div > フッターリストの部分終わり
< /div > フッターの部分終わり

-------------------

横並びにする→cssで「float:left;」
・liにかければli要素のみ
・header-logoにかければロゴとli要素が並ぶ

ただし、そのままだとフッターにもかかってしまう。
ヘッダーだけでよい場合は、「.float-list□ li{

----------------------------------

< !DOCTYPE html>
< html>
< head>
< meta charset="utf-8">
< title>Progate
< link rel="stylesheet" href="stylesheet.css">
< /head>
< body>
< div class="header">
< div class="header-logo">Progate

< div class="header-list">
< ul>
< li>プログラミングとは
< li>学べるレッスン
< li>お問い合わせ
< /ul>
< /div>
< /div>

< div class="main">

< /div>

< div class="footer">

< div class="footer-logo">Progate







--------

body {
font-family: "Avenir Next";
}

li {
list-style: none;
/* 以下の2行を削除してください */
}

.header {
background-color: #26d0c9;
color: #fff;
height: 90px;
}

.header-logo {
float: left;
font-size: 36px;
padding: 20px 40px;
}

/* header-listの中のli要素にのみ適用したいCSSを記述してください */
.header-list li{
float: left;
padding: 33px 20px;
}
.main {
background-color: #bdf7f1;
height: 600px;
}

.footer {
background-color: #ceccf3;
height: 270px;
}



Share
Email

People Who Wowed This Post

Happy
Sad
Surprise