1. Toy模板网首页
  2. > Toy博客

网页设计（八）HTML5基础与CSS3应用

10月前 作者：.正函数. 分类：Toy博客 阅读(59) 违法举报

这篇具有很好参考价值的文章主要介绍了网页设计（八）HTML5基础与CSS3应用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

网页设计（八）HTML5基础与CSS3应用,Web design,html5,css3,前端

一、当当网企业用户注册页面设计

当当网企业用户注册页面
网页设计（八）HTML5基础与CSS3应用,Web design,html5,css3,前端
改版后当当网企业用户注册页面
网页设计（八）HTML5基础与CSS3应用,Web design,html5,css3,前端

<!-- prj_8_1.html -->
<!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 ">&nbsp;</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 ">
										<!-- 插入输入验证码的文本框和显示验证码的元素(如div/span等) -->
										<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 ">&nbsp;</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 ">&nbsp;</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>&nbsp;</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新增加结构元素设计布局页面
网页设计（八）HTML5基础与CSS3应用,Web design,html5,css3,前端

<!--  prj_8_2.html -->
<!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="#">HTML5</a>
				</li>
				<li>
					<a href="#">CSS3</a>
				</li>
				<li>
					<a href="#">JavaScript</a>
				</li>
				<li>
					<a href="#">DOM</a>
				</li>
				<li>
					<a href="#">BOM</a>
				</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结构元素侧边aside</figcaption>
				</figure>
			</aside>
		</div>
		<footer id="footer">
			<p>Copyright &copy; Web前端开发工作室 - 业务开发部 - 网站建设</p>
		</footer>
	</body>

</html>

三、HAB公司行业案例CSS3特效页面设计

HAB公司行业案例局部初始页面
网页设计（八）HTML5基础与CSS3应用,Web design,html5,css3,前端
HAB公司行业案例局部鼠标盘旋时特效页面
网页设计（八）HTML5基础与CSS3应用,Web design,html5,css3,前端
鼠标盘旋时指向“查看更多”时超链接效果
网页设计（八）HTML5基础与CSS3应用,Web design,html5,css3,前端
文字素材：

  • “服务浦东政务”“HAB公司连续多年保持政务信息化建设领域市场份额第一，在中央部委的应用份额超过了70%,凭借对政务的理解和先进的云计算技术成为政务云最……”“查看更多”。超链接的href属性值同上。
  • “服务天津地铁”“HAB公司作为一家本土化、专注在交通信息化的解决方案供应商，紧跟中国交通信息化步伐，利用研发创新与交通贴身服务，为交通信息化带来更多……”“查看更多”。超链接的href属性值同上。
  • “服务Web技术大学”“HAB公司近日成功中标“Web技术大学SDN下一代校园网”项目，将对Web技术大学两个校区的原有核心网络进行面向SDN的下一代校园网升级改造，为一万多名在校师生提供智能化的校园网络服务”“查看更多”。超链接的href属性值同上。
<!--  prj_8_3.html -->
<!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偏光图像画廊初始页面
网页设计（八）HTML5基础与CSS3应用,Web design,html5,css3,前端

纯CSS3偏光图像画廊鼠标盘旋时页面
网页设计（八）HTML5基础与CSS3应用,Web design,html5,css3,前端
网页设计（八）HTML5基础与CSS3应用,Web design,html5,css3,前端

五、课外拓展训练

1. 设计HTML5表单

HTML5表单设计初始页面效果图
网页设计（八）HTML5基础与CSS3应用,Web design,html5,css3,前端
HTML5表单设计输入时页面效果图
网页设计（八）HTML5基础与CSS3应用,Web design,html5,css3,前端

<!-- project_8_1.html -->
<!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">10000</span>
					<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过渡动画画廊

初始时效果
网页设计（八）HTML5基础与CSS3应用,Web design,html5,css3,前端
盘旋时效果
网页设计（八）HTML5基础与CSS3应用,Web design,html5,css3,前端
背景可缩放矢量图形在浏览器中的效果图
网页设计（八）HTML5基础与CSS3应用,Web design,html5,css3,前端

<!-- project_8_2.html 
功能: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 caption</span>
			</div>
			<div id="img2">
				<img src="kwtz82/image-2.jpg">
				<span>Image 2 caption</span>
			</div>
			<div id="img3">
				<img src="kwtz82/image-3.jpg">
				<span>Image 3 caption</span>
			</div>
			<div id="img4">
				<img src="kwtz82/image-4.jpg">
				<span>Image 4 caption</span>
			</div>
			<div id="img5">
				<img src="kwtz82/image-5.jpg">
				<span>Image 5 caption</span>
			</div>
			<div id="img6">
				<img src="kwtz82/image-6.jpg">
				<span>Image 6 caption</span>
			</div>
		</div>
	</body>
</html>

作者主页： 正函数的个人主页
文章收录专栏： Web design
网页设计（八）HTML5基础与CSS3应用,Web design,html5,css3,前端

