console
<body><div class="menu">
<ul>
<li style="background-color:green"><strong style="color:white">菜单<strong></strong></strong></li><li>
</li><li><a href="file:///D:/httpdemo/demo1.html#addr1">文本框</a></li>
<li><a href="file:///D:/httpdemo/demo1.html#addr2">容器</a></li>
<li><a href="file:///D:/httpdemo/demo1.html#addr3">表格</a></li>
</ul>
</div>
<div class="main">
<br>
<br>
<div class="class1">
<h1 style="text-shadow:5px 5px 5px grey">Title<a name="addr1"> </a></h1>
<p>html is too hard to learn.<br>you will get it if you press F12 button</p>
</div>
<div style="width:500px">
<div style="background-color:lavender">
<h1 style="text-align:center;margin:0;color:darkblue"><a name="addr2">容器</a></h1>
</div><div style="background-color:lightgray;width:350px;height:200px;float:left">
内容<br>blablablabla
</div><div style="background-color:lavenderblush;width:150px;height:200px;float:left">
<strong>菜单</strong>
<ul style="margin-top:5px;padding-left:25px">
<li>单击是没用的</li>
<li>双击是没用的</li>
<li>右键是没用的</li>
</ul>
</div><div style="background-color:lavender;clear:both">
<p style="text-align:end;margin-right:3px"><em>第一次CSS</em>
</p>
</div></div><div style="position:relative;left:60px;margin:40px">
<table style="border-collapse:collapse;letter-spacing:3px;text-align:center;border:2px solid darkblue;">
<tbody>
<tr>
<th colspan="2"><a name="addr3"> </a>
</th><th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr class="classtd">
<th rowspan="4" style="padding-left:7px;">
上<br>午
</th>
<th>第一节</th>
<td>1</td>
<td>2</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
</tr>
<tr>
<th>第二节</th>
<td>1</td>
<td>2</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
</tr>
<tr class="classtd">
<th>第三节</th>
<td>1</td>
<td>2</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
</tr>
<tr>
<th>第四节</th>
<td>1</td>
<td>2</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
</tr>
<tr class="classtd">
<th rowspan="2" style="padding-left:7px">
下<br>午
</th>
<th>第五节</th>
<td>1</td>
<td>2</td>
<td>星期三</td>
<td>星期四</td>
<td> </td>
</tr>
<tr>
<th>第六节</th>
<td>1</td>
<td>2</td>
<td>星期三</td>
<td>星期四</td>
<td> </td>
</tr>
</tbody></table>
</div>
<div class="im"></div>
<br>
</div><div class="rightpart">
<div class="circleclass">
<div class="insider">
</div>
</div></div></body>
body
{
margin:0;
}
.rightpart
{
position:absolute;
left:85%;
top:0px;
width:15%;
height:986px;
}
.circleclass
{
position:relative;
width:100px;
height:100px;
top:800px;
animation:myfirst 10s;
animation-iteration-count:infinite;
}
@keyframes myfirst
{
0%{top:0px}
50%{top:800px}
100%{top:0px}
}
.insider
{
width:100px;
height:100px;
border-radius:50px;
animation:mysecond 3s;
animation-iteration-count:infinite;
}
@keyframes mysecond
{
0%{background-color:red}
33%{background-color:yellow}
67%{background-color:blue}
100%{background-color:red}
}
.class1
{
background-color:lightgreen;
color:white;
margin:50px;
padding:20px;
width:200px;
height:200px;
margin-top:0px;
transition:width 2s,height 2s,background-color 2s,transform 2s,margin-bottom 2s;
}
.class1:hover
{
width:250px;
height:250px;
background-color:lightblue;
transform:rotate(1080deg);
margin-bottom:0px;
}
#id1
{
padding-left:5px;
}
th
{
padding:5px;
border:2px solid darkblue;
background-color:DarkTurquoise;
color:white;
}
td
{
background-color:paleturquoise;
border:1px solid darkblue;
}
.classtd td
{
background-color:white;
}
.menu ul
{
list-style-type:none;
margin:0;
padding:0;
width:120px;
background-color:lightgrey;
position:fixed;
height:100%;
overflow:auto;
}
.menu li a
{
display:block;
background-color:lightgrey;
text-decoration:none;
color:black;
}
.menu li a:hover
{
background-color:darkgray;
color:white;
}
.main
{
margin-left:130px;
}
.im
{
background-image:url(demo1_files/timg.jpg);
width:73px;
height:23px;
background-position:-75px -306px;
border-radius:5px;
}
.im:hover
{
background-position:-163px -306px;
}
@media screen and (max-width:600px)
{
.menu ul{display:none;}
.main {margin-left:5px;}
}