htmlnew

最新推荐文章于 2023-12-22 18:38:49 发布
空山静听
最新推荐文章于 2023-12-22 18:38:49 发布
阅读量414
点赞数
本文链接：https://blog.csdn.net/ros________/article/details/118338247
版权
在这里插入代码片
导航栏菜单的设计与实现
<html>
    <head>
        <meta charset="utf-8">
        <title>导航栏菜单的设计与实现</title>
        <style>
            ul {
                list-style: none;/*用于去掉列表标记实心点*/
                margin: 0;
                padding: 0;
            }		
            li {
                float: left;
            }
            a:link, a:visited {
                display: block;/*设置为块级元素*/
                width: 100px;/*设置宽度为100像素*/
                font-weight: bold;/*设置字体为加粗*/
                color: white;/*设置字体为白色*/
                background-color:#5AF;/*设置背景颜色为蓝色*/
                text-align: center;/*设置文本居中显示*/
                padding: 5px;/*设置各边内边距为5像素*/
                text-decoration: none;/*去掉文本下划线*/
            }
            a:hover, a:active {
                background-color:#006FDD;
            }
        </style>
    </head>
    <body>
        <h3>导航栏菜单的设计与实现</h3>
        <hr />
		<!--导航栏-->
        <nav>
            <ul>
                <li><a href="#">头条</a></li>
				<li><a href="#">娱乐</a></li>
                <li><a href="#">热点</a></li>
                <li><a href="#">体育</a></li>
                <li><a href="#">财经</a></li>
                <li><a href="#">科技</a></li>
            </ul>
        </nav>
    </body>
</html>
商务风格表格的设计与实现
<html>
    <head>
        <meta charset="utf-8">
        <title>商务风格表格的设计与实现</title>
        <style>
		    /*设置表格总体样式*/
            #recruit {
                width: 100%;
                border-collapse: collapse;
                text-align: left;
            }
			/*设置单元格样式*/
            #recruit td, #recruit th {
               /* font-size: 1em;*/
                border: 1px solid orange;
                padding: 7px;
            }
            /*设置标题单元格样式*/
			#recruit th {
                background-color: orange;
                color: #ffffff;
            }
			/*设置单元行样式*/
            #recruit tr.orange{
                background-color: #FFEDDB
            }		
        </style>
    </head>
    <body>
        <h3>商务风格表格的设计与实现</h3>
        <hr />
        <table id="recruit" border="1">
            <caption>招聘信息表</caption>
            <tr><th>地点</th><th>招聘职位</th><th>公司</th></tr>
            <tr><td>全国</td><td>产品培训生</td><td>腾讯</td></tr>
            <tr class="orange"><td>全国</td><td>前端开发工程师</td><td>阿里巴巴</td></tr>
            <tr><td>上海</td><td>交互设计师</td><td>网易游戏</td></tr>
            <tr class="orange"><td>北京</td><td>视觉设计师</td><td>360</td></tr>
            <tr><td>深圳</td><td>数据分析师</td><td>IBM</td></tr>
            <tr class="orange"><td>杭州</td><td>数据研发工程师</td><td>微软</td></tr>
        </table>
    </body>