网页设计（八）HTML5基础与CSS3应用,Web design,html5,css3,前端
欢迎大家点赞 👍 收藏 ⭐ 加关注哦！
如果你认为这篇文章对你有帮助，请给正函数点个赞吧，如果发现什么问题，欢迎评论区留言！！文章来源地址https://www.toymoban.com/news/detail-798903.html

到了这里，关于网页设计（八）HTML5基础与CSS3应用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • [HTML]Web前端开发技术5.1（HTML5、CSS3、JavaScript ）CSS基础，selector，properties，font，Cascading，@import——喵喵画网页

    [HTML]Web前端开发技术5.1（HTML5、CSS3、JavaScript ）CSS基础，selector，properties，font，Cascading，@import——喵喵画网页

    希望你开心，希望你健康，希望你幸福，希望你点赞！ 最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！ 喵喵喵，你对我真的很重要！ 目录 前言 CSS概念   传统HTML的缺点 CSS的优势 浏览器与CSS 3 CSS编辑方法 使用CSS控制Web页面 CSS基本语法 CSS定义与

    2024年02月05日
    浏览(72)
  • 【毕业设计】爱琴海——基于HTML5的婚庆用品商城网页设计

    【毕业设计】爱琴海——基于HTML5的婚庆用品商城网页设计

    “婚俗”是指结婚的风俗，各国各族人民按照自己的习俗，举行各具特色的婚礼，具有各自浓厚的民族独特风采。婚俗元素在是中国婚俗文化的媒介，承载了中华儿女对幸福和吉祥的追求。在中国婚俗文化的发展过程中，婚庆用品设计一直在随着现代社会的东西方文化的交融

    2024年02月13日
    浏览(42)
  • [HTML]Web前端开发技术10（HTML5、CSS3、JavaScript ）CSS+DIV页面布局，固定定位，相对定位relative，绝对定位absolute，层定位的应用——喵喵画网页

    [HTML]Web前端开发技术10（HTML5、CSS3、JavaScript ）CSS+DIV页面布局，固定定位，相对定位relative，绝对定位absolute，层定位的应用——喵喵画网页

    希望你开心，希望你健康，希望你幸福，希望你点赞！ 最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！ 喵喵喵，你对我真的很重要！ 目录 前言 课后练习 网页标题：固定定位 网页标题：相对定位relative 网页标题：绝对定位absolute 网页标题：层定

    2024年02月02日
    浏览(59)
  • 基于HTML5的个人网页的网站设计与实现 毕业设计-附源码031623

    基于HTML5的个人网页的网站设计与实现 毕业设计-附源码031623

    随着互联网的不断发展和中国网络人口的日益增长，建立个人网站，不但可以刚好的展示自己，而且可以提高自己在计算机应用方面的能力。故本次作业，我选择制作个人网页的网站。个人在设计时考虑的多为个人的兴趣喜好，而不注重商业的展示。内容以反映个人为中心，

    2024年02月05日
    浏览(54)
  • 一个简单的HTML网页 、个人主页网页设计(HTML+CSS)

    一个简单的HTML网页 、个人主页网页设计(HTML+CSS)

    🎉精彩专栏推荐👇🏻👇🏻👇🏻 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作

    2024年02月04日
    浏览(60)
  • 静态网页设计实践（HTML+CSS）

    静态网页设计实践（HTML+CSS）

            超文本标记语言（HyperText Markup Language，简称:HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页，HTM

    2024年02月02日
    浏览(63)
  • HTML+CSS+JS网页设计

    HTML+CSS+JS网页设计

    HTML页面主要由：登录、注册跳转页面，轮播图，家乡简介，热门景点，特色美食等组成。通过Div+CSS、鼠标滑过特效、获取当前时间，跳转页面、基本所需的知识点全覆盖。 提示：以下是本篇文章正文内容，下面案例可供参考 HTML部分：这块分为两部分，上下两个大盒子，第

    2024年02月08日
    浏览(47)
  • 制作一个简单HTML个人网页网页（HTML+CSS）大话西游之大圣娶亲电影网页设计

    制作一个简单HTML个人网页网页（HTML+CSS）大话西游之大圣娶亲电影网页设计

    HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【学

    2024年02月04日
    浏览(53)
  • [HTML]Web前端开发技术9（HTML5、CSS3、JavaScript ）——喵喵画网页

    [HTML]Web前端开发技术9（HTML5、CSS3、JavaScript ）——喵喵画网页

    希望你开心，希望你健康，希望你幸福，希望你点赞！ 最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！ 喵喵喵，你对我真的很重要！ 目录 前言 CSS颜色与背景 颜色color属性 背景background属性 1. 背景颜色background-color 2. 背景图像background-image 3. 背景

    2024年02月03日
    浏览(75)
  • [HTML]Web前端开发技术12（HTML5、CSS3、JavaScript ）——喵喵画网页

    [HTML]Web前端开发技术12（HTML5、CSS3、JavaScript ）——喵喵画网页

    希望你开心，希望你健康，希望你幸福，希望你点赞！ 最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！ 喵喵喵，你对我真的很重要！ 目录 前言 网页标题：三列自适应宽度 网页标题：多行三列自适应宽度 一级水平导航菜单：采用“无序列表+超

    2024年01月16日
    浏览(75)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包