9-9 H5总结~酒店布局~九九乘法表

最新推荐文章于 2022-01-13 10:15:05 发布
最新推荐文章于 2022-01-13 10:15:05 发布
阅读量370 收藏
点赞数
分类专栏： h5知识
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hfyldx/article/details/100663917
版权

酒店布局
代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/jiudian.css"/>
	</head>
	<body>
		<div class="box">
			<div class="header"> 
				<p>
					<span>
						<img src="img/imgs/phone.png">
						400-808-8682 
					</span>
					<a href="">请登录</a>|
					<a href="">注册</a>
				</p>
			</div>
		</div>
		<div class="nav w1200">
			<img src="img/imgs/logo.png">
			<p>
				<a href="">首页</a>
				<a href="">目的地</a>
				<a href="">亲子游学</a>
				<a href="">酒店预订</a>
				<a href="">车辆接送</a>
				<a href="">签证代办</a>
				<a href="">精彩瞬间</a>
				
			</p>
		</div>
		<div class="mainwrap">
			<div class="main w1200">
				<div class="bread">
					<a href="">首页</a>
					<a href="">酒店预订</a>
					<a href="">曼谷悦榕庄酒店（酒店名称）</a>
					
				</div>
			</div>
			<div class="big">
				<h2>曼谷悦榕庄酒店(酒店名称)</h2>
			<div class="xiao">
				<img src="img/imgs/7_14.jpg">
			</div>
			<div class="si">
				<img src="img/imgs/s1.jpg"/>
				<img src="img/imgs/s2.jpg"/>
				<img src="img/imgs/s3.jpg"/>
				<img src="img/imgs/s4.jpg"/>
			</div>
		</div>
		</div>
		
	</body>
</html>

CSS样式

*{
	padding: 0;
	margin: 0;
}
li,ul,ol{
	list-style: none;
}
a{
	text-decoration: none;
}
/*header样式*/
.box{
		background-color: #333333;
}
.header{
/*	width: 1200px;*/
	height: 45px;
/*	margin: 0 auto;*/

}

.header p{
	float: right;
	color: #FFFFFF;
	font-size: 14px;
	line-height:42px ;
}
.header img{
	margin-top: 11px;
	float: left;
	margin-right: 12px;
	/*vertical-align:top ;*/
}
.header span{
	font-size: 20px;
	margin-right: 24px;
}
.header a{
	color: #FFFFFF;
	font-size: 14px;
	margin: 0 16px;
}
/*nav*/
/*.nav,.header{
	width: 1200px;
	margin: 0 auto;
}*/
.nav{
	margin: 1200px;
	height: 80px;
	margin: 0 auto;
	
}
.nav p{
	float: right;
	line-height: 80px;
}
.nav a{
	width: 100px;
       text-align: center;
	   float: left;
        height: 76px;
        font-size: 20px;
        margin-right: 20px;
        color: #000000;
}
.nav a:last-child{
	margin-right: 0;
}
.nav a:hover{
	
	border-bottom: 4px solid #e8420a;
}
.mainwrap{
	height:900px ;
	background-color: #d3d3d3d3;
	
}
.bread{
	line-height: 100px;
}
.bread a+a:before{
	content: ">";
	margin-left: 10px;
}
/*.bread a:last-child:after{
	content: "";
}*/
.big{
	width:1200px ;
	height: 555px;
	background-color: azure;
	margin: 0 auto;
}
.xiao{
	width: 670px;
	height: 430px;
	float: left;
	margin: 6px;
	margin-bottom: 4px;
	background-color: antiquewhite;
}
.si{
	width: 680px;
	height: 110px;
	background-color: burlywood;
	layout-flow: horizontal;
    float: left;
    bottom: 0px;
    margin-left: 4px;
    
}
.big h2{
	float: right;
}

