制作个性化的博客登陆界面的实例教程

个性化登陆界面的方法有两种，第一种是替换登陆背景，这个算是小型个性化吧：

在/WP-管理员/图像找到登录-bkg-tile.gif和登录-bkg-bottom_new.gif两张图片，用自己定制的图片（大小最好相同)替换就行了。

当然这个不能改变登陆框的布局，显然对于追求完美的处女座来说是不够的，于是第二种方法出现了：

首先在functions.php中添加一个函数：

//主题的自定义登录//文件夹主题/主题名称/自定义登录/函数自定义登录(){echo 'link rel='样式表type='text/css' href=' ' .get _ bloginfo(' template _ directory ')，'/custom-log in。CSS '/'；}add_action('login_head '，' custom _ log in ')；通过一个简单的"勾子",现在你的主题已经可以开启个性化登陆界面了，接下来要做的，是为你的登陆界面写钢性铸铁样式，命名为自定义-login.css，然后再把钢性铸铁文件放到主题文件夹里就行了。

以下是本站的css，供大家参考（由于我的自定义-login.css是放在主题文件夹的子文件里，所以背景里的全球资源定位器(统一资源定位符)要写成如./images/login-bg-body.jpg的形式，熟悉计算机科学硕士的人就会知道'.'代表上一级目录)

/* 页面css */html，body,#wpbody，1 .表格pre{background: #ffffff url('./图片/登录-BG-正文。jpg’)；font-size : 13px字体系列：微软雅黑，宋体；} a { text-decoration : none}body.login，body { border : none } h1 a { display : none }/*登陆框主体部分css */#login{background: url('./images/log in-BG。jpg’)不重复；宽度： 650像素；高度： 500像素；相对位置：余量： 50px自动；} # loginform { padding-left : 110 px；向右浮动：左边框： 2px实心# E3 E3 D3 } #登录信息#用户_登录，#登录信息#用户_密码{边框： 2px虚线# 66666 }表单{ width: 280px？高度： 166像素；padding: 45px 0px 0px 0px？背景： URL()-不重复；余量： 60px 0 0 0边界：无；-moz-边界-半径： 0；-web套件-边框-半径： 0；边界半径： 0;蚊子盒子阴影：无；-webkit-box-shadow:无；盒子阴影：无；}#user_pass，#user_login，# user _ email { width : 190 pxh three : 20px边距-底部： 10px}/* 登陆框各组成CSS */label { font-size : 13px；color: # fff}表单。健忘标签{ font-size : 13px？color: # 666666 }。登录#nav a{color: #66666！重要；}input.button-primary，button.button-primary，a . button-primary {背景：无；border:无；文本-阴影：无；保证金： 0；padd : 0；font-size : 13px字体系列：微软雅黑，宋体；}表单。提交输入{ color : # 66666 } input . button-primary :激活，button.button-primary:激活，a.button-primary:激活{ background: none}/*其他*/# nav { margin : 0；padd : 0；绝对位置：文本-阴影：无；}送上效果图

看到效果后就会发现，虽然我们不能改变页面的超文本标记语言元素，但包括登陆框结构在内的整个登陆页面都可以自定义，只要你知道每个部分的钢性铸铁选择器名称即可。所以只要用萤火虫等工具查看所有钢性铸铁的编号或同学们，就可以制作出一个完全自己作主的登陆界面。