html
1. 基本结构
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title>
<body>
</body>
</html>
2. css代码
<style>/*css样式*//* 1.设置容器样式，命名为boxname */.boxname{width: 100px;/* 设置容器宽度为100px */height: 50px;/* 设置容器高度为50px */background-color: yellow;/* 设置背景颜色为黄色 */ border: 2px solid blue;/* 设置边框：2px宽、实线、蓝色 */border-radius: 10px;/* 设置圆角半径为10px */ margin-left: auto;/* 左右间距都自动就是居中 */margin-right: auto;/* 水平方向居中（左右margin设为auto） */ margin-top: 20px;/* 距离上边界20px（设置上外边距） */ padding:10px;/* 内边距10px */}/* 2钮样式 */.btnname{display: inline-block;/* 设置为行内块元素 */width: 80px;height: 30px;background-color: green;color: white;/* 设置文字颜色为白色 */font-size: 16px;/* 设置字体大小为16px */text-align: center;/* 文字居中 */cursor: pointer;/* 鼠标悬停时显示为手型 */}.btnname:hover{/*:hover是悬停效果*/background-color: darkgreen;/* 鼠标悬停时背景颜色变为深绿色 */transform: scale(1.05);/* 悬停时轻微放大 */box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);/* 悬停时添加阴影 */}.btnname:active{/*:active是点击效果*/background-color: lightgreen;/* 鼠标点击时背景颜色变为浅绿色 */box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);/* 点击时阴影变小 *//* 水平方向偏移 0 像素（0px） *//* 向下方向偏移 2 像素（2px） *//* 边缘轻微模糊（4px） *//* rgb颜色为白色0，0，0 10% 透明度的黑色 */}/* 3.输入框样式 */.inputname{width: 100px;height: 30px;}.inputname:focus{/*focus是获取焦点效果*/border-color: blue;/* 获取焦点时边框颜色变为蓝色 */outline: none;/* 去掉默认的轮廓 */}</style>
3. html结构
<body><div class="boxname"><!--*设置容器且样式为boxname--><input type="text" class="inputname" placeholder="请输入内容"><!--输入框，输入类型是文本，样式为inputename，默认内容为请输入内容--><button class="btnname">按键文字</button><!--按钮，样式为btnname，默认内容为按键文字--> </div></body>