收藏
批改状态：合格
老师批语：
记录3.12学习内容：background(背景)、border(边框)、table(表格)、ul(列表)、form(表单)。
1.background背景实例：
<html lang="en">
<head> <!-- 防止乱码 -->
<meta charset="UTF-8">
<!-- 禁止缩放，比例为1:1 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- IE8/9及以后的版本都会以最高版本IE来渲染页面 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>3.12背景</title>
<style>
*{margin:0;padding:0;}
/*1.背景控制
background(背景图，背景色:[英文单侧，16进制，rgb颜色])
*/
body{
/*背景色*/
/*background:red;
background:#ccc;
background:rgb(129,44,55);*/
/*背景色透明*/
/*background:rgba(129,44,55,0.3);*/
/*背景图*/
/*background:url(图片地址)*/
/* background:url(no-repeat;*/
}
/*背景色线性渐变*/
/*background:linear-gradient(渐变方向，起始颜色，终止颜色[可多个颜色] )*/
hr{
height:30px;
background:linear-gradient(to left,orange,green,purple);
}
/*精灵图*/
/*background-position:背景图片定位 x y坐标*/
div{
width:80px;
height:80px;
}
.pic1{
background：url(https://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/sign=7b39622d3dd12f2ece50a6667ff2f95a/9922720e0cf3d7ca7b1e3c8cf91fbe096a63a95b.jpg)-200px -38px;
}
.pic2{
background: url(https://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/sign=7b39622d3dd12f2ece50a6667ff2f95a/9922720e0cf3d7ca7b1e3c8cf91fbe096a63a95b.jpg) -285px -38px;
}
</style>
<body>
<hr>
<div class="pic1"></div>
<div class="pic2"></div>
</body>
</head>点击 "运行实例" 按钮查看在线实例
2.border边框实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>3.12边框</title>
<style>
*{margin: 0; padding: 0;}
/* 边框属性：border：宽度 样式，颜色 (样式：dotted：点线边框、dashed：虚线边框、solid：实线边框、double：双线边框)*/
div{
width: 200px;
height: 200px;
margin: 50px auto;
border: 1px solid #ccc;
/* 设置单边边框 */
border-top: 1px double #000;
}
/* 边框阴影：box-shadow:x y 阴影宽度，阴影颜色 */
p{
width: 100px;
height: 100px;
margin: 50px auto;
box-shadow: 2px 2px 20px #ccc;
/* 边框圆角 border-radius */
/* border-radius: 10px; */
/* 圆形 */
/* border-radius: 50%; */
/* 控制单边圆角 */
border-top-left-radius: 50%;
border-top-right-radius: 20px;
}
</style>
</head>
<body>
<div></div>
<p></p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
3.table,ul表格与列表：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表格与列表</title>
<style>
*{margin: 0; padding: 0;}
table{
width: 500px;
margin: 30px auto;
border-collapse: collapse; /*折叠td边框 */
}
td{border:1px solid #ccc;text-align: center}
li{list-style: none;}
</style>
</head>
<body>
<!-- 表格 -->
<!-- 表格由<table> 标签来定义，由<tr>表示行，<td>为一列 -->
<table>
<tr>
<td>一行一列</td>
</tr>
</table>
<table border="1px solid #ccc">
<tr>
<!-- 合并行 -->
<td rowspan="4">类型</td>
</tr>
<tr>
<!-- 合并列 -->
<td colspan="4">水果</td>
</tr>
<tr>
<td>苹果</td>
<td>苹果</td>
<td>苹果</td>
<td>苹果</td>
</tr>
<tr>
<td>苹果</td>
<td>苹果</td>
<td>苹果</td>
<td>苹果</td>
</tr>
</table>
<!-- 无序列表 -->
<!-- 无序列表由<ul></ul>标签定义。每个列表均有若干行由<li></li> -->
<ul>
<li>水果</li>
<li>水果</li>
<li>水果</li>
</ul>
</body>
</html>点击 "运行实例" 按钮查看在线实例
4.form表单：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>3.12 表单</title>
<style>
*{ margin: 0;padding: 0;}
</style>
</head>
<body>
<!-- 表单用于收集不同类型的用户输入 <form></form>表单是一个包含表单元素的区域 -->
<form action="url" method="GET/post">
<!-- <input> 元素：最重要的表单元素，该元素根据不同的type属性，可以变化为多种形态 -->
用户名：<input type="text"> <!--文本输入的单行输入 -->
密码：<input type="password" name=""> <!-- 密码字段，不可见 -->
<!-- 单选 -->
<input type="radio" name="">男
<input type="radio" name="">女
<!-- 多选框 -->
<input type="checkbox" name="">php
<input type="checkbox" name="">java
<input type="checkbox" name="">js
<input type="checkbox" name="">web
<!-- 文本域 -->
<!-- 样式难看，一般用div替代 -->
<textarea name="" id="" cols="30" rows="10"></textarea>
<!-- 定义提交表单数据按钮 -->
<!-- submit少用 -->
<input type="submit" name="" value="提交">
<input type="button" name="" value="搜索">
<button>提交</button>
</form>
</body>
</html>点击 "运行实例" 按钮查看在线实例
5.实例综合运用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>QQ</title>
<style>
*{margin: 0;padding: 0;}
body{background: #000;font-size: 12px;}
.Box{
width: 540px;
height: 400px;
margin: 200px auto;
text-align: center;
}
hr{
border: none;
width: 540px;
height: 130px;
background: linear-gradient(to right, #374AFF,#AE5DFF,#DD94E3);
}
.ui{
height:270px;
background-color: #fff;
}
img{
width: 80px;
height: 80px;
border-radius: 50%;
box-shadow: 2px 2px 10px rgb(185, 177, 177);
}
input{
border: 1px solid #ccc;
border-top: none;
border-left: none;
border-right: none;
outline:none;
padding-left: 10px;
}
.input{
width: 250px;
height: 35px;
margin-top:10px ;
}
.pic1{
display: inline-block;
width: 30px;
height: 40px;
background: url(style/qq.jpg) 0px -82px;
margin-right: 5px;
}
.pic2{
display: inline-block;
width: 30px;
height: 40px;
background: url(style/qq.jpg) 0px 50px;
margin-right: 5px;
}
input[type=checkbox]{
margin:10px 5px 0 5px;
width: 10px;
height: 10px;
}
button{
border: none;
width: 200px;
height: 35px;
background: #07BCFC;
margin-top: 10px;
border-radius: 6px;
}
a{
list-style: none;
color: #000;
text-decoration:none;
margin-left: 5px;
}
</style>
</head>
<body>
<div class="Box">
<hr>
<div class="ui">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1068658099,249559653&fm=26&gp=0.jpg" alt="">
<form action="">
<span class="pic1"></span><input class="input" type="text" placeholder="请输入账号"> <br>
<span class="pic2"></span> <input class="input" type="password" placeholder="请输入密码"><br>
<input type="checkbox" name="" id="">自动登陆
<input type="checkbox" name="" id="">记住密码
<a href="">找回密码</a>
<br>
<button>登陆</button>
</form>
</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
