前端秘籍---经典案例（2）

最新推荐文章于 2024-08-15 18:19:19 发布

weixin_47387063

最新推荐文章于 2024-08-15 18:19:19 发布

阅读量303

点赞数 7

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_47387063/article/details/139093772

版权

4.九九乘法表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>九九乘法表</title>
</head>
<body>
    <script>
        for(var i=1;i<=9;i++){
            for(var j=1;j<=i;j++){
                document.write(i+"*"+j+"="+i*j+"&nbsp&nbsp");
            }
            document.write("<br>");
        }
    </script>
</body>
</html>

5.三角形的打印

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三角形打印</title>
</head>
<body>
    <script>
        printTriangle(10); 
        function printTriangle(n) { 
            for (let i = 1; i <= n; i++) { 

 
                let str = ""; 
                for (let j = 1; j <= i; j++) { 
                    str += "* "; 
                } 
                document.write(str + "<br>"); 

 
            } 
        } 
    </script>
</body>
</html>

6.头部导航栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>XXX医疗</title>
        <link rel="stylesheet" href="./css/animate.css" />
        <style type="text/css">
            *{
              padding: 0px;
              margin: 0px;
            }
            body{
                /* background-color: pink; */
            }
            /* 导航栏部分 */
            /* start */
            .top_navigation{
                width: 100%;
                height: 80px;
                /* background-color: pink; */
                /* border: 1px red solid; */
            }
            .top_logo{
                /* background-image:url("./img/logo/top_logo.png"); */
                background:black;
                height: 65px;
                width: 248px;
                /* border: 1px red solid; */
                /* float : left; */
                text-algin: center; 
            }
            .top_logo > img {
                height: 65px;
                width: 248px;
            }
            .top_menu{
                float : left;
                margin-left: 600px;
               display: flex;
            }
            .top_menu > ul {
                 list-style: none;
                  margin: 0;
                  padding: 0;
                  display: flex;
                  flex-wrap: nowrap;
            }
            .top_menu > ul > li {
                /* float : left;     */
                /* margin-right: 80px;
                margin-top: 30px;   
                list-style-type: none; */
                /* color : #FFF; */
                /* flex: 1; */
                  width: 70px;
                  height: 70px;
                  /* border: 1px solid #ccc; */
                  margin-right: 80px;
                  margin-top: -38px;  
                
            }
            .top_menu > ul > li:hover{
                color: green;
            }
            .top_menu{
                position: relative;
            }
            .gy_p1{
                margin-top: 31px;
                width: 120px;   
                height: auto;
                text-align: center;
                /* border: 1px red solid; */
                display: none;
                padding: 5px 5px 20px 10px;
                position: absolute;
            }
            .gy:hover .gy_p1{
                display: block;
                background-color: rgba(255,255,255,0.7);
                margin-left: -35px;
                border-radius: 0px 0px 5px 5px;
                
                
            }
            gy_p1 > ul > li:first{
                
                margin-top: 0px;
                /* margin-left: 18px; */
                
                
            }
            .gy_p1 > ul > li{
                list-style-type: none;
                margin-top: 18px;
                /* margin-left: 18px; */
                
                
            }
            a{
                text-decoration: none;
                color : #000;
            }
            .top_menu > ul > li a:hover{
                color: green;
                font-weight: bold; 
               
            }
            /*头部导航栏 end */
            
            /* 轮播图 start*/
            
            #lbt {
                /* background-image: url(./img/lbt/1.jpg); */
                background-color: pink;
                height: 680px;
                width: 100%;
                background-repeat: no-repeat;
                background-size: cover;
            }
            
            #lbt >img {
                width: 100%;
                height: 680px;
                margin-top: -18px;
            }
            /* 轮播图 end*/
            
            
        </style>
	</head>
	<body onload="bf()">
        <!-- 医疗主页 -->
		<div class="index">
		    <!-- 头部导航栏  开始 -->
            <div class="top_navigation">
                <!-- logo部分 -->
                <div class="top_logo">
                    <!-- <img src="./img/logo/top_logo.png"  /> -->
                    <h1 style="color:#fff">logo</h1>
                </div>
                <!-- 菜单部分 -->
                <div class="top_menu">
                    <ul>
                        <li><a href="#">网站首页</a></li>
                        <li class="gy">
                            <a href="#" >关于XX</a>
                            <div class="gy_p1" >
                                <ul>
                                    <li><a href="https://www.baidu.com">公司简介</a></li>
                                    <li><a href="#">企业文化</a></li>
                                    <li><a href="#">公司风貌</a></li>
                                    <li><a href="#">营业执照</a></li>
                                </ul>
                            </div>
                            
                        </li>
                        <li class="gy"><a href="#">产品中心</a>
                        <div class="gy_p1">
                           <ul>
                               <li><a href="#">医用高分子系列</a></li>
                               <li><a href="#">21212121</a></li>
                               <li><a href="#">21211</a></li>
                               <li><a href="#">1212121</a></li>
                               <li><a href="#">2121212</a></li>
                               <li><a href="#">212121</a></li>
                               <li><a href="#">2121</a></li>
                               <li><a href="#">212</a></li>
                           </ul> 
                        </div>
                            
                        </li>
                        <li class="gy"><a href="#">合作案例</a>
                            <div class="gy_p1">
                               <ul>
                                   <li><a href="https://www.baidu.com">我的企业文焕产品</a></li>
                                   <li><a href="#">21212121</a></li>
                                   <li><a href="#">21211</a></li>
                                   <li><a href="#">1212121</a></li>
                                   <li><a href="#">2121212</a></li>
                                   <li><a href="#">212121</a></li>
                                   <li><a href="#">2121</a></li>
                                   <li><a href="#">212</a></li>
                               </ul> 
                            </div>
                        </li>
                        <li><a href="#">服务中心</a></li>
                        <li>
                    </ul>
                </div>
            </div>
            <!-- 头部导航栏  结束 -->
	</body>
</html>