网页设计（八）HTML5基础与CSS3应用
一、当当网企业用户注册页面设计
当当网企业用户注册页面
改版后当当网企业用户注册页面
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>当当网企业用户注册页面设计title>
<style type="text/css">
body {
background: #F6F9FB;
}
* {
padding: 0px;
margin: 0px;
}
#div1 {
background: #FFFFFF;
margin: 50px auto;
width: 1001px;
border: 1px dashed #FAFAFA;
box-shadow: -10px 10px #F1F1F1;
height: 1300px;
}
#header {
border-bottom: 5px solid red;
background: url('pro81/ddnewhead_logo.gif') no-repeat top left;
height: 71px;
width: 1001px;
}
#header h1 {
color: #994480;
font-size: 28px;
padding-top: 25px;
padding-left: 200px;
font-family: 微软雅黑;
}
#section {
margin: 0 auto;
width: 100%;
}
#section img {
width: 100%;
}
.zhanghu_info {
background: url("pro81/icon_qy.png") no-repeat;
width: 19px;
height: 21px;
margin: 12px 187px;
}
.zhanghu_info {
background-position: 0 0;
}
.zhanghu_text {
width: 122px;
margin: 8px 33px;
font-size: 15px;
font-weight: 600;
}
#registerForm {
width: 100%;
height: 700px;
}
.body {
margin: 0 150px;
color: #9e9e9e;
}
.b {
height: 65px;
}
table .t {
width: 268px;
padding: 0 10px 0 0;
text-align: right;
vertical-align: top;
color: #646464;
height: 30px;
font: 14px/30px 微软雅黑;
}
.text {
display: inline-block;
font: 14px/18px 'Microsoft YaHei';
height: 18px;
width: 289px;
margin-right: 10px;
padding: 5px 10px;
outline: 0 none;
border-radius: 2px;
color: #969696;
}
.qiye_info_pic {
background: url("pro81/icon_qy.png") no-repeat;
width: 19px;
height: 20px;
margin: 0px 35px;
background-position: 0 -29px;
}
.table_qiye {
position: relative;
top: 20px;
}
.qiye_info {
position: relative;
}
/* 定义输入内容正确与错误时统一样式 */
.red_flag {
color: red;
font-weight: bolder;
font-size: 16px;
}
/* 出错时的样式 */
.green_flag {
color: #00FF99;
font-weight: bolder;
font-size: 16px;
}
/* 正确时的样式 */
.black_flag {
color: black;
}
.info_area {
width: 320px;
height: 30px;
font-size: 16px;
}
.tel_width {
width: 80px;
height: 1em;
}
.btn_login {
width: 260px;
height: 35px;
border-radius: 12px;
background: red;
text-align: center;
vertical-align: middle;
color: #FFFFFF;
padding: 10px 30px;
text-decoration: none;
margin: 20px auto;
}
/*验证码样式定义*/
.code {
font-family: Arial;
font-style: italic;
color: blue;
font-size: 18px;
padding: 2px 3px;
letter-spacing: 3px;
font-weight: bolder;
cursor: pointer;
width: 150px;
height: 60px;
line-height: 30px;
text-align: center;
vertical-align: middle;
border: 1px dashed red;
}
a {
text-decoration: none;
font-size: 16px;
color: #288bc4;
}
a:hover {
text-decoration: underline;
}
style>
<script type="text/javascript" src="pro81/verifycode.js">script>
head>
<body onload="createCode()">
<div id="div1">
<header id="header">
<h1>--企业用户注册h1>
header>
<section id="section">
<img src="pro81/login_qiye4.png" />
section>
<div class="zhanghu_info">
<p class="zhanghu_text">账户信息p>
div>
<form id="registerForm">
<div class="body">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr class="b">
<td class="t">用户名td>
<td colspan="2">
<input id="username" name="username" type="text" class="text" MaxLength="20" tabindex="1" onfocus="displayInfo();"
onblur="checkName();" />
<span id="info_name_flag" class="info_flag">span>
<div id="info_name" class="info_area" style="z-index: 1">div>
td>
tr>
<tr class="b">
<td class="t" colspan="2">设置密码td>
<td>
<input id="userpsd" name="userpsd" type="password" class="text" required="required" onpaste="return false;"
MaxLength="20" tabindex="2" onfocus="displayPsd();" onblur="checkPassword(1);" />
<span id="info_password_flag" class="info_flag">span>
<div id="info_password" class="info_area" style="z-index: 1">div>
td>
tr>
<tr class="b">
<td class="t">确认密码td>
<td colspan="2">
<input id="userrepsd" name="userrepsd" type="password" class="text" onpaste="return false;" MaxLength="20"
tabindex="3" onfocus="displayRePsd();" onblur="checkPassword(2);" />
<span id="info_repassword_flag" class="info_flag">span>
<div id="info_repassword" class="info_area" style="z-index: 1 ">div>
td>
tr>
tbody>
table>
<script type="text/javascript ">
var errorflag = "×";
var rightflag = "√";
function checkPassword(n) {
var psd = $("userpsd").value;
var repsd = $("userrepsd").value;
var len_prd = psd.length;
var len_repsd = repsd.length;
switch (n) { //检查密码
case 1:
{
if (len_prd > 20 || len_prd < 6) {
$("info_password").className = "red_flag ";
$("info_password").innerHTML = "密码长度为6-20个字符 ";
$("info_password_flag").className = "red_flag ";
$("info_password_flag").innerHTML = errorflag;
} else {
$("info_password_flag").className = "green_flag ";
$("info_password_flag").innerHTML = rightflag;
$("info_password").className = "info_area ";
$("info_password").innerHTML = " ";
}
break;
}
case 2:
{
//检查重复密码
if (len_repsd > 20 || len_repsd < 6) {
$("info_repassword").className = "red_flag ";
$("info_repassword").innerHTML = "密码长度为6-20个字符 ";
$("info_repassword_flag").className = "red_flag ";
$("info_repassword_flag").innerHTML = errorflag;
} else {
$("info_repassword_flag").className = "green_flag ";
$("info_repassword_flag").innerHTML = rightflag;
$("info_repassword").className = "info_area ";
$("info_repassword").innerHTML = " ";
}
if (psd != repsd) {
$("info_repassword").className = "red_flag ";
$("info_repassword").innerHTML = "密码与确认密码不同！ ";
$("info_repassword_flag").className = "red_flag ";
$("info_repassword_flag").innerHTML = errorflag;
} else {
$("info_repassword_flag").className = "green_flag";
$("info_repassword_flag").innerHTML = rightflag;
$("info_repassword").className = "info_area ";
$("info_repassword").innerHTML = " ";
}
break;
}
}
}
function $(id) {
return document.getElementById(id);
}
function checkName() {
var name = $("username").value;
//4-20个字符，可由小写字母、中文、数字组成,用户名不能为空
name_len = name.length;
if ((name_len < 4 || name_len > 20) || name_len == 0 || (name_len > 0 && name_len < 4)) {
$("info_name").className = "red_flag ";
$("info_name").innerHTML = "用户名非空,且长度为4-20个字符 ";
$("info_name_flag").className = "red_flag";
$("info_name_flag").innerHTML = errorflag;
} else {
$("info_name_flag").className = "green_flag";
$("info_name_flag").innerHTML = rightflag;
$("info_name").className = "info_area";
$("info_name").innerHTML = " ";
}
}
function displayInfo() { //获得焦点时，正常提示信息
$("info_name").className = "black_flag";
$("info_name").innerHTML = "4-20个字符，由小写字母、中文、数字组成";
}
function displayPsd() {
$("info_password").className = "black_flag";
$("info_password").innerHTML = "密码为6-20个字符，由英文、数字及符号组成";
}
function displayRePsd() {
$("info_repassword").className = "black_flag";
$("info_repassword").innerHTML = "密码为6-20个字符，可由英文、数字及符号组成";
}
script>
<div class="qiye_info">
<div class="qiye_info_pic">
<p class="zhanghu_text ">企业及联系人信息p>
div>
<table class="table_qiye" cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr class="b">
<td class="t">公司名称td>
<td colspan="3">
<input type="text " class="text " autocomplete="off " placeholder="请填写单位执照上的名称 " MaxLength="60 " tabindex="4 " />
<span id="" class="info_flag">span>
<div id="" class="info_area" style="z-index: 1 ">div>
td>
tr>
<tr style="z-index: 99; ">
<td class="t ">公司地址td>
<td colspan="3 ">
<div class="">
<span>
<select id="province_id " name="province_id " class="mar " tabindex="5 ">
<option value="0 ">请选择option>
<option value="1 ">江苏option>
<option value="2 ">山东option>
<option value="3 ">安徽option>
<option value="4 ">上海option>
<option value="5 ">天津option>
select>
span>
<span>
<select id="city_id " name="city_id " class="mar " tabindex="6 ">
<option value="0 ">请选择option>
<option value="1 ">南京option>
<option value="2 ">无锡option>
<option value="3 ">苏州option>
<option value="4 ">泰州option>
select>
span>
<span>
<select id="town_id " name="town_id " class="companyarea " tabindex="7 ">
<option value="0 ">请选择option>
<option value="1 ">浦口区option>
<option value="2 ">六合区option>
<option value="3 ">秦淮区option>
<option value="4 ">鼓楼区option>
select>
span>
div>
td>
tr>
<tr style="z-index: 1 " class="b ">
<td class="t "> td>
<td style="z-index: 1 " colspan="3">
<input id="address" name="address" type="text " style="z-index: 1 " class="text" placeholder="请填写街道地址 "
tabindex="9 " />
<span id="Addr" class="info_flag">span>
<div id="Info_address" class="info_area" style="z-index: 1 ">div>
td>
tr>
<tr class="b ">
<td class="t ">公司邮箱td>
<td style="z-index: 1 " colspan="3 ">
<input id="email " name="txt_username " type="email" class="text " placeholder="建议填写企业邮箱 " autocomplete="off "
MaxLength="40 " tabindex="10 " />
<span id="info_email_flag" class="info_flag">span>
<div id="info_Email" class="info_area" style="z-index: 1 ">div>
td>
tr>
<tr class="b ">
<td class="t ">固定电话td>
<td style="z-index: 1 " colspan="3">
<input id="areaCode " name="city_code " type="text " class="text tel_width" style="z-index: 1 " MaxLength="4 "
tabindex="11 " />
<input id="telphone " name="company_tel " type="text " class="text tel_width" style="z-index:2; " MaxLength="8 "
tabindex="12 " />
<input id="telExtension " name="ext_tel " type="text " class="text tel_width" style="z-index:2; " MaxLength="8 "
tabindex="13 " />
<span id="info_tel_flag" class="info_flag">span>
<div id="info_areaCode " class="info_area" style="z-index: 1 ">div>
td>
tr>
<tr class="b ">
<td class="t " style="z-index: 1 ">联系人姓名td>
<td style="z-index: 1 " colspan="3 ">
<input id="J_linkman " name="contactor " type="text " class="text " MaxLength="32 " tabindex="14 " />
<span id="info_contacter_flag " class="info_flag ">span>
<div id="info_Linkman" class="info_area" style="z-index: 1 ">div>
td>
tr>
<tr class="b ">
<td class="t ">手机号td>
<td style="z-index: 1 " colspan="3 ">
<input type="text " class="text " MaxLength="11 " tabindex="15 " pattern="^1[358][0-9]{9}$" />
<span id="info_mobile_flag" class="info_flag">span>
<div id="info_mobile_flag" class="info_area" style="z-index: 1 ">div>
td>
tr>
<tr class="b" style="z-index: 1 ">
<td class="t">验证码td>
<td style="z-index: 1 " colspan="3 ">
<input id="inputCode" placeholder="请输入验证码" MaxLength="4 " type="text" class="text tel_width" tabindex="16 "
onblur="validateCode()" />
<span id="info_code" class="info_flag ">span>
<span class="" id="checkCode" onclick="createCode()">span>
<a href="javascript:void(0); " onclick="createCode()">换张图a>
<div id="info_code_flag" class="info_area" style="z-index: 1 ">div>
td>
tr>
<tr>
<td class="t "> td>
<td class="clause " colspan="3 ">
<span class="">
<input type="checkbox" />我已阅读并同意
<a target="_blank " href="http://help.dangdang.com/details/page12 " tabindex="19 ">《当当交易条款》a>和
<a target="_blank " href="http://help.dangdang.com/details/page42 " tabindex="20 ">《当当社区条款》a>
span>
<div id="agreement " class="info_area " style="z-index: 1;top: 24px; ">div>
td>
tr>
<tr class="b">
<td class="t "> td>
<td colspan="3 ">
<a href="# " class="btn_login " tabindex="21 ">立即注册a>
td>
tr>
tbody>
table>
div>
div>
form>
div>
body>
html>
验证码
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js验证码title>
<style type="text/css">
.code {
background: url(code_bg.jpg);
font-family: Arial;
font-style: italic;
color: blue;
font-size: 30px;
border: 0;
padding: 2px 3px;
letter-spacing: 3px;
font-weight: bolder;
float: left;
cursor: pointer;
width: 150px;
height: 60px;
line-height: 60px;
text-align: center;
vertical-align: middle;
}
a {
text-decoration: none;
font-size: 12px;
color: #288bc4;
}
a:hover {
text-decoration: underline;
}
style>
<script type="text/javascript">
var code;
function createCode() {
code = "";
var codeLength = 4; //验证码的长度
var checkCode = document.getElementById("checkCode");
var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l',
'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I',
'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '储', '久', '良'); //所有候选组成验证码的字符，当然也可以用中文的
for (var i = 0; i < codeLength; i++) {
var charNum = Math.floor(Math.random() * codeChars.length);
code += codeChars[charNum];
}
if (checkCode) {
checkCode.className = "code";
checkCode.innerHTML = code;
}
}
function validateCode() {
var inputCode = document.getElementById("inputCode").value;
if (inputCode.length == 0) {
alert("请输入验证码！");
} else if (inputCode.toUpperCase() != code.toUpperCase()) {
alert("验证码输入有误！");
createCode();
} else {
alert("验证码正确！");
}
}
script>
head>
<body>
<form id="form1" runat="server" onsubmit="validateCode()">
<div>
<table border="0" cellspacing="5" cellpadding="5">
<tr>
<td> td>
<td>
<div class="code" id="checkCode" onclick="createCode()">div>
td>
<td>
<a href="#" onclick="createCode()">看不清换一张a>
td>
tr>
<tr>
<td>验证码：td>
<td><input style="float:left;" type="text" id="inputCode" />td>
<td>请输入验证码td>
tr>
<tr>
<td colspan="3" align="center">
<input id="Button1" onclick="validateCode();" type="button" value="确定" />
td>
tr>
table>
div>
form>
<script type="text/javascript">
createCode();
script>
body>
html>
二、HTML5结构元素页面布局设计
HTML5新增加结构元素设计布局页面
DOCTYPE html>
<html lang="EN">
<head>
<meta charset="utf-8" />
<title>页面布局设计title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
#header {
background: url('pro82/logo.png') #4B5B6B no-repeat top left;
width: 100%;
height: 60px;
}
#nav {
/*background: #D9D9D9;*/
width: 100%;
height: 80px;
}
ul {
list-style-type: none;
width: 100%;
height: 80px;
background: #D0C0B0;
text-align: center;
}
li {
font-size: 28px;
padding: 20px 10px;
display: inline-block;
width: 160px;
height: 40px;
}
a:active,
a:link,
a:visited {
text-decoration: none;
}
a:hover {
background: #CCFF99;
height: 80px;
width: 160px;
padding: 20px 10px;
}
#main {
width: 100%;
height: 500px;
background: #FEFEFE;
}
#article {
width: 75%;
height: 500px;
background: #DBDACA;
float: left;
}
.section {
width: 320px;
height: 440px;
float: left;
border: 1px dashed #006600;
text-align: center;
vertical-align: middle;
margin: 20px;
}
img {
width: 300px;
height: 400px;
margin: 10px;
}
#aside {
width: 25%;
height: 500px;
background: #9F9F9A;
float: right;
text-align: center;
vertical-align: middle;
}
#footer {
clear: both;
width: 100%;
height: 80px;
background: #EAEADA;
padding: 20px auto;
text-align: center;
}
#footer p {
font-size: 20px;
padding-top: 25px;
height: 26px;
}
style>
head>
<body>
<header id="header">header>
<nav id="nav">
<ul>
<li>
<a href="#">首页a>
li>
<li>
<a href="#">HTML5a>
li>
<li>
<a href="#">CSS3a>
li>
<li>
<a href="#">JavaScripta>
li>
<li>
<a href="#">DOMa>
li>
<li>
<a href="#">BOMa>
li>
ul>
nav>
<div id="main">
<article id="article">
<section class="section">
<img src="pro82/html5_logo.png">
section>
<section class="section">
<img src="pro82/css3_logo.png">
section>
<section class="section">
<img src="pro82/javascript_logo.png" />
section>
article>
<aside id="aside">
<figure>
<img src="pro82/html5.png">
<figcaption>HTML5结构元素侧边asidefigcaption>
figure>
aside>
div>
<footer id="footer">
<p>Copyright © Web前端开发工作室 - 业务开发部 - 网站建设p>
footer>
body>
html>
三、HAB公司行业案例CSS3特效页面设计
HAB公司行业案例局部初始页面
HAB公司行业案例局部鼠标盘旋时特效页面
鼠标盘旋时指向“查看更多”时超链接效果
文字素材：
- “服务浦东政务”“HAB公司连续多年保持政务信息化建设领域市场份额第一，在中央部委的应用份额超过了70%,凭借对政务的理解和先进的云计算技术成为政务云最……”“查看更多”。超链接的href属性值同上。
- “服务天津地铁”“HAB公司作为一家本土化、专注在交通信息化的解决方案供应商，紧跟中国交通信息化步伐，利用研发创新与交通贴身服务，为交通信息化带来更多……”“查看更多”。超链接的href属性值同上。
- “服务Web技术大学”“HAB公司近日成功中标“Web技术大学SDN下一代校园网”项目，将对Web技术大学两个校区的原有核心网络进行面向SDN的下一代校园网升级改造，为一万多名在校师生提供智能化的校园网络服务”“查看更多”。超链接的href属性值同上。
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HAB公司行业例CSS3特效title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
.nav-bar {
background: #404143 url('pro83/hablogo.png') no-repeat top left;
width: 100%;
height: 50px;
}
.nav {
padding-left: 200px;
list-style-type: none;
padding-top: 15px;
}
.nav li {
float: left;
width: 100px;
text-align: center;
}
.nav li a:link,
.nav li a:active,
.nav li a:visited {
text-decoration: none;
color: #FFFFFF;
}
.nav li a:hover {
text-decoration: none;
color: red;
}
#hab_header {
text-align: center;
margin-top: 70px;
}
#hab_header p {
font-size: 14px;
color: #7f7f7f;
text-align: center;
margin-top: 8px;
}
.hab_Search_industry_box {
margin-top: 60px;
padding-left: 40px;
padding-right: 40px;
overflow: hidden;
}
.hab_Search_industry_box ul {
margin: 0 -14px;
list-style: none;
}
.hab_Search_industry_box ul li {
float: left;
}
.hab_Search_industry_box ul li:hover .xihab_3-10 {
display: block;
}
.wrap {
margin-right: auto;
margin-left: auto;
width: 100%;
max-width: 1280px;
}
.bottom_hab_3-10 {
display: block;
width: 101px;
height: 25px;
border: 1px solid #fff;
text-align: center;
line-height: 23px;
font-size: 12px;
color: #fff;
margin: 0 auto;
margin-top: 30px
}
img {
transition: all 0.3s;
-webkit-transition: all 0.3s;
}
.tran_scale {
overflow: hidden;
display: block;
}
.tran_scale img {
transition: all 0.3s;
-webkit-transition: all 0.3s;
}
.tran_scale:hover img {
transform: scale(1.1, 1.1);
-webkit-transform: scale(1.1, 1.1);
}
.col-xs-12 {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
width: 100%;
}
.col-sm-4 {
width: 30.33333333%;
margin: 0 0.3%;
}
.fnt_18 {
font-size: 18px;
}
.bottom_hab_3-10:hover {
background: #e60012;
color: #fff;
}
.xihab_3-10 {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url('pro83/head-b1g.png');
display: none;
}
.xihab_3-10 h1 {
color: #fff;
text-align: center;
margin-top: 10%;
}
.xihab_3-10 p {
color: #fff;
margin-top: 20px;
padding: 0 10%;
overflow: hidden;
height: 4.6em;
}
.hab_m_img_1 h5 {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background: url('pro83/head-b1g.png');
line-height: 45px;
color: #fff;
padding: 0 5%;
}
.hab_m_img_1:hover h5 {
display: none;
}
.hab_m_img_1 {
position: relative;
}
.hab_m_img_1 img {
width: 100%;
}
.ratio-img {
width: 100%;
height: auto;
}
style>
head>
<body>
<header class="nav-bar">
<nav>
<ul class="nav">
<li>
<a href="#">产品技术a>
li>
<li>
<a href="#">解决方案a>
li>
<li>
<a href="#">服务a>
li>
<li>
<a href="#">HAB大学a>
li>
<li>
<a href="#">合作伙伴a>
li>
<li>
<a href="#">关于我们a>
li>
ul>
nav>
header>
<div id="hab_header">
<section>
<h2>行业h2>
<p>CFGS架构是HAB"云网融合"解决方案的核心支撑，将云计算、智慧网络、IT安全、移动化等解决方案融合贯通...p>
<p>并通过软件定义与资源编排，实现IT基础设施资源自动化调度、弹性扩展、应需而动。p>
section>
div>
<div class="hab_Search_industry_box wrap ">
<article>
<ul>
<li class="col-xs-12 col-sm-4">
<div class="hab_m_img_1 habhover tran_scale">
<a href="#">
<img class="ratio-img" src="pro83/pudong.jpg" alt="" />a>
<h5 class="fnt_18">服务浦东政务h5>
<div class="xihab_3-10">
<h1 class="fnt_18">服务浦东政务h1>
<p>HAB公司连续多年保持政务信息化建设领域市场份额第一，在中央部委的应用份额超过了70%,凭借对政务的理解和先进的云计算技术成为政务云最p>
<a class="bottom_hab_3-10" href="#">查看更多
h4>
a>
div>
div>
li>
<li class="col-xs-12 col-sm-4">
<div class="hab_m_img_1 habhover tran_scale">
<a href="#">
<img class="ratio-img" src="pro83/tianjin.jpg" alt="" />a>
<h5 class="fnt_18">服务天津地铁h5>
<div class="xihab_3-10">
<h1 class="fnt_18">服务天津地铁h1>
<p>HAB公司作为一家本土化、专注在交通信息化的解决方案供应商，紧跟中国交通信息化步伐，利用研发创新与交通贴身服务，为交通信息化带来更多 p>
<a class="bottom_hab_3-10" href="#">查看更多
h4>
a>
div>
div>
li>
<li class="col-xs-12 col-sm-4">
<div class="hab_m_img_1 habhover tran_scale">
<a href="#">
<img class="ratio-img " src="pro83/shanghai.jpg " alt=" " />a>
<h5 class="fnt_18 ">服务Web技术大学h5>
<div class="xihab_3-10 ">
<h1 class="fnt_18 ">服务Web技术大学h1>
<p>近日成功中标“HAB公司Web技术大学SDN下一代校园网”项目，将对Web技术大学两个校区的原有核心网络进行面向SDN的下一代校园网升级改造，为一万多名在校师生提供智能化的校园网络服务。最p>
<a class="bottom_hab_3-10 " href="# ">查看更多
h4>
a>
div>
div>
li>
ul>
article>
div>
body>
html>
四、纯CSS3偏光图像画廊
纯CSS3偏光图像画廊初始页面
纯CSS3偏光图像画廊鼠标盘旋时页面
五、课外拓展训练
1. 设计HTML5表单
HTML5表单设计初始页面效果图
HTML5表单设计输入时页面效果图
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
body {background: url('kwtz81/image-bg.jpg') repeat;
font-family: Arial Narrow, Arial, sans-serif;margin: 0;padding: 0;}
header,section,footer {display: block;}
header {
width: 100%;margin-bottom: 20px;position: relative;
background-color: rgb(0, 0, 0);background-color: rgba(0, 0, 0, 0.9);
color: #ccc;padding: 15px 0;letter-spacing: 1px;}
header h1 {margin: 0 50px;text-shadow: 2px 2px 2px #888;float: left;}
#backlinks {float: right;margin: -10px 20px;text-align: right;
line-height: 25px;font-weight: bold;font-size: 12px;}
#backlinks a {color: #ccc;text-decoration: none;margin: 3px 0 0;display: block;}
#backlinks a:hover {color: #fff;}
footer {
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.8);
height: 25px;width: 100%;line-height: 25px;position: relative;
font-family: Arial, Helvetica, sans-serif;bottom: 0;
left: 0;color: #888;font-size: 11px;}
footer span {padding-left: 20px;}
footer a {color: #1FA2E1;}
#wrapper {width: 770px;margin: 0 auto;text-align: center;}
#wrapper hgroup {margin: 20px 0;text-shadow: 1px 1px 1px #ccc;}
#wrapper h1 {color: #146FA0;font-size: 42px;margin: 0;}
#wrapper h2 {color: #71C1ED;font-size: 27px;margin: 0;}
#lbl {color: #777;font-size: 17px;font-weight: bold;
text-shadow: 1px 1px 0 #fff;margin: 10px 0;}
*:focus {outline: none;}
label,input,textarea,fieldset {display: block;}
fieldset#account,fieldset#personal {
width: 250px;padding: 0 50px 50px;margin: 10px;float: left;
background: rgb(244, 244, 244);background: rgba(244, 244, 244, 0.7);
-webkit-border-radius: 25px;
/*Chrome和Safari */
-moz-border-radius: 25px;
/*Firefox*/
border-radius: 25px;
/*圆角边框*/
border: 3px double #999;
}
fieldset#confirm {padding-top: 10px;clear: both;border: none;
line-height: 15px;margin: 10px 0;}
fieldset#confirm label,fieldset#confirm input {
display: inline;float: left;margin: 15px 5px 0;}
legend {font-size: 20px;font-weight: bold;letter-spacing: 5px;color: #999;
margin-left: -20px;text-align: left;padding: 0 10px;text-shadow: 1px 1px 0 #ccc;}
label {font-size: 17px;font-weight: bold;margin: 17px 0 7px;text-align: left;
text-shadow: 1px 1px 0 #fff;/*文本阴影*/
}
textarea {resize: both;max-width: 230px;}
input.textbox,textarea {
padding: 5px 10px;-webkit-border-radius: 15px;
/*圆角边框*/
-moz-border-radius: 15px;border-radius: 15px;border: 1px solid #fff;
width: 200px;text-shadow: 1px 1px 1px #777;box-shadow: 0px 2px 0px #999;
transition: all 0.5s ease-in-out; /*过渡*/
background: url('kwtz81/required.png') no-repeat 200px 5px #F0F0EF;
}
input.textbox:focus,textarea:focus {
transform: scale(1.1);
/*放大1.1倍*/
box-shadow: 7px 7px 2px #ccc;
/*边框阴影*/
text-shadow: 1px 1px 3px #777;
/*文本阴影*/
}
input.textbox:required {
background: url('kwtz81/required.png') no-repeat 200px 5px #F0F0EF;
background: url('kwtz81/required.png') no-repeat 200px 5px, -webkit-gradient(linear, left top, left bottom, from(#E3E3E3), to(#FFFFFF));
}
input.textbox:required:valid {
background: url('kwtz81/valid.png') no-repeat 200px 5px #F0F0EF;
background: url('kwtz81/valid.png') no-repeat 200px 5px, -webkit-gradient(linear, left top, left bottom, from(#E3E3E3), to(#FFFFFF));
}
input.textbox:focus:invalid,
input.textbox:not(:required):invalid {
background: url('kwtz81/invalid.png') no-repeat 200px 5px #F0F0EF;
background: url('kwtz81/invalid.png') no-repeat 200px 5px, -webkit-gradient(linear, left top, left bottom, from(#E3E3E3), to(#FFFFFF));
}
input[type="submit"] {
/*属性选择器*/
padding: 10px;margin: 0 10px !important;border: 3px groove #F3D3C3;
width: 300px;border-radius: 12px;background: #F7F7F7;
}
#rangevalue {display: block;text-align: right;margin-top: -25px;width: 265px;}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
/* 将占位符中提示信息颜色定义为浅灰色*/
color: #aaa;font-style: italic;text-shadow: 1px 1px 0 #fff;}
input:-moz-placeholder,textarea:-moz-placeholder {
/* 将占位符中提示信息颜色定义为浅灰色*/
color: #aaa;font-style: italic;text-shadow: 1px 1px 0 #fff;}
.clearfix {clear: both;}
style>
head>
<body>
<div id="wrapper">
<div id="lbl">div>
<form>
<fieldset id="account">
<legend>个人信息legend>
<label for="username">账号:label>
<input id="username" class="textbox" type="text" name="username" required placeholder="请填写账号" />
<label for="password1">密码:label>
<input id="password1" class="textbox" type="password" name="password1" required placeholder="请填写密码" />
<label for="password2">重复密码:label>
<input id="password2" class="textbox" type="password" name="password2" required placeholder="请重复密码" />
<label for="email">邮箱地址:label>
<input id="email" class="textbox" type="email" name="email" required placeholder="www.csdn.com" />
fieldset>
<fieldset id="personal">
<legend>其他信息legend>
<label for="website">个人网址:label>
<input id="website" class="textbox" type="url" name="website" required placeholder="http://www.example.com" />
<label for="age">年龄:label>
<input id="age" class="textbox" type="number" name="age" min="18" step="2" pattern="[0-9]{1,3}" placeholder="填写年龄">
<label for="salary">月薪:label>
<input id="salary" class="textbox" type="range" name="salary" min="0" max="50000" step="500" pattern="[0-9]{2,}"
placeholder="输入月薪" value="10000" onchange="showValue(this.value)" />
<span id="rangevalue">10000span>
<script>
function showValue(value) {
document.getElementById("rangevalue").innerHTML = value;
}
script>
<label for="description">描述:label>
<textarea id="description" name="description" cols="30" rows="5" placeholder="这里是详细描述">textarea>
fieldset>
<fieldset id="confirm">
<input type="submit" value="提交" />
<div class="clearfix">div>
fieldset>
form>
div>
body>
html>
2.设计CSS3过渡动画画廊
初始时效果
盘旋时效果
背景可缩放矢量图形在浏览器中的效果图
doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3过渡画廊title>
<style>
body {
background: #dce4e4;
font-family: Georgia, "Times New Roman", Times, serif;
}
#gallery {
width: 1000px;
height: 1200px;
margin: 20px auto;
padding: 40px;
position: relative;
}
#gallery div {
background: #fff;
position: absolute;
overflow: hidden;
opacity: 0.9;
transition: all 1500ms linear;
/*线性过渡1.5s*/
-webkit-transition: all 1500ms linear;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: -3px -3px 50px #666;
-moz-box-shadow: -3px -3px 50px #666;
box-shadow: -3px -3px 50px #666;
}
#gallery div#img1:hover,
#gallery div#img2:hover,
#gallery div#img3:hover,
#gallery div#img4:hover,
#gallery div#img5:hover,
#gallery div#img6:hover {
z-index: 999;
transform: rotate(0deg);
/*通用浏览器*/
-webkit-transform: rotate(0deg);
/*Chrome*/
-moz-transform: rotate(0deg);
/*Firefox*/
opacity: 1;
}
#gallery span {
position: absolute;
right: 0;
bottom: 15px;
color: #999;
background: #fff;
width: 35%;
text-align: right;
padding: 10px;
font-size: 13px;
font-weight: bold;
}
#gallery img {
/* 图像遮盖 */
-webkit-mask-box-image: url('kwtz82/background.svg');
-webkit-mask-repeat: none;
/*遮盖图像不重复*/
}
#gallery #img1 {
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
top: 50px;
left: 130px;
z-index: 1;
}
#gallery #img2 {
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
top: 300px;
left: 100px;
z-index: 7;
}
#gallery #img3 {
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-15deg);
top: 450px;
left: 350px;
z-index: 3;
}
#img3 img {
width: 350px;
}
#gallery #img4 {
/* eye */
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
top: 450px;
left: 650px;
z-index: 4;
}
#gallery #img5 {
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
top: -100px;
right: 200px;
z-index: 5;
}
#gallery #img6 {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
top: 220px;
right: 120px;
z-index: 6;
}
style>
head>
<body>
<div id="gallery">
<div id="img1">
<img src="kwtz82/image-1.jpg">
<span>Image 1 captionspan>
div>
<div id="img2">
<img src="kwtz82/image-2.jpg">
<span>Image 2 captionspan>
div>
<div id="img3">
<img src="kwtz82/image-3.jpg">
<span>Image 3 captionspan>
div>
<div id="img4">
<img src="kwtz82/image-4.jpg">
<span>Image 4 captionspan>
div>
<div id="img5">
<img src="kwtz82/image-5.jpg">
<span>Image 5 captionspan>
div>
<div id="img6">
<img src="kwtz82/image-6.jpg">
<span>Image 6 captionspan>
div>
div>
body>
html>
作者主页： 正函数的个人主页
文章收录专栏： Web design
欢迎大家点赞 收藏 ⭐ 加关注哦！
如果你认为这篇文章对你有帮助，请给正函数点个赞吧，如果发现什么问题，欢迎评论区留言！！