</html>
简单电子时钟
/*电子时钟总体样式设置*/
#clock {
    width: 800px;
    font-size: 80px;
    font-weight: bold;
    color: red;
    text-align: center;
    margin: 20px;
}
/*时分秒数字区域的样式设置*/
.box1 {
    margin-right: 10px;
    width: 100px;
    height: 100px;
    line-height: 100px;
    float: left;
    border: gray 1px solid;
}
/*冒号区域的样式设置*/
.box2 {
    width: 30px;
    float: left;
    margin-right: 10px;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>简单电子时钟的设计与实现</title>
	<link rel="stylesheet" href="css/clock.css">
  </head>
  <body onload="getCurrentTime()">
    <!--标题-->
    <h3>简单电子时钟的设计与实现</h3>
	<!--水平线-->
	<hr />
	<!--电子时钟区域-->
	<div id="clock">
		<div class="box1" id="h"></div>
		<div class="box2">:</div>
		<div class="box1" id="m"></div>
		<div class="box2">:</div>
		<div class="box1" id="s"></div>	
	</div>
	<script>
	//获取显示小时的区域框对象
	var hour = document.getElementById("h");
	//获取显示分钟的区域框对象
	var minute = document.getElementById("m");
	//获取显示秒的区域框对象
	var second = document.getElementById("s");
	
	//获取当前时间
	function getCurrentTime(){
		var date = new Date();
		var h = date.getHours();
		var m = date.getMinutes();
		var s = date.getSeconds();
		
		if(h<10) h = "0"+h; //以确保0-9时也显示成两位数
		if(m<10) m = "0"+m; //以确保0-9分钟也显示成两位数
		if(s<10) s = "0"+s; //以确保0-9秒也显示成两位数
		
		hour.innerHTML= h;
		minute.innerHTML = m;
		second.innerHTML = s;
	}
	//每秒更新一次时间
	setInterval("getCurrentTime()", 1000);
	</script>
  </body>
</html>
HTML5拖放API的图片相框效果
/*设置可放置区域样式*/
#recycle {
    width: 200px;
    height: 50px;
    border: 1px dashed;
    text-align: center;
    line-height: 50px;
}
/*设置图片相框效果样式*/
.photoframe {
    background: url(../image/photoframe.jpg) no-repeat;
    width: 500px;
    height: 438px;
    text-align: center;
    float: left;
}
/*设置图片垂直方向居中显示*/
img {
    vertical-align: middle;
}
/*设置图片2的样式*/
.block {
    width: 0px;
    height: 100%;
}
/*设置带有相框的图片展示区域样式*/
#output {
    float: left;
    margin: 10px;
    text-align: center;
    width: 500px;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5拖放API之图片相框效果</title>
		<link rel="stylesheet" href="css/photoframe.css">
    </head>
    <body>
        <h3>HTML5拖放API之图片相框效果</h3>
        <hr />
		<!--可放置文件区-->
        <div id="recycle" ondragover="allowDrop(event)" ondrop="fileDrop(event)">
            请将图片拖放至此处
        </div>
        <br />
		<!--带有相框的图片展示区-->
        <div id="output"></div>
        <script>
            //ondragover事件回调函数
            function allowDrop(ev) {
                //解禁当前元素为可放置被拖拽元素的区域
                ev.preventDefault();
            }
			//ondrop事件回调函数
            function fileDrop(e) {
				//解禁当前元素为可放置被拖拽元素的区域
                e.preventDefault();
				
				//获取图片展示区域对象output
                var output = document.getElementById("output");
				//将图片展示区域的内容清空
                output.innerHTML = "";

                //获取从本地拖拽放置的文件对象数组files
				var files = e.dataTransfer.files;
		
				//使用for循环遍历同时被拖拽并放置到指定区域的所有文件
                for (var i = 0,f; f = files[i]; i++) {
					//(1)创建带有相框的图片
					//获取当前图片文件的URL来源
                    var imgURL = window.webkitURL.createObjectURL(f);
                    //创建图片对象img
					var img = document.createElement("img");
					//设置图片对象img的src属性为当前图片文件URL地址
                    img.setAttribute("src", imgURL);
					//设置图片对象img的宽度为330像素
                    img.setAttribute("width", "330");
					//设置图片对象img的高度为270像素
                    img.setAttribute("height", "270");

                    //设置相框对象photo
					var photo = document.createElement("div");
					//为相框对象添加class="photoframe",以加载相框背景图片
                    photo.setAttribute("class", "photoframe");
					//将图片添加相框对象中
                    photo.appendChild(img);
					
					//创建图片对象img2
					var img2 = document.createElement("img");
					//设置图片对象img2的class="block"
					img2.setAttribute("class", "block");
					//将图片2也添加到相框元素中
                    photo.appendChild(img2);
					
					//添加相框和相片效果
					output.appendChild(photo);

                    //(2)创建图片下方的状态信息栏
					//使用div元素创建状态信息栏status
					var status = document.createElement("div");
					//获取当前文件的最新修改日期	
                    var lastModified = f.lastModifiedDate;
					//修改当前文件的最新修改日期的描述格式	
                    var lastModifiedStr = lastModified ? lastModified.toLocaleDateString() + ' ' + lastModified.toLocaleTimeString() : 'n/a';
					//设置图片下方状态信息栏描述内容
					status.innerHTML = '<strong>' + f.name + '</strong> (' + (f.type || 'n/a') + ')<br>大小：' + f.size + '字节<br>修改时间：' + lastModifiedStr;
					
                    //添加文件描述
                    output.appendChild(status);
                }
            }
        </script>
    </body>
</html>
用户注册页面

问卷调查页面
body {
	background-color:#CCCCCC;/*设置页面背景色为浅灰色*/
}

/*问卷面板样式*/
#questionnaire{
	background-color:white;	
	padding:15px;
	margin: auto; 
	width:900px;
	text-align:center;
	font-family:"微软雅黑";
	box-shadow: 10px 10px 15px black;
}

/*标题样式*/
h1{
   color:orange;	
}

/*水平线样式*/
hr{
	width:80%;
	border:orange 1px solid;
	margin-bottom:15px;
}

/*表单样式*/
form{
	text-align:left;
	width:80%;
	margin:auto;
}

/*列表选项样式*/
li{
	margin:10px 0;
}

