<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> li{ width: 20px; height: 20px; background-color: darkgray; padding: 10px 20px; margin:5px; border-radius: 20%; list-style:none; float:left; } li:hover{ color:goldenrod; background-color:blue; } a{ width: 70px; height: 20px; background-color: darkgray; padding: 10px 20px; margin:5px; border-radius: 20%; float:left; } a:hover{ color:goldenrod; background-color:blue; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> <a class="fang">下一页</a> <a class="fang">最后一页</a> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .fang{ width: 500px; height: 350px; margin:10px; float:left; } .jie{ width: 500px; height: 350px; margin:30px; float:left; } .he{ margin:30px; } .yi{ margin:30px; border:1px solid; text-align:center; } .a{ text-indent:15px; } </style> </head> <body> <img src="http://static.firefoxchina.cn/img/201708/13_597fdfdc62c300.jpg" alt="jie" > <div class="yi"> <img class="fang" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2611079001,3896435225&fm=117&gp=0.jpg" alt="fang"> <div class="jie"> <form action="/index/" method="poet"> <p class="a">姓名：<input type="text" name="username" value=""></p> <p class="a">密码：<input type="password" name="passwd" value=""></p> <p>验证码：<input type="text" name="yanzhengma" value=""></p> <p class="he"> <input type="radio">记住密码 <a href=" ">忘记密码</a> </p> <input type="submit" value="登陆"> </form> </div> </div> </body> </html>
笔记
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } a{ text-decoration: none; } form{ width:260px; height: 300px; padding: 20px; border:1px solid black; margin:100px auto; } p{ width:260px; height: 40px; padding-top: 10px; } p.last{ width:200px; height: 40px; margin-left: 80px; } p.last input{ width:15px; height: 15px; } p.last span{ float: left; height: 15px; line-height: 15px; width:72px; font-size: 13px; margin-right: 5px; } p b{ color:red; } p input{ width:150px; height: 20px; float: left; padding-left:10px; } p input.yzm{ width:60px; } p span{ width:80px; height: 40px; float: left; text-align: right; } p a.btn{ display: block; width:100px; height: 30px; line-height: 30px; margin-left: 80px; background: red; font-size: 16px; color:#fff; font-family: "微软雅黑"; font-weight: bold; text-align: center; } </style> </head> <body> <form action=""> <p> <span> <b>*</b>用户名： </span> <input type="text" name="" id="" /> </p> <p> <span> <b>*</b>密码： </span> <input type="password" name="" id="" /> </p> <p> <span> <b>*</b>验证码： </span> <input type="text" name="" id="" class="yzm" /> <img src="" alt="" /> </p> <p class="last"> <span> <label><input type="checkbox" name="" id="" class="chbox" />自动登录</label> </span> <span><a href="#">忘记密码？</a></span> </p> <p> <a href="#" class="btn">登 录</a> </p> </form> </body> </html>