day_1_***
ここでは、重要だと思うHTML&CSSの基本的な使い方をいくつか挙げています.
1.フォームのコントロール
テキストボックス:
2.CSSケースモデル
3.CSSクラスセレクタ
ラベルセレクタ、クラスセレクタ、idセレクタが同時に存在する場合、同じ属性名が同時に存在する場合、属性値の優先順位はidセレクタ>クラスセレクタ>ラベルセレクタの順である
完全なコードは次のとおりです.https://github.com/menglanyingfei/Java/tree/master/JavaWebTrain
1.フォームのコントロール
テキストボックス:
パスワードボックス:
ラジオボックス:
女a)value値bが必要)複数のラジオボックスのname属性値が一致しなければならないc)checkedデフォルト選択チェックボックス:
栄光ドロップダウンボックス:複数行テキストフィールド:ボタン:
<html>
<head>
<title>09.htmltitle>
<meta charset="UTF-8">
<style type="text/css">
#div_id {
width:800px;
height:600px;
border-style:solid;
background-color: red;
}
style>
head>
<body>
<div id="div_id">
<form action=" " method="post">
:<input type="text" name="username" value=" !" onfocus="abc()"/>
<br/>
:<input type="password" name="password"/>
<br/>
:<input type="radio" name="sex" value="female" />
<input type="radio" name="sex" value="male" checked="checked"/>
<br/>
:
<input type="checkbox" name="hobby" value="rongyao">
<input type="checkbox" name="hobby" value="chiji">
<input type="checkbox" name="hobby" value="lol">lol
<input type="checkbox" name="hobby" value="daota2"> 2
<input type="checkbox" name="hobby" value="taobao">
<input type="checkbox" name="hobby" value="qiaodaima" checked>
<br/>
:
<select name="province">
<option value=""> option>
<option value=""> option>
<option value=""> option>
select>
<select name="city">
<option value=""> option>
<option value=""> option>
<option value=""> option>
select>
<br/>
:
<textarea rows="5" cols="50">
textarea>
<br/>
<input type="submit" value=" "/>
<input type="button" value=" "/>
<button onclick="submit()"> button>
form>
div>
<script type="text/javascript">
function submit(){
//
}
function abc(){
document.getElementsByTagName("input")[0].value="";
}
script>
body>
html>
2.CSSケースモデル
<html>
<head>
<title>CSS .htmltitle>
<meta charset="UTF-8">
<style type="text/css">
/* CSS */
div{
width:500px;/* */
height:500px;/* */
border-style: groove;/* */
border-width: 20px;/* */
/*margin-top: 50px; */
/*margin-left:50px; */
/*margin:auto; */
/* margin:100px 200px 300px 500px; */
/*margin: 100px 200px 300px; */
margin:100px 200px; /* ( ) */
padding: 3em; /* */
border-color: red;
background-image: url("../image/topfocusb_bg1.gif");
}
style>
head>
<div>
div,
div>
<body>
body>
html>
3.CSSクラスセレクタ
ラベルセレクタ、クラスセレクタ、idセレクタが同時に存在する場合、同じ属性名が同時に存在する場合、属性値の優先順位はidセレクタ>クラスセレクタ>ラベルセレクタの順である
<html>
<head>
<title>11.htmltitle>
<meta charset="UTF-8">
<style type="text/css">
/* CSS */
/* */
p{
font-family: " ";
text-align: center;
font-size: 4em;
}
/*id
id
*/
#id1{
font-size:2em;/* */
color:red;/* */
background-color:yellow;/* */
font-style: italic;/* */
text-decoration: line-through;/* */
}
/*
. {
}
*/
.pstyle{
background-image: url("../image/topfocusb_bg1.gif");/* */
height:40px;/* */
background-repeat: repeat-x;/* */
}
style>
head>
<body>
<p id="id1" class="pstyle"> p>
<p class="pstyle"> p>
<p class="pstyle"> p>
<p class="pstyle"> p>
body>
html>
完全なコードは次のとおりです.https://github.com/menglanyingfei/Java/tree/master/JavaWebTrain