/*输入表单样式*/
input{
	margin:10px;	
}

/*输入表单样式*/
input[type="text"],input[type="tel"]{
	width:130px;
	height:20px;
	font-size:16px;
	font-family:"微软雅黑";
	border:0px;
	border-bottom:1px solid;
	outline:none;
}

/*按钮外区域div元素样式*/
#btn{
	text-align:center;
}

/*按钮样式*/
button{
	width:120px;
	height:40px;
	background-color:orange;
	border:0px;
	color: white;
	margin:10px;
	font-size:18px;
	font-family:"微软雅黑";
	font-weight:bold;
}

/*鼠标悬浮时按钮样式*/
button:hover{
	background-color:#FF6835;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" >
        <title>HTML5问卷调查页面示例</title>
        <link rel="stylesheet" href="css/questionnaire.css">
		<script src="js/questionnaire.js"></script>
    </head>
    <body>
        <div id="questionnaire">
            <!--页面标题-->
            <h1>手机移动支付业务问卷调查</h1>
            <!--水平线-->
            <hr />
            <!--表单-->
            <form method="post" action="URL" onsubmit="return check()">
                <ol>
                    <li>您的教育程度是？</li>
                    <label>
                        <input type="radio" name="q1" value="q1_1" required />
                        高中 </label>
                    <label>
                        <input type="radio" name="q1" value="q1_2" required />
                        大专 </label>
                    <label>
                        <input type="radio" name="q1" value="q1_3" required />
                        本科 </label>
                    <label>
                        <input type="radio" name="q1" value="q1_4" required />
                        硕士研究生 </label>
                    <label>
                        <input type="radio" name="q1" value="q1_5" required />
                        博士及以上 </label>

                    <li>您的年龄段是？</li>
                    <label>
                        <input type="radio" name="q2" value="q2_1" required />
                        18岁以下 </label>
                    <label>
                        <input type="radio" name="q2" value="q2_2" required />
                        18-25岁 </label>
                    <label>
                        <input type="radio" name="q2" value="q2_3" required />
                        26-30岁 </label>
                    <label>
                        <input type="radio" name="q2" value="q2_4" required />
                        31-35岁 </label>
                    <label>
                        <input type="radio" name="q2" value="q2_5" required />
                        35岁以上 </label>

                    <li>您是否使用过手机移动支付业务？</li>
                    <label>
                        <input type="radio" name="q3" value="q3_1" required />
                        从未听说过 </label>
                    <label>
                        <input type="radio" name="q3" value="q3_2" required />
                        听说过，但未使用过 </label>
                    <label>
                        <input type="radio" name="q3" value="q3_3" required />
                        偶尔使用 </label>
                    <label>
                        <input type="radio" name="q3" value="q3_4" required />
                        经常使用 </label>

                    <li>您了解以下哪些手机移动支付业务？（可多选）</li>
                    <label>
                        <input type="checkbox" name="q4" value="q4_1" />
                        支付宝 </label>
                    <label>
                        <input type="checkbox" name="q4" value="q4_2" />
                        微信支付 </label>
                    <label>
                        <input type="checkbox" name="q4" value="q4_3" />
                        电信翼支付 </label>
                    <label>
                        <input type="checkbox" name="q4" value="q4_4" />
                        Apple Pay </label>
                    <input type="checkbox" name="q4" value="q4_5" />
                    以上均不了解
                    </label>

                    <li>您看重以下哪些支付功能？（可多选）</li>
                    <label>
                        <input type="checkbox" name="q5" value="q5_1" />
                        话费/游戏币充值 </label>
                    <br />
                    <label>
                        <input type="checkbox" name="q5" value="q5_2" />
                        刷手机加油 </label>
                    <br />
                    <label>
                        <input type="checkbox" name="q5" value="q5_3" />
                        刷手机购物 </label>
                    <br />
                    <label>
                        <input type="checkbox" name="q5" value="q5_4" />
                        刷手机乘坐公交/轻轨/地铁 </label>
                    <br />
                    <input type="checkbox" name="q5" value="q5_5" />
                    水电煤/有线电视/宽带远程缴费 </label>
                    <br />
                    <label>
                        <input type="checkbox" name="q5" value="q5_6" />
                        享受联盟商户的优惠折扣 </label>
                    <br />
                    <label>
                        <input type="checkbox" name="q5" value="q5_7" />
                        以上均不感兴趣 </label>
                </ol>
				
				<label>您的姓名
                    <input type="text"  name="name" required />
                </label>
                <label>您的职业
                    <input type="text" name="position" required />
                </label>
                <label>联系电话
                    <input type="tel" name="tel" required />
                </label>
				
				 <div id="btn">
                    <button type="submit">提交问卷</button>
                </div>
            </form>
        </div>
    </body>
</html>