【PHP】1行掲示板を作る⑦ CSSの追加

line_bbs.phpの調整をしながらスタイルを追加していきます。

line_bbs.php を調整

.main_in を追加

<div class=”main”> の中に<div class=”main_in”><div> を作る。

コメント部分にクラスを追加する

フッター部分のリンクを貼る

<A href="https://www.■■■.com">*サイト名など*</A>

imgフォルダを作る

「img」フォルダを作り、背景と時計の画像を入れておく。

画像がないときは ↓ を使ってください。（再配布はしないでね）

右クリックで保存です。

　

スタイルを追加する

.main に追加

背景画像を指定します。

background-image: url(img/bg.jpg);

.main_in のスタイルを追加する

.main_in{
padding:10px;
background:#fff;
}

<li> にスタイルを設定

li{
padding:2px;
}

.li_indent{
text-indent:8px;
}

.li_r{
text-align:right;
font-size:0.7rem;
}

li img{
margin:0px 1px -4px;
}

　

保存をして確認をすると、このように表示されます。

　

次はページングです。

[line_bbs_menu]