表单，电影排行，字体图标
2022-10-24 本文已影响0人
山猪打不过家猪
1.表单
image.png
-
例
image.png
image.png
<!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>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
form{
width: 350px;
background: #9cbc2b;
padding: 0 15px;
color:black;
border-radius: 10px;
height: 635px;
margin:100px auto;
}
section{
padding: 5px 5px 0 5px;
}
.step{
font-size: 14px;
font-weight: bold;
margin: 10px 0 ;
}
.form-line{
border-radius: 5px;
border-color: white;
border-width: 2px;
border-style: solid;
margin:5px 0;
padding:5px;
font-size:12px ;
padding-left:10px;
box-sizing: border-box;
}
.form-line span{
display:inline-block;
width: 110px;
font-size:13px;
}
.form-line input{
background: white;
border:none;
height: 25px;
border-radius: 3px;
width: 180px;
}
.form-line input[type=radio]{
width: 25px;
height: 12px;
}
.form-line textarea{
width: 180px;
height: 80px;
border: none;
border-radius: 3px;
vertical-align: top;
}
input.sub-btn{
border: none;
background: black;
display: block;
text-align: center;
color: white;
font-size: 18px;
width: 100px;
border-radius: 20px;
margin: 20px auto;
padding:3px 0;
}
</style>
</head>
<body>
<form action="">
<section>
<p class="step">第一步：</p>
<p class="form-line">
<span>姓名</span>
<input type="text" placeholder='输入姓名' >
</p>
<p class="form-line">
<span>电话</span>
<input type="text" placeholder='' >
</p>
<p class="form-line">
<span>facebook主页</span>
<input type="url">
</p>
</section>
<section>
<p class="step">第二步：</p>
<p class="form-line">
<span>详情地址</span>
<textarea placeholder="" ></textarea>
</p>
<p class="form-line">
<span>编辑</span>
<input type="text" >
</p>
</section>
<section>
<p class="step">第三步：</p>
<p class="form-line">
<span>银行卡类型</span>
<input type="radio" name ="cardType">借记卡
<input type="radio" name ="cardType">信用卡
<input type="radio" name ="cardType">VISA卡
</p>
<p class="form-line">
<span>卡号</span>
<input type="text" >
</p>
<p class="form-line">
<span>密码</span>
<input type="text" >
</p>
<p class="form-line">
<span>持卡人</span>
<input type="text" >
</p>
</section>
<p>
<input type="submit" value="提交" class="sub-btn">
</p>
</form>
</body>
</html>
-
补充表单的一些属性
image.png
2.电影排行榜
image.png
<!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>Document</title>
<style>
*{
margin:0;
padding: 0;
border: none;
list-style: none;
}
img{
height: 80px;
vertical-align: middle;
}
ul{
width: 600px;
margin: 50px auto;
border-radius: 4px;
}
ul li{
height: 90px;
line-height: 90px;
}
.first{
height: 40px;
line-height: 40px;
background: slateblue;
text-align: center;
border-radius: 3px;
}
ul li:nth-of-type(even){
background: #eee;
}
ul li div{
float: left;
text-align: center;
}
ul li div:nth-child(1){
width: 120px;
margin-left: 3px;
}
ul li div:nth-child(2){
width: 200px;
}
ul li div:nth-child(3){
width: 100px;
}
ul li div:nth-child(4){
width: 100px;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li class="first">
<div>海报</div>
<div>IMBD电影排行榜</div>
<div>评分</div>
<div>年份</div>
</li>
<li>
<div><img src="img/01.jpg" alt=""></div>
<div>No.1《肖申克的救赎》</div>
<div><span>9.1</span></div>
<div>1994</div>
</li>
<li>
<div><img src="img/01.jpg" alt=""></div>
<div>No.1《肖申克的救赎》</div>
<div><span>9.1</span></div>
<div>1994</div>
</li>
<li>
<div><img src="img/01.jpg" alt=""></div>
<div>No.1《肖申克的救赎》</div>
<div><span>9.1</span></div>
<div>1994</div>
</li>
<li>
<div><img src="img/01.jpg" alt=""></div>
<div>No.1《肖申克的救赎》</div>
<div><span>9.1</span></div>
<div>1994</div>
</li>
<li>
<div><img src="img/01.jpg" alt=""></div>
<div>No.1《肖申克的救赎》</div>
<div><span>9.1</span></div>
<div>1994</div>
</li>
</ul>
</div>
</body>
</html>
image.png
