本章主要描述CSS中的background(背景)、border(边框);HTML标签img(图片)、ul>li(无序标签)、form(表单元素)
background(背景)
background:(英文、rgb、16进制)/url(图片链接)
background-position:-10px -10px;定位图片的位置
border(边框)
border:像素 风格 颜色；border:1px solid #ccc;
border-radius:10px; 设置圆角弧度，50%则为圆形
img(图片)
<img src="图片地址" alt="图片描述（在没有图片，获加载失败则显示的内容）">
ul>li(无序列表)
ul{list-style:none;}去除ul自带的样式
<ul>
<li>无需列表项01</li>
<li>无需列表项02</li>
<li>无需列表项03</li>
<li>无需列表项04</li>
<li>无需列表项05</li>
</ul>
form(表单元素)
包含input标签：input标签根据内部的type类型，来显示不同的效果，有文本、密码、多选、单选、按钮等。
textarea标签：文本域标签，禁止拉伸样式如下：resize:none;
<form action="">
<input type="text" placeholder="请输入用户名">
<input type="password" placeholder="请输入密码">
<button>登录</button>
</form>
收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
<style>
*{margin: 0;padding: 0;}
body{
background: #cccccc;
}
div{
width: 500px;
height: 300px;
background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552453080479&di=bd817238f13a08302aaa130be86a2adb&imgtype=0&src=http%3A%2F%2Fpic41.nipic.com%2F20140527%2F3920237_011115585197_2.png) no-repeat;
background-position: -350px -100px;
margin: 200px auto;
text-align: center;
border-radius: 10px;
}
img{width: 80px;height: 80px;border-radius:50%;margin: 20px;}
input{display:inline-block;width:300px;height: 35px;margin-bottom:15px;border: none;border-radius: 6px;padding: 0 20px;}
button{display: inline-block;width: 200px;border: none;height: 40px;background: #ccc;color:#fff;border-radius: 6px;}
button:hover{background: lightblue;}
</style>
</head>
<body>
<div>
<img src="http://imgsrc.baidu.com/imgad/pic/item/bba1cd11728b47104c5c00e9c9cec3fdfc0323a0.jpg" alt="">
<form action="">
<input type="text" placeholder="请输入用户名">
<input type="password" placeholder="请输入密码">
<button>登录</button>
</form>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
