收藏
批改状态：未批改
老师批语：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录页面</title>
<style type="text/css">
*{margin:0px;padding: 0px;}/*内部样式*/
body{background: 255,255,255;}/*网页背景色*/
div{
width: 400px;
height: 350px;
margin: 200px auto;
background: rgba(66,66,66,0.2);/*背景色透明度*/
border-radius:10px;/*边框圆角*/
text-align: center;/*文本居中*/
}
img{
width: 80px;
border-radius:50%;
margin-top:50px; /*上边距*/
}
input{
width: 300px;
height: 30px;
margin-top: 15px;
border-radius: 6px;
border: none;/*去掉元素自带边框*/
padding-left: 15px;/*内边距向左横移*/
}
button{
border: none;
width: 200px;
height: 35px;
border-radius: 6px;
background: pink;
color: blue;
margin-top: 30px;
}
</style>
</head>
<body>
<div>
<img src="https://www.soideas.cn/uploads/allimg/111207/0J5304295-12.jpg">
<form >
<input type="text" name="" placeholder="请输入用户名..."><br>
<input type="password" name="" placeholder="请输入密码"><br>
<button>登录</button>
<!-- password:密码；placeholder：占位符 -->
</form>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2.-a.网页背景色(英文单词 16进制颜色 rgb颜色)三种表达方式。
background:red;
background: #C97474;
background: rgb(255,255,255)
background: rgba(129,44,44,0.2);背景色透明度，范围0-1之内。
background: url(图片地址) no-repeat;图片背景
no-repeat 不平铺（单独图片）
background-size: 100%;
background: linear-gradient(方向,起始颜色,终止颜色)背景色线性渐变；
b.背景图: background-image:url(图片地址)
background-image:url(https://www.soideas.cn/uploads/allimg/111207/0J5304295-12.jpg)
点击 "运行实例" 按钮查看在线实例
c.精灵图
(background-position:背景图片定位 x y坐标)
3.边框属性
border:宽度 样式 颜色; (样式:dotted:点线边框、dashed:虚线边框、solid:实线边框、double:两个边框)
border-top:1px dashed #ccc; border-left:1px dotted #ccc; border-right:1px solid #ccc; border-bottom:3px double #ccc
点击 "运行实例" 按钮查看在线实例
边框阴影：box-shadow: x y 阴影宽度 阴影颜色
4.表单元素
<input type="radio">单选框 <input type="checkbox">多选框 <input type="submit" value="提交"> <input type="button" value="搜索">
点击 "运行实例" 按钮查看在线实例
总结：这节课有很多的知识点，也是很基础的，后面前端也会用到，要熟悉运用。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