在这里插入图片描述
JSP

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript</title>
    <script>
        // var flag = true;
        // console.log(typeof flag);
        // var u;
        // console.log(u);
        // console.log(typeof u);
        // var score = 93;
        // 求这是一年中的第几天？
        var year = 2019,
            mon = 9,
            day = 9,
            sum = 0;//定义变量
        switch(true){
            case mon>11:
                sum += 30;//sum=sum+30,
            case mon>10:
                sum += 31;
            case mon>9:
                sum += 30;
            case mon>8:
                sum += 31;//每次条件满足需要累加0+31
            case mon>7:
                sum += 31;//31+31
            case mon>6:
                sum += 30;//上面的和加30
            case mon>5:
                sum += 31;//以此类推
            case mon>4:
                sum += 30;
            case mon>3:
                sum += 31;
            case mon>2:
                sum += ((year%4==0&&year%100!==0)||year%400==0)?29:28
                //需要判断2月份有多少天，判断年份是否是闰年
                // if((year%4==0&&year%100!==0)||year%400==0){
                //     sum += 29;
                // }else{
                //     sum += 28;
                // }
            case mon>1:
                sum += 31;
            default:
                sum += day;
        }
        console.log(sum);//打印出来，也就是得出结果
        // 短路操作
        90>60&&console.log('及格');
        console.log(10<5&&100);
        // switch(true){
        //     case score>=90:
        //         console.log('优');
        //         break;
        //     case score>=80:
        //         console.log('良');
        //         break;
        //     default :
        //         console.log('不及格');
        // }
        
        // if(score>=90){
        //     console.log('优');
        // }
        // 逻辑运算符
        // if(score>=80&&score<90){
        //     console.log('优');
        // }
        // if(score>=90){
        //     console.log('优');
        // }else if(score>=80){
        //     console.log('良');
        // }else if(score>70){
        //     console.log('中');
        // }else if(score>=60){
        //     console.log('及格');
        // }else{
        //     console.log('不及格');
        // }
        // 循环语句
        var row = 3,
            col = 5;
        document.write('<table width="100" border="1">');
        //直接在网页中输出内容
        for(var i=0;i<row;i++){
        	//循环语句 （定义一个量，判断语句，自增）
            document.write('<tr>');
           
            for(var j=0;j<col;j++){
                document.write('<td>'+j+'</td>');
            }//二次循环
            document.write('</tr>');
        }
        document.write('</table>');
        
        
        document.write('<table width="100" border="1">');
        for(var i=1;i<10;i++){
            document.write('<tr>')
            for(var j=1;j<=i;j++){
                document.write('<td>'+ i+'*'+j+'='+i*j+'</td>')
            }
            document.write('</tr>');
        }
        document.write('</table>');
    </script>
    <script src=""></script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

