CSS练习 Day_02
程序员文章站
2022-06-16 20:18:54
...
作业1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
img{
margin-left: 42%;
}
p{
font-size: 30px;
margin-left: 38%;
}
div{
width: 330px;
height: 40px;
background-color: orangered;
color: white;
font-family: "仿宋";
line-height: 40px;
text-align: center;
margin-left: 35%;
margin-top: 10px;
}
</style>
</head>
<body>
<img src="../img/cts-200521170536888.jpg" />
<p>注册小米账号</p>
<table align="center" width="500px" >
<tr align="left">
<td>姓名：</td>
<td><input/></td>
</tr>
<tr align="left">
<td>姓别：</td>
<td>男<input type="radio" name="sex" checked="checked"/>
女<input type="radio" name="sex"/>
</td>
</tr>
<tr align="left">
<td>电话号码：</td>
<td><input type="text" name="phonenumber"/></td>
</tr>
<tr align="left">
<td>所在地区：</td>
<td><input type="text" name="address"/></td>
</tr >
<tr align="left">
<td>用户名：</td>
<td><input type="text" name="name"/></td>
</tr>
<tr align="left">
<td>密码：</td>
<td><input type="password" name="pswd"/></td>
</tr>
<tr align="left">
<td>上传头像：</td>
<td> <input type="file" placeholder="选择文件"/></td>
</tr>
</table>
<div>立即注册</div>
</body>
</html>
效果图
练习2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin-left: 0px;
}
#d1{
width: 100%;
height: 50px;
background-color: black;
margin-top: 0px;
top: 0px;
position:absolute;
}
#d1 li{
list-style-type: none;
color: grey;
display: inline-block;
margin-left: 10px;
font-size: 17px;
margin-bottom: 10px;
font-family: arial;
}
#d1 li span{
color: dimgray;
}
#d1 li font{
margin-left: 80px;
}
#d2 {
height: 50px;
background-color: black;
float: right;
right: 30px;
top: 0px;
position:absolute ;
}
#d2 li{
list-style-type: none;
color: grey;
display: inline-block;
margin-left: 10px;
font-size: 17px;
font-family: arial;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="d1">
<ul>
<li>小米商城<span> |</span></li>
<li>MIUI<span> |</span></li>
<li>loT<span> |</span></li>
<li>云服务<span> |</span></li>
<li>金融<span> |</span></li>
<li>有品<span> |</span></li>
<li>小爱开放平台<span> |</span></li>
<li>企业团购<span> |</span></li>
<li>资质证明<span> |</span></li>
<li>协议规则<span> |</span></li>
<li>下载app<span> |</span></li>
<li>SelectLocation</li>
<li><font>登录</font><span> |</span></li>
<li>注册<span> |</span></li>
<li>消息通知</li>
</ul>
</div>
<div id="d2">
<ul>
<img width="20px" height="25px" src="../img/cts-200521170617920.png" />
<li>购物车(0)</li>
</ul>
</div>
</body>
</html>
效果图