实例
<!DOCTYPE html>
<html>
<head>
<!--转换编码中文-->
<meta charset="UTF-8">
<!--页面的标题头-->
<title>web的第二节课</title>
<!--引入的icon-->
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<!--内部的css样式控制调整省略部分-->
<style type="text/css">
/*清楚浏览器四周的边框空白处*/
*{margin: 0;padding: 0;}
/*总结：
* 将body设置渐变background:linear-gradient
* 设置好lasy-box容器的宽高以及圆角以及上下边距 居中背景颜色透明rgba
* 阴影状态box-shadow
* 设置好form下的input 的宽高边距距离
* 按钮btn的宽高
* 设置块input的容器宽高并居中
* 图片的容器宽度100% 高度50 居中显示 上下边距
* 单独设置图片 lasy-img下的img宽高以及图片圆角为原型
* */
body{height:200px;background:linear-gradient(to right,#ADFF2F , #6CA6CD);}
.lasy-box{width: 500px;height: 300px;border-top-left-radius:10px;border-bottom-right-radius: 10px;margin: 100px auto;background:rgba(250,250,251,0.5);box-shadow: 2px 2px 20px #6CA6CD;}
form input{width: 308px;height: 35px;margin-top: 10px;}
button{width: 310px;height: 40px;}
.lasy-input-box{width: 310px;height: 110px;margin: 0 auto;}
.lasy-img{width: 100%;height: 50px; text-align: center;margin: 10px auto;}
.lasy-img img{width: 50px;height: 50px;border-radius:100% ;}
</style>
</head>
<body>
<div class="lasy-box">
<div class="lasy-img" style="padding-top: 10px;"><abbr title="这是一个头像"><img src="images/ilasy.jpg"/></abbr></div>
<div class="lasy-input-box">
<!--表单部分-->
<!--action 请求的地址-->
<!--method 请求的方式两种 get post-->
<form action="" method="">
<input type="text" placeholder="请输入用户名" /><br />
<input type="password" placeholder="请输入密码"/>
<button style="margin-top: 10px;">登陆</button>
</form>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--标题头-->
<title>第二节表单内容</title>
<!--内联样式-->
<style type="text/css">
/*清楚页面四周空白*/
*{margin:0;padding: 0; }
.lasy-form{width: 400px;height: 300px;margin: 50px auto;}
</style>
</head>
<body>
<div class="lasy-form">
<!--action请求的地址 method 请求的方式-->
<form action="" method="">
<!--type="text"文本格式 password 密码 button 按钮 checkbox 复选框（多选） 单选按钮radio textarea文本域 可写入文本 -->
<input type="text" placeholder="请输入用户名"/>
<input type="password" placeholder="请输入密码" /><br />
<button>登录</button><button>注销</button><button>注册</button><br />
<input type="checkbox" name="" />web
<input type="checkbox" name="" />php
<input type="checkbox" name="" />javascript<br />
<input type="radio" name="" />html
<input type="radio" name="" />css
<input type="radio" name="" />java<br />
<textarea name="" rows="10" cols="50"></textarea>
</form>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--标题头-->
<title>第二节表格</title>
<!--内联样式-->
<style type="text/css">
/*清楚页面四周空白*/
*{margin:0;padding: 0; list-style: none;}
table{width: 500px;margin: 50px auto;border: 1px solid #ccc;border-collapse: collapse;/*折叠边框*/}
td{width:30px;height: 10px;border: 1px solid #ccc; text-align: center; }
ul{width: 100px;margin: 0 auto;}
</style>
</head>
<body>
<table>
<!--tr定义行 td定义在每行中有多少列-->
<tr>
<td>商品总览表</td>
</tr>
</table>
<table>
<tr>
<!-- rowspan 合并行合并了4个行 -->
<td rowspan="4">国产</td>
</tr>
<tr>
<!-- colspan 合并列 合并了4个列 -->
<td colspan="4">商品/价格</td>
</tr>
<tr>
<td>小米</td>
<td>华为</td>
<td>oppo</td>
<td>中兴</td>
</tr>
<tr>
<td>2999</td>
<td>3000</td>
<td>2999</td>
<td>2999</td>
</tr>
</table>
<!--ul无序列表-->
<!--li列表中的项目-->
<ul>
<li>php</li>
<li>java</li>
<li>Python</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--标题头-->
<title>第二节背景</title>
<!--内联样式-->
<style type="text/css">
/*清楚页面四周空白*/
/*background:背景控制颜色图片
* 背景颜色可以填写 颜色的英文 或 16进制 以及rgb颜色
* 背景色透明background：rgba（xxx，xxx，xxx，透明0.2）
* background-size：100%背景颜色的大小
* background-image:url(图片地址http:xxxxxxxxx)
* background-position:背景图片定位 x y坐标(精灵图)
* background-repeat: no-repeat;不平铺
* hr的效果 background: linear-gradient(方向,开始颜色,结束颜色)
* background: url(images/p2.jpg) -200px 0;
* background url(图片地址) x轴向左移动负值 y轴 上下移动负值
*/
*{margin:0;padding: 0; }
hr{height: 10px;background: linear-gradient(to right,red,green);}
/*定义div的宽高为80px*/
div{width: 80px;height: 80px;}
.lasy-ling1{background: url(images/p2.jpg) -200px 0;}
.lasy-ling2{background: url(images/p2.jpg) -300px -360px;}
p{width: 20px;height: 20px;background: url(images/p1.jpg) -75px -132px;}
</style>
</head>
<body>
<hr />
<div class="lasy-ling1"></div>
<div class="lasy-ling2"></div>
<p></p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