小菜鸟码住
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
中国移动光猫吉比特H5-9获取超级管理员权限教程
03-08
本文将详细介绍如何在中国移动吉比特H5-9光猫上获取并操作超级管理员权限。这个过程涉及网络设备的后台管理，包括使用特定的URL登录、启用telnet服务以及通过命令行修改配置。首先，确保你具备一定的网络基础和对...
vue-fabric-h5-editor.rar
08-10
Vue+Fabric.js实现H5 移动端简单的图片的可视化编辑、预览、下载等功能。 文本编辑：实现画布上的文本框的添加、字体属性的设置、样式风格编辑、背景颜色个性化设置、文本内容的设置等； 图片上传：点击上传图片，...
JavaScript：九九乘法表
码破丶苍穹
11-26 1143
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>99乘法表</title> <style> td{ border: 1px soli...
HTML实现九九乘法表
quanSIR123的博客
05-27 5082
代码 实现效果
九九乘法表_js代码编写
qq_24193261的博客
01-06 3811
九九乘法表 document.write(""); for(i=1;i     document.write("");     for(j=1;j         if(j             document.write(""+i+"*"+j+"="+i*j+"");             }             else{                 doc
HTML九九乘法表
Louts.
04-16 4871
会变颜色的九九乘法表哦！ 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>九九乘法表</title> <style type="text/css" media="screen"> div{display: inline-bl...
在微信小程序中实现9*9乘法表
奴役人生
12-26 3965
直接 上代码 view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i"> view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="j" style='display:inline-block;width:50px;'> view wx:if="{{j> {{i}}
generator-phaser-h5：轻松创建Phaser h5项目
02-03
发电机相位器-h5 翻译：generator-phaser-h5是一个插件，可让您轻松，快速，轻松地启动 h5项目。 h5≠ <h5></h5> ，h5≠html5，h5≠汽车haval5。 h5 =网页或Web应用程序等 不仅对于Phaser，还需要添加依赖项。 ...
h5app-corp-quickstart_h5_
10-02
《H5小程序脚手架：h5app-corp-quickstart_h5_的全面解析》 在当前数字化时代，H5技术已经成为了构建轻量级、跨平台应用的重要工具，尤其在移动端，H5小程序因其便捷性和高效性备受开发者青睐。今天我们将深入探讨...
h5-transfer-pdf:H5TransferPDF是一个将网页HTML渲染为PDF和各种图像格式的API工具，完美兼容HTML，CSS，JS，更好的替换支持，并支持生成多种版本的PDF
03-18
h5-转移-pdf H5TransferPDF是一个将网页HTML渲染为PDF和各种图像格式的API工具，完美兼容HTML，CSS，JS，更好的替换支持，并支持生成多种版本的PDF。 好未来内部有很多使用PDF的场景，某些演讲义，布局等，尤其是在...
JS实现9*9乘法表.html
08-16
JS面试题，使用JavaScript实现如下效果9*9乘法口诀表，要求和图片一致，不允许使用table。
H5和JAVASCRIPT实战教程
06-14
WEB开发入门编程，从各种开发工具的讲解到html标签，css元素讲解，js课程系列。
HTML九九乘法表的灵活应用
热门推荐
fhx308050的博客
02-03 2万+
九九乘法表是一个每个人都会的算法表，在生活中我们也会经常的用到这个算法表，所以今天就写了下在HTML里面怎么生成九九乘法表和怎么灵活应用，显示时生成不同的效果。 一、默认生成 效果图如下： HTML页面的代码如下： 九九乘法表 table{ width:600px; border-collapse:collapse; } table
乘法口诀HTML
狼行千里
01-13 3464
Html版本的乘法口诀代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>九九乘法表</title> <style> p { width: 100px; display: inline-block; padding:..
php九九乘法表隔行换色,JavaScript实现99乘法表及隔行变色实例代码_javascript技巧...
weixin_39585035的博客
04-01 465
项目需求：实现在页面中输出99乘法表。(要求：以每三行为一组，实现隔行变色(颜色为白，红，黄(也可自己定义))，鼠标滑过每一行，行背景颜色变为蓝色，鼠标离开又恢复原来的颜色)，隔行变色的效果需要用if和switch两种判断方式都能实现；额，分析一下实例要求：一个99乘法表，一个多方法的隔行变色，鼠标滑过变另外一个颜色，离开恢复原色。 嗯，我们一步步来吧！99乘法表的实现，我相信很多人都知道怎么实现...
JS如何装饰PHP九九乘法表,js实现精美的九九乘法表效果代码
weixin_42529544的博客
04-08 341
本文主要介绍了js实现华丽的九九乘法表效果的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧效果图：代码如下：span实现的乘法表.wrap {width: 800px;margin: 20px auto;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}span...
HTML做一个九九乘法表
littielucky的博客
12-13 7951
九九乘法表 如下图： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>九九乘法表</title> <h2>九九乘法表</h2> <br/> </head> <body> <script lan...
99乘法表用html语言做出来,使用web前端简单的写了个九九乘法表!
weixin_42421177的博客
05-30 3169
我在学习JavaScript之前学习了html xml css,也有一定的编程基础,我用了半天时间将js的基础知识学习了一遍.最终简简单单地写了一个九九乘法表!我觉得基础的语法知识还是需要了解的.我就简单把一些比较重要或者有区别列举了出来!JavaScript基础语法JavaScript的输出：window.alert() 弹出警告框document.write() ⽅法将内容写到 HTML ⽂档...
在HTML中使用Javascript和CSS制作九九乘法口诀表
Monkey_KingWoWo的博客
07-21 2190
<html> <head> <title>99乘法表</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <style type="text/css"> table{ width:800px; border-collapse:separate; } table td{ bor.
移动h5-9超级密码
最新发布
01-07
移动H5-9超级密码，是移动公司推出的一种用于重要安全认证的密码。具体来说，它是一种基于移动网络技术的全新密码认证方法，可以在移动终端上进行设置和使用。 移动H5-9超级密码的主要特点如下： 1. 安全性高：移动H5-9超级密码采用高强度的加密算法，保证了密码的安全性，有效防止了密码被破解的风险。 2. 便捷性：用户可以通过移动终端上的设置界面进行密码的设置和修改，使用时只需输入个人设定的密码就可以完成身份验证，极大地方便了用户的操作。 3. 多用途性：移动H5-9超级密码可以应用于各种重要的场景，例如手机银行、支付宝等重要应用的登录认证，确保了用户的账户和交易的安全。 4. 兼容性强：移动H5-9超级密码兼容性广泛，可以在不同类型的移动终端上使用，无论是智能手机还是平板电脑都可以方便地使用这种密码认证方式。 总体来说，移动H5-9超级密码是移动公司为了提高用户的账户和交易安全性而推出的一种密码认证方式。它的安全性高、便捷性强、多用途性广，能够在不同移动设备上使用。通过使用移动H5-9超级密码，用户可以更加放心地使用各种移动应用，并且不用担心密码被破解的风险。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值