上一节提到如何显示多件商品在一个小的界面内,代码如下:html>
溢出处理作业#img-list{
/* 宽度,高度 */
width:500px;
height:150px;
/*边框*/
border:1px solid #000;
/*横向溢出使用滚动条 (auto || scroll)*/
overflow:auto;
}
#img-list>p{
/* 宽度,高度 背景色 */
width:800px;
height:100px;
}
#img-list>p>img{
width:100px;
/*鼠标悬停之前，增加边框，颜色设置为透明*/
border-radius:5px;
/*border:2px solid transparent;*/
}
/*鼠标悬停时，显示边框*/
#img-list>p>img:hover{
border-color:#f00;
box-shadow:3px 3px 0px 0px #ddd;
}
运行结果如下所示:
这一节写一个注册页面:
代码如下:html>
新用户注册#container{
width:600px;
height:500px;
background-color:#434343;
padding:10px 10px;
color:white;
box-sizing:border-box;
}
#title>span{
font-size:18px;
}
#load{
text-decoration:none;
color:white;
font-size:18px;
margin-left:200px;
}
新用户注册
直接登录
用户名：
运行结果如下:
