PPC的C/C++和人工智能学习笔记
每一篇学习笔记,都只是为了更好地掌握和理解

Web前端(6)_CSS(3)练习

做一个登录页面的样式:

<!DOCTYPE html>
<html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=gbk;">
 <title>CSS练习</title>
 </head>
 <body style="text-align:center; min-width:300px; margin:0;">
 <div style="width:100%; background:#f6f6f6;border-bottom:1px solid #e6e6e6;
 height:34px; line-height:34px;">
 <div style="width:10%; height:34px; float:left; "></div>
 <div style="width:60%; float:left; text-align:left;">vsppc笔记站</div>
 <div style="width:20%; float:left; text-align:right;">
 <a href="" style="text-decoration:none; color:red;">问题解答</a>
 </div>
 <div style="width:10%; height:34px; float:right;"></div>
 <div style="clear:both;"></div>
 </div>
 
 <!--登录-->
 <div style="1000px; overflow:hidden; margin:0 auto;">
 <p><img src="img/1.png"/></p>
 <p style="font-size:26px; font-weight:bold; font-family:'微软雅黑';">登录我们的网站</p>
 <p style="color:#666;font-family:'微软雅黑';">在这里,你可以学到不少东西。</p>
 <p style="margin-top:20px;"><input type="text"/ placeholder="请输入用户名" style="width:200px; height:30px; 
 border-radius:5px; border:1px solid #ccc; padding-left:8px;"></p>
 <p><input type="password"/ placeholder="请输入密码" style="width:200px;height:30px;
 border-radius:5px;border:1px solid #ccc; padding-left:8px;"></p>
 <p><input type="submit" value="递交登录" style="width:210px;height:30px;
 background-color:red;color:white; border:0px;"/></p>
 <p style="width:210px;margin:0 auto;text-align:right; color:#666;">忘记密码?</p>
 <p><input type="button" value="注册帐号" style="width:210px;height:30px;
 background-color:white; border:1px solid #666;"/></p>
 <p style="color:#666;">版权所有:vsppc.com</p>
 </div>
 </body>
</html>

做一个注册页面的样式:

<!DOCTYPE html>
<html>
 <head>
 <meta http-equiv="content-type" content="text/html;charset=gbk;">
 <title>CSS练习2</title>
 <style type="text/css"><!--先搞个通配-->
 .{} <!--不知道为啥第1个css不起作用-->
 *{border:0px; padding:0px; margin:0px; font-size:14px;}
 .topli{float:left; height=33px;line-height:33px; margin-right:30px;}
 a{color:black;text-decoration:none;} <!--黑色,没有下划线-->
 a:hover{color:red;text-decoration:none;} <!--鼠标移到-->
 </style>
 </head>
 <body style="background-color:#F0F0F0; margin:0;">
 <!--最上面的top-->
 <div style="width:100%; height:67px; background-color:white;
 border-bottom:1px solid red;">
 <div style="width:600px;margin:0 auto; overflow:hidden;">
 <ul style="list-style-type:none;">
 <li class="topli"><img src="img/1.png" style="height:30px;"/></li>
 <li class="topli"><a href="#">C语言</a></li>
 <li class="topli"><a href="#">C++语言</a></li>
 <li class="topli"><a href="#">数字图像处理</a></li>
 <li class="topli"><a href="#">WEB前端</a></li>
 </ul>
 </div>
 </div>
 
 <!--中间的注册div-->
 <div style="width:420px;overflow:hidden;background-color:white; 
 margin:0 auto; margin-top:40px; padding:30px;">
 <p style="border-bottom:1px solid gray; height:30px;line-height:30px;text-align:center;">注册帐号
 <span style="padding-left:200px;">已有帐号,直接登录</span>
 </p>
 <p style="text-align:center;"><input type="text" placeholder="请输入帐号"
 style="border:1px solid #EAEAEA;width:300px;
 height:20px; margin-top:20px;padding:8px; border-radius:5px;"/></p>
 <p style="text-align:center;"><input type="password" placeholder="请输入密码"
 style="border:1px solid #EAEAEA;width:300px;
 height:20px; margin-top:20px;padding:8px; border-radius:5px;"/></p>
 <p style="text-align:center;"><input type="submit" value="递交注册"/ 
 style="background:red;color:white;border:1px solid #EAEAEA;
 width:320px;height:40px; margin-top:20px;padding:8px;"></p>
 </div>
 
 <!--下面的div-->
 <div style="width:100%;overflow:hidden;background-color:#444444;margin-top:40px;">
 <div style="width:600px;overflow:hidden;color:white;margin:0 auto;">
 <div style="width:300px;overflow:hidden;float:left;">
 <p style="margin-top:20px;"><img src="img/1.png"/></p>
 <p style="margin-top:20px;">站点地图 | 关于我们 | 意见反馈 | 免责声明</p>
 <p style="margin-top:20px;">合作伙伴</p>
 <p style="margin-top:20px;"><img src="img/1.png"/><img src="img/1.png"/></p>
 </div>
 <div style="width:280px;overflow:hidden;float:right;">
 <p>友情链接</p>
 <p style="color:gray;">vsppc c语言笔记 数字图像处理</p>
 <p style="color:gray;">版权所有:vsppc.com</p>
 <p style="color:gray;">公司地址:vsppc.com LTD.</p>
 <p style="color:gray;">公司网址:www.vsppc.com</p>
 </div>
 </div>
 </div>
 </body>
</html>

 

 

 

(2017-05-08 www.vsppc.com)

学习笔记未经允许不得转载:PPC的C/C++和人工智能学习笔记 » Web前端(6)_CSS(3)练习

分享到:更多 ()

评论 71

评论前必须登录!