讲给Android程序员看的前端系列教程(40集免费视频教程+源码)
版权声明
- 本文原创作者：谷哥的小弟
- 作者博客地址：http://blog.csdn.net/lfdfhl
综合练习：列表CSS
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表CSS练习</title>
<style type="text/css">
li {
/*清除列表的默认样式*/
list-style: none;
height: 26px;
line-height: 26px;
/*为li设置背景图像 */
background: url(img/book.png) no-repeat left center;
padding-left: 25px;
}
</style>
</head>
<body>
<h3>我的博客专栏</h3>
<ul>
<li>Mybatis研习录</li>
<li>C语言自学完备手册</li>
<li>MySQL数据库实操教程</li>
<li>Android自定义View系列经典教程</li>
</ul>
</body>
</html>
效果如下：
综合练习：表单CSS
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单CSS练习</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body,form,input {
padding: 0;
margin: 0;
border: 0;
}
form {
width: 327px;
height: 215px;
margin: 10px auto;
padding-top: 30px;
background: url(img/bg.jpg) no-repeat;
}
.content {
width: 250px;
height: 180px;
margin: 5px auto;
background: rgba(255, 255, 255, 0.5);
}
.content img {
padding: 10px 0 0 98px;
}
.content p {
width: 190px;
height: 19px;
background: #fff;
margin: 15px 0 0 15px;
padding: 2px;
}
.content input {
color: #757575;
font-size: 16px;
font-family: "微软雅黑";
}
.username {
padding-left: 20px;
background: url(img/username.png) no-repeat;
}
.password {
padding-left: 20px;
background: url(img/password.png) no-repeat;
}
.register {
margin: 10px 0 0 65px;
background: rgba(0, 0, 0, 0);
cursor: pointer;
}
.login {
margin: 10px 0 0 35px;
background: rgba(0, 0, 0, 0);
cursor: pointer;
}
</style>
</head>
<body>
<form action="#" method="post">
<div class="content">
<img src="img/icon.png" />
<p><input class="username" type="text" maxlength="6" /></p>
<p><input class="password" type="password" size="20" /></p>
<input class="register" type="button" value="注册" />
<input class="login" type="button" value="登录" />
</div>
</form>
</body>
</html>
效果如下：
转载：https://blog.csdn.net/lfdfhl/article/details/100667347
查看评论