search
教育・子育て

ホームページ制作の見直し①

マんタ's icon'
  • マんタ
  • 2020/06/11 07:12

今日はとりあえず少し見やすいようにページを整頓していきます。

というかなんか見にくいのでちょっと調整・・・・・

ちょっと時間がかかってしまいましたが・・・

こんかいは追加した部分だけ載せておきます

<div class="main">
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
javaスクリプトが入るところ
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
</div>
<div class="menu">
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
メニューリストが入る
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
<br>
<br>
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
動作や説明注文記入欄
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

</div>

こんな感じです

表示すると

Content image

今回変わった部分は上の方ｗｗｗ

よくみると青い太めの戦が入っていますｗｗｗ

また、それぞれ文字の上にマウスを持って行くとピンク色が付きますね。

これはCSS（スタイルシートで設定できます）

今回追加した部分がこちら

.main{
float:center
width:500px
}
.manu{
float:center
width:160px
}
.menu ul{
border-top:10px solid #003366;
border-left:1px solid #003366;
border-right:1px solid #003366;
border-bottom:1px solid #003366;
margin:0;
padding:0;
}
.menu li{
list-style-image:none;
list-style-type:none;
margin:0;
line-height:130%;
text-align:center
}
.menu a{
display:block;
width:100%;
color:#003366
}
.menu a:hover{
background-color:#ff00ff
}
.serect{
background-color:#ff00ff
}

他のページも見ていきます。

とその前に他のページにも先ほどと同じものを記入しておきます。

<div class="main">
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～




～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

</div>
<div class="menu">
<br>
<br>
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～


～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～>

 

Content image
Content image

ちょっと見ずらいのですが・・・・・

 

最後にtopページのプログラムを載せておくので良ければ参考にしてください。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<div class="main">
<script type="text/javascript"src="script3.js">
</script>
<h1 align="center">マんタの商店仮へようこそ。</h1>
</div>
<div class="menu">
<ul class="list-centered">
<br>
<br>

<li class="select"><a href="top.html" >TOP</a></li>
<li><a href="form.html">お茶注文</a></li>
<li><a href="sab.html">プライズ商品注文</a></li>
</ul>
<p><img src="image/表紙.jpg" alt="表紙"/></p>
</div>
<h1 onmouseover="window.status'訪問いただきありがとうございます'"><a id="pagetop" name="pagetop"></h1>
</head>
<body>
<div class="page">
<p class="logo"><a href="rent.html"></a><a href="mori.html"></a></p>

<script type="text/javascript">  
<!--
 function tojiru(){
  window.close();
  }
-->
</script>
<p><input type="button"value="閉じる"onclick="tojiru()"></p>
</div>
</body>
</html>

JavaScriptのプログラムも載せておきます

function ocha1(){
   document.form1.sum1.value=1000*document.form1.na1.selectedIndex;
   document.form1.gou.value=parseInt(document.form1.sum1.value)+parseInt(document.form1.sum2.value)+parseInt(document.form1.sum3.value);
   document.form1.zei.value=parseInt(document.form1.gou.value)*0.1
   document.form1.All.value=parseInt(document.form1.gou.value)+parseInt(document.form1.zei.value)+parseInt(document.form1.sou.value);
   }
 function ocha2(){
   document.form1.sum2.value=300*document.form1.na2.selectedIndex;
   document.form1.gou.value=parseInt(document.form1.sum1.value)+parseInt(document.form1.sum2.value)+parseInt(document.form1.sum3.value);
   document.form1.zei.value=parseInt(document.form1.gou.value)*0.1
   document.form1.All.value=parseInt(document.form1.gou.value)+parseInt(document.form1.zei.value)+parseInt(document.form1.yusou.value);
   }
 function ocha3(){
   document.form1.sum3.value=500*document.form1.na3.selectedIndex;
   document.form1.gou.value=parseInt(document.form1.sum1.value)+parseInt(document.form1.sum2.value)+parseInt(document.form1.sum3.value);
   document.form1.zei.value=parseInt(document.form1.gou.value)*0.1
   document.form1.All.value=parseInt(document.form1.gou.value)+parseInt(document.form1.zei.value)+parseInt(document.form1.sou.value);
   }
 function kei4(){
   switch(document.form1.otodoke.selectedIndex){
    case 0:document.form1.sou.value=0;break;
    case 1:document.form1.sou.value=700;break;
    case 2:document.form1.sou.value=600;break;
    case 3:document.form1.sou.value=500;break;
    case 4:document.form1.sou.value=500;break;
    case 5:document.form1.sou.value=450;break;
    case 6:document.form1.sou.value=500;break;
    case 7:document.form1.sou.value=600;break;
    case 8:document.form1.sou.value=700;break;
    }
   document.form1.All.value=parseInt(document.form1.gou.value)+parseInt(document.form1.zei.value)+parseInt(document.form1.sou.value);
   }
  function check(){
 if(document.form1.shiharai[0].checked==false&&document.form1.shiharai[1].checked==false){
  alert("支払方法を選択してください。");
  return false;
  }  
 else if(document.form1.namae.value==""){
  alert("お名前を入力してください。");
  document.form1.namae.focus();
  return false;
  }
 else if(document.form1.yuubin.value==""){
  alert("郵便番号を入力してください。");
  document.form1.yuubin.focus();
  return false;
  }
 else if(document.form1.jusyo.value==""){
  alert("ご住所を入力してください。");
  document.form1.jusyo.focus();
  return false;
  }
 else if(document.form1.denwa.value==""){
  alert("電話番号を入力してください。");
  document.form1.denwa.focus();
  return false;
  }
 else if(document.form1.mail.value==""){
  alert("メールアドレスを入力してください。");
  document.form1.mail.focus();
  return false;
  }
 else{
  return true;
  }
 }
function kakunin(){
 if(confirm("入力した内容をクリアしますか?")==true){
  return true;
  }
 else{
  return false;
  }
 }

 

ここまでご覧いただきありがとうございました。

BYマんタ

 

JavaScript XHTMLCSS ホームページ topic-education-parenting
Article tip 0人がサポートしています
獲得ALIS: Article like 64.65 ALIS Article tip 0.00 ALIS
Article registration Article registration
マんタ's icon'
  • マんタ
  • @25kit6
4月突入！春らしくなってきたけどなんか寒い(＞＜)油断すると風邪ひきそうだから服装もそこそこにしないとね（＾Ｏ＾）
投稿者の人気記事
コメントする
コメントする
こちらもおすすめ！
Eye catch
クリプト

Bitcoin史 〜0.00076ドルから6万ドルへの歩み〜

大田コウキ 2021/04/06
Like token Tip token
947.13 ALIS
Eye catch
クリプト

約２年間ブロックチェ－ンゲームをして

kaya 2021/10/06
Like token Tip token
61.20 ALIS
Eye catch
他カテゴリ

ALISのシステム概観

ALISブロックチェーンブログ 2018/07/03
Like token Tip token
5.00 ALIS
Eye catch
教育・子育て

【科学】アリストテレスにデカルトにニュートンに…みな光に取り憑かれた～光学の発展～

KTAG 2021/09/25
Like token Tip token
23.75 ALIS
Eye catch
他カテゴリ

警察官が一人で戦ったらどのくらいの強さなの？『柔道編』　【元警察官が本音で回答】

ふたひい＠web3 2020/05/16
Like token Tip token
114.82 ALIS
Eye catch
他カテゴリ

BCAAは本当に必要なのか？徹底的調査

Jimmy 2020/07/05
Like token Tip token
1.20 ALIS
Eye catch
トラベル

無料案内所という職業

bansu 2019/06/11
Like token Tip token
84.20 ALIS
Eye catch
教育・子育て

【科学（化学）】進化に必要だった猛毒のガス～酸素～

KTAG 2021/02/11
Like token Tip token
25.63 ALIS
Eye catch
クリプト

NFT解体新書・デジタルデータをNFTで販売するときのすべて【実証実験・共有レポート】

otakucoin 2021/03/29
Like token Tip token
121.79 ALIS
Eye catch
他カテゴリ

機械学習を体験してみよう！（難易度低）

nonstop-iida 2020/03/04
Like token Tip token
124.82 ALIS
Eye catch
他カテゴリ

オランダ人が語る大麻大国のオランダ

Jimmy 2018/12/21
Like token Tip token
46.20 ALIS
Eye catch
クリプト

Bitcoinの価値の源泉は、PoWによる電気代ではなくて"競争原理"だった。

CryptoChick 2020/03/07
Like token Tip token
159.32 ALIS
アカウント登録でALISを楽しもう！
いいね、記事投稿でトークンやNFTを獲得できます