🌈据说,看我文章时 关注、点赞、收藏 的 帅哥美女们 心情都会不自觉的好起来。
前言:
🧡作者简介:大家好我是 user_from_future ,意思是 “ 来自未来的用户 ” ,寓意着未来的自己一定很棒~
✨个人主页:点我直达,在这里肯定能找到你想要的~
👍专栏介绍:Html+Css+JS / jQuery小型网页综合实战 ,一个专注于分享网页制作实例的专栏~
专栏文章直链:
【网页制作】jQuery操作css实现设置箭头图片

制作要求
合理使用css布局完成页面的制作。
制作效果图

参考源代码
目录结构
└──网页文件夹
├── 1.jpg
├── register0.html
├── register1.html
└── register2.html
1.jpg

register0.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
margin: 20px 40px;
}
a {
text-decoration: none;
}
#main {
height: 25px;
width: 640px;
line-height: 25px;
}
#main>span {
float: left;
color: #59AFE4;
font-size: 20px;
margin-right: 5px;
}
table {
line-height: 40px;
margin-top: 20px;
}
table td>div {
height: 22px;
font-size: 14px;
line-height: 22px;
}
table span,
a {
float: left;
height: 22px;
color: #59AFE4;
line-height: 22px;
}
table th {
width: 90px;
height: 40px;
font-size: 15px;
padding: 0 10px;
text-align: right;
line-height: 40px;
font-weight: normal;
}
table td {
width: 320px;
height: 40px;
text-align: left;
line-height: 40px;
}
table input {
width: 300px;
height: 30px;
text-align: left;
line-height: 30px;
border-radius: 5px;
font-weight: normal;
background-color: #FFF;
}
table input[type="radio"] {
width: 15px;
height: 15px;
}
table select {
height: 24px;
color: #59AFE4;
}
table option {
height: 24px;
color: #000;
}
table input[type="checkbox"] {
width: 15px;
height: 15px;
}
table input[type="button"] {
color: #FFF;
width: 180px;
height: 60px;
font-size: 24px;
font-weight: bold;
line-height: 60px;
text-align: center;
border-radius: 10px;
border-style: initial;
background-image: linear-gradient(#a5e486, #59ad42);
}
</style>
</head>
<body>
<div id="main">
<span>|</span>
<div>注册账号</div>
<hr color="#DDD" />
</div>
<table>
<tr>
<th>昵称</th>
<td><input type="text"></td>
<td>
<div>
请输入昵称<br /><span><a href="#">试试新功能,让手机号变QQ号!</a></span>
</div>
</td>
</tr>
<tr>
<th>密码</th>
<td><input type="password" /></td>
<td></td>
</tr>
<tr>
<th>确认密码</th>
<td><input type="password" /></td>
<td></td>
</tr>
<tr>
<th>性别</th>
<td>
<input type="radio" name="sex" value="1" checked="checked" /> 男
   <input type="radio" name="sex" value="0" /> 女
</td>
<td></td>
</tr>
<tr>
<th>生日</th>
<td>
<select style="width: 60px;">
<option value="公历">公历</option>
<option value="农历">农历</option>
</select>
<select style="width: 100px;">
<option value="disabled">年</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
</select>
<select style="width: 60px;">
<option value="disabled">月</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select style="width: 60px;">
<option name="" value="disabled">日</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</td>
<td></td>
</tr>
<tr>
<th>所在地</th>
<td>
<select style="width: 95px;">
<option value="中国">中国</option>
<option value="美国">美国</option>
<option value="韩国">韩国</option>
<option value="俄罗斯">俄罗斯</option>
<option value="新加坡">新加坡</option>
<option value="意大利">意大利</option>
<option value="泰国">泰国</option>
</select>
<select style="width: 95px;">
<option value="北京">北京</option>
<option value="湖南">湖南</option>
<option value="湖北">湖北</option>
<option value="上海">上海</option>
<option value="重庆">重庆</option>
<option value="天津">天津</option>
<option value="海南">海南</option>
</select>
<select style="width: 95px;">
<option value="东城">东城</option>
<option value="平谷">平谷</option>
<option value="西城">西城</option>
<option value="朝阳">朝阳</option>
<option value="大兴">大兴</option>
<option value="昌平">昌平</option>
<option value="石景山">石景山</option>
</select>
</td>
<td></td>
</tr>
<tr>
<th style="height: 60px;">验证码</th>
<td>
<input type="text" style="width: 180px; height: 54px;">
<img src="1.jpg" style="height: 60px; float: right;" />
</td>
<td>
<span>
<a href="#" style="line-height: 60px;">点击换一张</a>
</span>
</td>
</tr>
<tr>
<th></th>
<td>
<div><input type="checkbox" checked="checked" />同时开通QQ空间</div>
<input type="checkbox" checked="checked" />我已阅读并同意相关服务条款和隐私政策
</td>
<td></td>
</tr>
<tr>
<th></th>
<td>
<input type="button" value="立即注册" />
</td>
<td></td>
</tr>
</table>
</body>
</html>
这是第一遍设计页面,结果图可能有点丑陋:

register1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
margin: 20px 40px;
}
a {
text-decoration: none;
}
#main {
height: 25px;
width: 640px;
line-height: 25px;
}
#main>span {
float: left;
color: #59AFE4;
font-size: 20px;
margin-right: 5px;
}
table {
line-height: 40px;
margin-top: 20px;
}
table td>div {
height: 22px;
font-size: 14px;
line-height: 22px;
}
table span,
a {
float: left;
height: 22px;
color: #59AFE4;
line-height: 22px;
}
table th {
width: 90px;
height: 40px;
font-size: 15px;
padding: 0 10px;
text-align: right;
line-height: 40px;
font-weight: normal;
}
table td {
width: 320px;
height: 40px;
text-align: left;
line-height: 40px;
}
table input {
width: 300px;
height: 30px;
text-align: left;
line-height: 30px;
border-radius: 5px;
font-weight: normal;
border-style: groove;
border-color: lightgray;
background-color: #f3f9fe;
}
table input:focus {
background-color: #FFF;
border-color: #59AFE4;
}
table input[type="radio"] {
width: 15px;
height: 15px;
}
table select {
height: 24px;
color: #59AFE4;
}
table option {
height: 24px;
color: #000;
}
table input[type="checkbox"] {
width: 15px;
height: 15px;
}
table input[type="button"] {
color: #FFF;
width: 180px;
height: 60px;
font-size: 24px;
font-weight: bold;
line-height: 60px;
text-align: center;
border-radius: 10px;
border-style: initial;
background-image: linear-gradient(#a5e486, #59ad42);
}
</style>
</head>
<body>
<div id="main">
<span>|</span>
<div>注册账号</div>
<hr color="#DDD" />
</div>
<table>
<tr>
<th>昵称</th>
<td><input type="text"></td>
<td>
<div>
请输入昵称<br /><span><a href="#">试试新功能,让手机号变QQ号!</a></span>
</div>
</td>
</tr>
<tr>
<th>密码</th>
<td><input type="password" /></td>
<td></td>
</tr>
<tr>
<th>确认密码</th>
<td><input type="password" /></td>
<td></td>
</tr>
<tr>
<th>性别</th>
<td>
<input type="radio" name="sex" value="1" checked="checked" /> 男
   <input type="radio" name="sex" value="0" /> 女
</td>
<td></td>
</tr>
<tr>
<th>生日</th>
<td>
<select style="width: 60px;">
<option value="公历">公历</option>
<option value="农历">农历</option>
</select>
<select style="width: 100px;">
<option value="disabled">年</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
</select>
<select style="width: 60px;">
<option value="disabled">月</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select style="width: 60px;">
<option name="" value="disabled">日</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</td>
<td></td>
</tr>
<tr>
<th>所在地</th>
<td>
<select style="width: 95px;">
<option value="中国">中国</option>
<option value="美国">美国</option>
<option value="韩国">韩国</option>
<option value="俄罗斯">俄罗斯</option>
<option value="新加坡">新加坡</option>
<option value="意大利">意大利</option>
<option value="泰国">泰国</option>
</select>
<select style="width: 95px;">
<option value="北京">北京</option>
<option value="湖南">湖南</option>
<option value="湖北">湖北</option>
<option value="上海">上海</option>
<option value="重庆">重庆</option>
<option value="天津">天津</option>
<option value="海南">海南</option>
</select>
<select style="width: 95px;">
<option value="东城">东城</option>
<option value="平谷">平谷</option>
<option value="西城">西城</option>
<option value="朝阳">朝阳</option>
<option value="大兴">大兴</option>
<option value="昌平">昌平</option>
<option value="石景山">石景山</option>
</select>
</td>
<td></td>
</tr>
<tr>
<th style="height: 60px;">验证码</th>
<td>
<input type="text" style="width: 180px; height: 54px;">
<img src="1.jpg" style="height: 60px; float: right;" />
</td>
<td>
<span>
<a href="#" style="line-height: 60px;">点击换一张</a>
</span>
</td>
</tr>
<tr>
<th></th>
<td>
<div><input type="checkbox" checked="checked" />同时开通QQ空间</div>
<input type="checkbox" checked="checked" />我已阅读并同意相关服务条款和隐私政策
</td>
<td></td>
</tr>
<tr>
<th></th>
<td>
<input type="button" value="立即注册" />
</td>
<td></td>
</tr>
</table>
</body>
</html>
相比于第一遍设计的页面,这次多了输入框的背景,以及点击后背景变白的效果,主要就是设置了 :focus 伪类,基本上是普通人设计的极限了,效果图如下:

register2.html
再看效果图,单选复选按钮居然是绿色的,这我肯定不服了,强制给他整绿:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
margin: 20px 40px;
}
a {
text-decoration: none;
}
#main {
height: 25px;
width: 640px;
line-height: 25px;
}
#main>span {
float: left;
color: #59AFE4;
font-size: 20px;
margin-right: 5px;
}
table {
line-height: 40px;
margin-top: 20px;
}
table td>div {
height: 22px;
font-size: 14px;
line-height: 22px;
}
table span,
a {
float: left;
height: 22px;
color: #59AFE4;
line-height: 22px;
}
table th {
width: 90px;
height: 40px;
font-size: 15px;
padding: 0 10px;
text-align: right;
line-height: 40px;
font-weight: normal;
}
table td {
width: 320px;
height: 40px;
text-align: left;
line-height: 40px;
}
table input {
width: 300px;
height: 30px;
text-align: left;
line-height: 30px;
border-radius: 5px;
font-weight: normal;
border-style: groove;
border-color: lightgray;
background-color: #f3f9fe;
}
table input:focus {
background-color: #FFF;
border-color: #59AFE4;
}
.radio {
top: 0;
left: 0;
margin: 0;
width: 15px;
height: 15px;
position: absolute;
border-radius: 100%;
vertical-align: middle;
background-color: #77d444;
}
.radio_bg {
width: 15px;
height: 15px;
line-height: 40px;
position: relative;
border-radius: 100%;
display: inline-block;
border: 3px solid #DDD;
vertical-align: inherit;
}
table input[type="radio"] {
top: 0;
left: 0;
margin: 0;
opacity: 1;
z-index: 100;
width: 100%;
height: 100%;
position: absolute;
}
table input[type="radio"]:checked {
opacity: 0; /* 隐藏按钮 */
}
table select {
height: 24px;
color: #59AFE4;
}
table option {
height: 24px;
color: #000;
}
.checkbox {
top: 0;
left: 0;
margin: 0;
width: 15px;
height: 15px;
color: #77d444;
font-size: 16px;
position: absolute;
text-align: center;
font-weight: bolder;
vertical-align: middle;
}
.checkbox_bg {
width: 15px;
height: 15px;
position: relative;
display: inline-block;
border: 3px solid #DDD;
vertical-align: inherit;
}
table input[type="checkbox"] {
top: 0;
left: 0;
margin: 0;
opacity: 1;
z-index: 100;
width: 106%;
height: 106%;
position: absolute;
}
table input[type="checkbox"]:checked {
opacity: 0; /* 隐藏按钮 */
}
table input[type="button"] {
color: #FFF;
width: 180px;
height: 60px;
font-size: 24px;
font-weight: bold;
line-height: 60px;
text-align: center;
border-radius: 10px;
border-style: initial;
background-image: linear-gradient(#a5e486, #59ad42);
}
</style>
</head>
<body>
<div id="main">
<span>|</span>
<div>注册账号</div>
<hr color="#DDD" />
</div>
<table>
<tr>
<th>昵称</th>
<td><input type="text"></td>
<td>
<div>
请输入昵称<br /><span><a href="#">试试新功能,让手机号变QQ号!</a></span>
</div>
</td>
</tr>
<tr>
<th>密码</th>
<td><input type="password" /></td>
<td></td>
</tr>
<tr>
<th>确认密码</th>
<td><input type="password" /></td>
<td></td>
</tr>
<tr>
<th>性别</th>
<td>
<div class="radio_bg"><div class="radio"><input type="radio" name="sex" value="1" checked="checked" /></div></div> 男
   <div class="radio_bg"><div class="radio"><input type="radio" name="sex" value="0" /></div></div> 女
</td>
<td></td>
</tr>
<tr>
<th>生日</th>
<td>
<select style="width: 60px;">
<option value="公历">公历</option>
<option value="农历">农历</option>
</select>
<select style="width: 100px;">
<option value="disabled">年</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
</select>
<select style="width: 60px;">
<option value="disabled">月</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select style="width: 60px;">
<option name="" value="disabled">日</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</td>
<td></td>
</tr>
<tr>
<th>所在地</th>
<td>
<select style="width: 95px;">
<option value="中国">中国</option>
<option value="美国">美国</option>
<option value="韩国">韩国</option>
<option value="俄罗斯">俄罗斯</option>
<option value="新加坡">新加坡</option>
<option value="意大利">意大利</option>
<option value="泰国">泰国</option>
</select>
<select style="width: 95px;">
<option value="北京">北京</option>
<option value="湖南">湖南</option>
<option value="湖北">湖北</option>
<option value="上海">上海</option>
<option value="重庆">重庆</option>
<option value="天津">天津</option>
<option value="海南">海南</option>
</select>
<select style="width: 95px;">
<option value="东城">东城</option>
<option value="平谷">平谷</option>
<option value="西城">西城</option>
<option value="朝阳">朝阳</option>
<option value="大兴">大兴</option>
<option value="昌平">昌平</option>
<option value="石景山">石景山</option>
</select>
</td>
<td></td>
</tr>
<tr>
<th style="height: 60px;">验证码</th>
<td>
<input type="text" style="width: 180px; height: 54px;">
<img src="1.jpg" style="height: 60px; float: right;" />
</td>
<td>
<span>
<a href="#" style="line-height: 60px;">点击换一张</a>
</span>
</td>
</tr>
<tr>
<th></th>
<td>
<div style="height: 40px;"><div class="checkbox_bg"><div class="checkbox">√<input type="checkbox" checked="checked" /></div></div> 同时开通QQ空间</div>
<div style="height: 40px;"><div class="checkbox_bg"><div class="checkbox">√<input type="checkbox" checked="checked" /></div></div> 我已阅读并同意相关服务条款和隐私政策</div>
</td>
<td></td>
</tr>
<tr>
<th></th>
<td>
<input type="button" value="立即注册" />
</td>
<td></td>
</tr>
</table>
</body>
</html>
尽管这个多选框还是不咋像,但至少考虑到了这个细节,你就比别人强!
绿色单选复选框的实践主要是通过隐藏原有的单选复选框,再用绝对布局添加两层 div 标签,外层设置背景(边框),内层设置填充颜色(绿色),最后在css里为 :checked 伪类加上 opacity: 0; 达到隐藏默认按钮的作用,然后实际单选复选框边框都比原来的默认按钮边框都大,基本重合,所以外观看起来就像一样的。
如果默认按钮显示,就只显示空白,不显示就会把低下的绿色填充显示出来,通过这种方式来达到更换单选复选填充颜色。(在不使用框架和 JavaScript 的情况下)
致谢
本篇实例素材来自于 X Y H 🧡 ~
286



被折叠的 条评论
为什么被折叠?



