css_html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
@font-face {
font-family:myfont;
src: url("fonts/chunkfive.ttf");
}
.ms {
letter-spacing: 10px;
font-family: 仿宋;
color: silver;
width: 320px;
height: 60px;
border: 5px dashed red;
text-align: center;
line-height: 60px;
margin: 10px auto;
text-decoration: underline;
text-shadow: 2px -2px blueviolet;
font-size: 200%;
font-stretch: condensed;
font-style: oblique;
/* font: "仿宋" 200% condensed oblique; */
}
.one {
text-indent: 1.25rem;
}
p {
font-family: "楷体";
font-size: 30px;
}
h3 {
/* block,inline-block,none,inline(默认值)。值为none时内容不显示且不占空间 */
display: block;
font-family: myfont;
color: #D3D3D3;
text-transform: uppercase;
}
.box {
border: 4px double green;
border-left-color: blue;
border-right-color: red;
border-radius: 10px 20px 30px 40px;
width: 50%; /* 相对于调用时其父级的百分比 */
margin: 50px auto;
margin-top: 10px;
text-align: center;
background-color: #C0C0C0;
background-image: url(images/a1.jpg);
background-repeat: no-repeat no-repeat;
/* background: url(images/a1.jpg) #C0C0C0 no-repeat no-repeat; */
}
#photo {
border: 20px solid white;
border-radius: 70px 70px 70px 70px;
border-image: url(images/icon-plus.png) 10 round;
opacity: 0.5;
}
#icon {
width: 100px;
height: 100px;
/* background-image: url(images/icons.jpg); */
/* background-position: -570px -280px; */
background: url(images/icons.jpg) -570px -280px;
margin: 20px auto;
}
h2 {
/* visibility: visible;hidden;值为hidden时，内容不显示但仍占页面空间 */
visibility: hidden;
}
#adv {
width: 320px;
height: 135px;
background-color: #D3D3D3;
background-image: url(images/www.gif);
position: fixed;
right: 5px;
top: 100px;
}
/* position属性的取值：static静态定位，默认值；relative相对定位，相对于父级位置；absolute绝对定位，相对于父级位置；fixed固定定位，相对于浏览器位置*/
</style>
</head>
<body background="images/324466.jpg">
<div id="adv">
广告
<button style="float: right">关闭</button>
</div>
<div id="icon"></div>
<h2>goodgoodstudydaydayup</h2>
<img id="photo" src="images/bird.gif" width="100" height="100">
<h1 class="ms">静夜思</h1>
<hr>
<div class="box">
<p class="one">床前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
</div>
<h3>hello world</h3>
</body>
</html>
form_.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
<style>
/* 属性选择器 */
/* 后代选择器 */
/* form>input 儿子选择器 */
form input[type=text], form input[type=password] {
border: none;
outline: none;
border-bottom: 1px dashed lightgray;
}
/* form+input 相邻兄弟选择器 */
/* form~input 兄弟选择器 */
form~input[type=text] {
outline: none;
border: 1px solid lightgrey;
}
form~input[type=text]:focus {
outline: none;
border: 1px solid purple;
}
.button {
display: inline-block;
width: 80px;
height: 40px;
background-color: red;
}
</style>
</head>
<body background="images/timg.jpg">
<center>
<form action="" method="post" enctype="multipart/form-data">
<fieldset>
<legend>用户基本信息</legend>
<p>
用户名：
<input type="text" name="user" maxlength="12" placeholder="6-12位" required>
</p>
<p>
密码：
<input type="password" name="pwd">
</p>
<p>
再次确认：
<input type="password" name="repwd">
</p>
<p>
性别：
<input type="radio" name="sex" value="1" checked>男
<input type="radio" name="sex" value="0" readonly>女
</p>
</fieldset>
<p>
爱好：
<input type="checkbox" name="babit" value="阅读" checked>阅读
<input type="checkbox" name="babit" value="旅游">旅游
<input type="checkbox" name="babit" value="游戏">游戏
<input type="checkbox" name="babit" value="电影">电影
</p>
<p>
头像：
<input type="file" multiple>
</p>
<p>
<select name="prov">
<option value="10000">成都</option>
<option value="20000">西安</option>
<option value="30000">上海</option>
<option value="40000" selected>深圳</option>
</select>
</p>
<p>
生日：
<input type="date" name="birt"/>
</p>
<p>
邮箱：
<input type="email" name="email"/>
</p>
<p>
手机：
<input type="tel" name="tel"/>
</p>
<p>
===:
<input type="image" src="images/a1.jpg"><br> <!-- 以图片作为提交按钮 -->
<input type="hidden" name="aaa" value="bbb"> <!--影藏字段，对用户不显示，用于内部区分，如地区 -->
</p>
<p>
自我介绍：
<textarea rows="10" cols="10" name="intr" placeholder="请输入"></textarea> <!-- 不能写成<textarea rows="10" cols="10" /> -->
</p>
<p>
<input class="button" type="submit" value="确定提交" />
<input type="reset" value="重置" />
<!-- hidden image -->
</p>
</form>
其他<input type="text" />
</center>
</body>
</html>
practice.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.a {
width: 400px;
height: 400px;
background-color: red;
}
.b {
width: 300px;
height: 300px;
background-color: green;
}
.c {
width: 200px;
height: 200px;
background-color: blue;
}
.b,.c {
position: relative;
left: 50px;
top: 50px;
}
.d {
left: 450px;
top: 50px;
background: #FF0000;
z-index: 100;
}
.e {
left: 550px;
top: 150px;
background: #FFFF00;
z-index: 100;
}
.f {
left: 650px;
top: 200px;
background: #0000FF;
z-index: 30;
/* z-index值越大，越优先显示在上面 相同的话看调用的先后顺序，在上面abc类中时由于子类覆盖父类，z-index无效*/
}
.d,.e,.f {
position: absolute;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="a">
<div class="b">
<div class="c"></div>
</div>
</div>
<div class="d"></div>
<div class="e"></div>
<div class="f"></div>
</body>
</html>
table_.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
table {
/* border-collapse: collapse; */
}
td, th {
border-bottom: 1px solid black;
border-right: 1px solid black;
text-align: center;
empty-cells: hide;
}
.bottom>td {
border-bottom: none;
}
.right {
border-right: none;
}
thead>tr {
background-color: lightgoldenrodyellow;
}
.even {
background-color: lightgrey;
}
.odd {
background-color: lightblue;
}
th:first-child {
border-top-left-radius: 10px;
}
th:last-child {
border-top-right-radius: 10px;
}
tr:last-child>td:first-child {
border-bottom-left-radius: 10px;
}
tr:last-child>td:last-child {
border-bottom-right-radius: 10px;
}
.number li {
/* list-style-type: none; */
list-style-position: inside;
list-style-image: url(images/add.gif);
width: 120px;
height: 30px;
background-color: #006633;
color: white;
text-align: center;
margin: 5px 5px;
/* display: inline; */
float: left;
/* 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。 */
}
.number li:hover {
color: orange;
cursor: pointer;
}
</style>
</head>
<body>
<!-- table>tr*4>td*5 -->
<table>
<caption>学生考试成绩表</caption>
<thead>
<tr>
<th class="lt" width="120">姓名</th>
<th width="100">语文</th>
<th width="100">数学</th>
<th width="100">英语</th>
<th width="100" class="right">体育</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>王大锤</td>
<td>90</td>
<td>80</td>
<td></td>
<td class="right">60</td>
</tr>
<tr class="even">
<td>王大锤</td>
<td>90</td>
<td></td>
<td>70</td>
<td class="right">60</td>
</tr>
<tr class="bottom odd">
<td>王大锤</td>
<td>90</td>
<td>80</td>
<td>70</td>
<td class="right">60</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
<ul class="number">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</body>
</html>
