個人練習用：サイトパーツ、ボトムアイコン
関連タイピング
-
解説なし、個人練習用につくりました。
プレイ回数638英語長文1054打 -
日本語訳なし、個人練習用に作った英語長文です
プレイ回数3700英語長文673打 -
自分練習用、英語長文：夢について
プレイ回数478英語長文542打 -
個人練習用で作りました。解説なしです。
プレイ回数1178英語長文1140打 -
簡単な解説付きでグラデーションをまとめ、個人練習用
プレイ回数481長文645打 -
flex３カラムサイト、サンプル
プレイ回数200英語長文649打 -
ワードプレスでよく使う分岐文です。
プレイ回数649長文記号1049打 -
個人練習用のコードです
プレイ回数709英語長文1787打
問題文
(<!DOCTYPE html><html><head><meta charset="UTF-8">)
<!DOCTYPE html><html><head><meta charset="UTF-8">
(<title>bottomnav</title><link rel="stylesheet" href="css/icon.css">)
<title>bottomnav</title><link rel="stylesheet" href="css/icon.css">
(</head><body><ul class="bottom-menu">)
</head><body><ul class="bottom-menu">
(<li><a href="#">)
<li><a href="#">
(<div align="center"><span class="mini-text">home</span><br/>)
<div align="center"><span class="mini-text">home</span><br/>
(<img src="image/1.png" width="24px" height="24px" alt="">)
<img src="image/1.png" width="24px" height="24px" alt="">
(</div></a></li><li><a href="#">)
</div></a></li><li><a href="#">
(<div align="center"><span class="mini-text">sample</span><br/>)
<div align="center"><span class="mini-text">sample</span><br/>
(<img src="image/2.png" width="24px" height="24px" alt="">)
<img src="image/2.png" width="24px" height="24px" alt="">
(</div></a></li><li><a href="#">)
</div></a></li><li><a href="#">
(<div align="center"><span class="mini-text">calender</span><br/>)
<div align="center"><span class="mini-text">calender</span><br/>
(<img src="image/3.png" width="24px" height="24px" alt="">)
<img src="image/3.png" width="24px" height="24px" alt="">
(</div></a></li><li><a href="#">)
</div></a></li><li><a href="#">
(<div align="center"><span class="mini-text">mail</span><br/>)
<div align="center"><span class="mini-text">mail</span><br/>
(<img src="image/4.png" width="24px" height="24px" alt="">)
<img src="image/4.png" width="24px" height="24px" alt="">
(</div></a></li></ul></body></html>)
</div></a></li></ul></body></html>
(css start)
css start
(.mini-text{font-size:10px;})
.mini-text{font-size:10px;}
(ul.bottom-menu {)
ul.bottom-menu {
(position: fixed; left:0; bottom:0; width: 100%;)
position: fixed; left:0; bottom:0; width: 100%;
(height:42px; margin:0; padding:0; background-color:#f5f5f5;)
height:42px; margin:0; padding:0; background-color:#f5f5f5;
(border-top:2px solid #808080; border-bottom:2px solid #808080;)
border-top:2px solid #808080; border-bottom:2px solid #808080;
(z-index:30; })
z-index:30; }
(ul.bottom-menu li {)
ul.bottom-menu li {
(float:left; width:25%; background-color:#f5f5f5;)
float:left; width:25%; background-color:#f5f5f5;
(list-style-type:none; text-align:center;)
list-style-type:none; text-align:center;
(font-size:24px; })
font-size:24px; }
(.bottom-menu li a {)
.bottom-menu li a {
(display: block; color:#808080; padding-top:0px;)
display: block; color:#808080; padding-top:0px;
(padding-bottom:5px; line-height:10px;)
padding-bottom:5px; line-height:10px;
(text-decoration:none; })
text-decoration:none; }
(.bottom-menu li a:hover { color:#a9a9a9; })
.bottom-menu li a:hover { color:#a9a9a9; }