css: 新聞排版
CSS: 新聞排版
在這篇的筆記裡，學習用css設計版型，分割出導覽列、內容等欄位。
目錄:
先做出版面分割畫面
whimsical 是個好用的切版網站。
分割步驟:
- 導覽列
- 區塊: 內容 + 廣告欄位
1. nav導覽列
html
<nav>
<a href="#">首頁</a>
<a href="#">政治</a>
<a href="#">論壇</a>
<a href="#">財經</a>
<a href="#">娛樂</a>
<a href="#">運動</a>
</nav>
css : setting 為 normalized
nav {
background-color: #00ccc4; /*參考新聞版面真正的顏色*/
padding: 8px; /*很擠的話用padding*/
}
nav改良版
html
- 讓 nav 變成 list (用
ulli標籤)
css
- 用
list-syle把點消掉; - 用
inline-block變成一排，以改變每個單字（block）中間的間距 - 調整字體大小和粗細，
text-decoration移除超連結的底線
html
<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">政治</a></li>
<li><a href="#">論壇</a></li>
<li><a href="#">財經</a></li>
<li><a href="#">娛樂</a></li>
<li><a href="#">運動</a></li>
</ul>
</nav>
css
nav {
background-color: #00ccc4;
}
nav ul {
list-style: none;
}
nav li {
display: inline-block;
padding: 15px;
}
nav a {
color: white;
font-size: 1em;
font-weight: 200;
text-decoration: none;
}
2. section 區塊
2.1 main content 主內容 = content + aside
html: 利用命名class區分內文與廣告欄位
<section class="main-content">
<section class="content">內文</section>
<aside>廣告</aside>
</section>
css: main-content設定96%不要全滿，再利用margin的左右auto調整成為置中
.main-content {
/*background-color: orange;*/
width: 96%;
margin-left: auto;
margin-right: auto;
}
2.2 content 內容 & aside 廣告欄位
調整重點:
- %百分比: 分別占main-content的比例
- float: 飄浮起來，都靠左邊
- 兩個欄位與內文margin-right的百分比，相加需為100%
.content {
/*background-color: lightgreen;*/
width: 69%;
float: left;
margin-right: 1%;
}
aside {
/*background-color: pink;*/
width: 30%;
float: left;
}
2.3 content = top-content + sub-content
2.3.1 top-content: 被包含在content裡
<section class="content">
<section class="top-content">
<img src="https://fakeimg.pl/200x100/?retina=1&text=ないよう&font=noto">
<ul>
<li>足球</li>
<li>籃球</li>
<li>桌球</li>
<li>羽球</li>
<li>排球</li>
<li>網球</li>
</ul>
</section>
</section>
css
.top-content img圖片漂浮靠左.top-content ul新聞列表不要點點.top-content li新聞標題行調整高度.top-content li a新聞超連結字體、顏色，不含底線
/*top content*/
.top-content img{
float: left;
height: 200px;
margin-right: 10px;
}
.top-content ul {
/*float: left;*/
list-style: none;
}
.top-content li {
line-height: 22px;
}
.top-content li a {
text-decoration: none;
font-size: 1.1em;
color: #747676;
}
2.3.2 sub-content
兩欄式 50% 50%
<section class="content">
<section class="top-content">
<img src="https://fakeimg.pl/200x100/?retina=1&text=ないよう&font=noto">
<ul>
(略)
</ul>
</section>
<section class="sub-content">
<h3>棒球 > </h3>
<img src="https://fakeimg.pl/100x50/?retina=1&text=やきゅう&font=noto">
<ul>
(略)
</ul>
</section>
<section class="sub-content">
<h3>籃球 > </h3>
<img src="https://fakeimg.pl/100x50/?retina=1&text=バスケットボール&font=noto">
<ul>
(略)
</ul>
</section>
<div class="clearfix"></div>
</section>
棒球 >
籃球 >
css 重點
.sub-content內容各占50%.sub-content img兩欄的照片之間空出一點空間.sub-content li調行距.sub-content a連結顏色.不含底線
/* sub-content */
.sub-content {
/*background-color: lightblue;*/
width: 50%;
float: left;
}
.sub-content img {
width: 90%;
}
.sub-content ul {
/*list-style: none;*/
font-weight: 300;
}
.sub-content li {
line-height: 20px;
}
.sub-content a {
text-decoration: none;
color: #757676
}
2.4 aside 廣告欄位
<aside>
<h3>廣告</h3>
<img src="https://fakeimg.pl/100x60/?retina=1&text=こうこく&font=noto">
<h3>熱門運動新聞</h3>
<ol>
(略)
</ol>
</aside>