前端的几个静态网页的代码和效果

前端的案例

1.html的form表单的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js的操作符</title>

</head>
<body>
    <form action ="" method="get" enctype="multipart/form-data">
        <p><label for = "1">用户名:<input type="text" name="user" id = "1"></p>
        <p>密&emsp;码:<input type="password" name="psw"></p>

        <p>
            性&emsp;别:
            <input type="radio" name="lalal1" value="male"> 男
            <input type="radio" name="lalal2" value="female"> 女
            <input type="radio" name="lalal3" value="secret"> 保密
        </p>
        <p>
            爱&emsp;好:
            <input type="checkbox" name="hobby" value="singing"> 唱歌
            <input type="checkbox" name="hobby" value="dance"> 跳舞
            <input type="checkbox" name = "hobby" value="rap"> rap

        </p>
        <p>
            上传文件:<input type="file">
        </p>
        <p>
            地&emsp;址:
            <select name="attr" id="">
                <optgroup label="黑龙江省">
                    <option value="jms" selected>佳木斯</option>
                    <option value="hr">哈尔滨</option>
                </optgroup>
                <optgroup label="吉林省">
                    <option value="cc">长春</option>
                    <option value="sy">松原</option>
                </optgroup>
            </select>
        </p>
        <p>
            个人简介:
            <textarea name="profile" rows = "10" cols = "20"></textarea>
        <p>
             <input type="submit" value="提交">
            <input type="reset" value="重置">
        </p>
    </form>
</body>
</html>

在这里插入图片描述

2.背景样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景样式</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        } /*使你的页面能全部的契合浏览器*/
        .top{
            width: 100%;
            height: 64px;
            background: black;
        }
        .top .menu{
            width: 1200px;
            height: 100%;
            background: #6fa026;
            margin: 0 auto;
        } /*这里的top后面记得加空格因为这是后代选择器,有个特别需要记得的点就是margin:0 auto是使子标签居中*/
        .middle{
            width: 100%;
            height: 500px;
            background: wheat;
        }
        .middle .content{
            width:1200px;
            height:100%;
            background: #3d3c75;
            margin:0 auto;
        }
        .bottom1{
            width: 100%;
            height: 100px;
            background: #775522;
        }
        .bottom1 .bot-top1{
            width: 1200px;
            height: 100%;
            background: gold;
            margin:0 auto;
        }
        .bottom2{
            width: 100%;
            height: 60px;
            background: black;
        }
        .bottom2 .bot-top2{
            width: 1200px;
            height:100%;
            background: coral;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="menu"></div>
    </div>
    <div class="middle">
        <div class="content"></div>
    </div>
    <div class="bottom1">
        <div class="bot-top1"></div>
    </div>
    <div class="bottom2">
        <div class="bot-top2"></div>
    </div>

</body>
</html>

在这里插入图片描述
这里为了截图方便而且能解全面所以我用的500px,如果调成800px会更好看一些。

3.静态轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>静态轮播图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
            /*text-align: center;*/
        }
        .top{
            width: 100%;
            height: 64px;
            background: black;
        }
        .top .menu{
            width: 1200px;
            height: 100%;
            background: #6fa026;
            margin: 0 auto;
        } /*这里的top后面记得加空格因为这是后代选择器,有个特别需要记得的点就是margin:0 auto是使子标签居中*/
        .middle{
            width: 100%;
            height: 800px;
            background: wheat;
        }
        .middle .content{
            width:1200px;
            height:100%;
            background:white;
            margin:0 auto;
        }
        .middle .content .con-left{
            height:100%;
            width: 850px;
            background: darkviolet;
            float: left;
        }
        .middle .content .con-left .banner{
            height: 200px;
            width:850px;
            background: cyan;
            position: relative;
        }
        .middle .content .con-left .banner .cir{
            /*height: 17px;*/
            /*width: 118px;*/
            /*background: #754e22;*/
            bottom: 20px;
            position: absolute;
            left: 50%;
            margin-left: -59px;

        }
        .middle .content .con-left .banner .cir li{
            height: 15px;
            width: 15px;
            float: left;
            border: 1px solid red;
            margin-left: 10px;
            border-radius: 50%;
            /*position: absolute;*/
        }
        .middle .content .con-left .banner .btn{
            font-size: 50px;
            color: white;
            height:200px;
            line-height: 200px;
        }
        .middle .content .con-left .banner .btn #left{
            position: absolute;
            left: 20px;
        }
        .middle .content .con-left .banner .btn #right{
            position: absolute;
            right: 20px;
        }
        .middle .content .con-left .banner img{
            height: 200px;
            width: 850px;
            position: absolute;
        }
        .middle .content .con-right{
            height:100%;
            width: 300px;
            background: #754e22;
            float: right;
        }
        .bottom1{
            width: 100%;
            height: 100px;
            background: #775522;
        }
        .bottom1 .bot-top1{
            width: 1200px;
            height: 100%;
            background: gold;
            margin:0 auto;
        }
        .bottom2{
            width: 100%;
            height: 60px;
            background: black;
        }
        .bottom2 .bot-top2{
            width: 1200px;
            height:100%;
            background: coral;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="menu"></div>
    </div>
    <div class="middle">
        <div class="content">
            <div class="con-left">
                <div class="banner">
                    <ul class="pic">
                        <li><img src="D:\pathfinder\untitled1\8.jpeg" alt=""></li>
                        <li><img src="D:\pathfinder\untitled1\7.png" alt=""></li>
                        <li><img src="D:\pathfinder\untitled1\9.png" alt=""></li>
                        <li><img src="D:\pathfinder\untitled1\4.jpeg" alt=""></li>
                    </ul>
                    <ul class="btn">
                        <li id="left">&lt;</li>
                        <li id="right">&gt;</li>
                    </ul>
                    <ul class="cir">
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>
            <div class="con-right"></div>
        </div>
    </div>
    <div class="bottom1">
        <div class="bot-top1"></div>
    </div>
    <div class="bottom2">
        <div class="bot-top2"></div>
    </div>
</body>
</html>

在这里插入图片描述
这个暂时还不能导入功能,动态的轮播图可以实现点击的事件。

4.点击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js事件操作</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background: cyan;
            text-align: center;
            line-height: 300px;
        }
        .wo{
            font-size: 30px;
            font-family: 华文楷体;
        }
        .set{
            width: 80px;
            height: 30px;
            background: gold;
            margin-left: 20px;
        }
    </style>

</head>
<body>
    <p>
        <label for="attr">样&emsp;式:</label>
        <input type="text" id="attr" placeholder="请输入css样式">
    </p>
    <p>
        <label for="attv">样式值:</label>
        <input type="text" id="attv" placeholder="请输入样式值">
    </p>
    <p>
        <input class="set" type="button" value="设置">
    </p>
    <div class="wo">我就是我</div>
<script>
    var obj = document.querySelector("div");
    obj.onmouseenter = function () {
        obj.innerText ="我其实不是我"
    };
    obj.onmouseleave = function () {
        obj.innerText = "我就是我"
    };
    var input = document.querySelectorAll("input");
    input[2].onclick = function () {
      var attr = input[0].value;
      var attv = input[1].value;
      obj.style[attr] = attv;
      obj[attr] = attv;
    }
</script>
</body>
</html>

在这里插入图片描述
这个还是很好玩的,你可以直接通过在上面填充指令,下面就可以直接出现。

5.动态轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
            /*text-align: center;*/
        }
        .top{
            width: 100%;
            height: 64px;
            background: black;
        }
        .top .menu{
            width: 1200px;
            height: 100%;
            background: #6fa026;
            margin: 0 auto;
        } /*这里的top后面记得加空格因为这是后代选择器,有个特别需要记得的点就是margin:0 auto是使子标签居中*/
        .middle{
            width: 100%;
            height: 800px;
            background: wheat;
        }
        .middle .content{
            width:1200px;
            height:100%;
            background:white;
            margin:0 auto;
        }
        .middle .content .con-left{
            height:100%;
            width: 850px;
            background: darkviolet;
            float: left;
        }
        .middle .content .con-left .banner{
            height: 200px;
            width:850px;
            background: cyan;
            position: relative;
        }
        .middle .content .con-left .banner .cir{
            /*height: 17px;*/
            /*width: 118px;*/
            /*background: #754e22;*/
            bottom: 20px;
            position: absolute;
            left: 50%;
            margin-left: -59px;

        }
        .middle .content .con-left .banner .cir li{
            height: 15px;
            width: 15px;
            float: left;
            border: 1px solid red;
            margin-left: 10px;
            border-radius: 50%;
            cursor: pointer;
            /*position: absolute;*/
        }
        .middle .content .con-left .banner .cir li:hover{
            background: white;
        }
        .middle .content .con-left .banner .btn{
            font-size: 50px;
            color: white;
            height:200px;
            line-height: 200px;
            display: none;
            cursor: pointer;
        }
        .middle .content .con-left .banner:hover .btn{
            display: block;
        }
        .middle .content .con-left .banner .btn #left{
            position: absolute;
            left: 20px;
        }
        .middle .content .con-left .banner .btn #right{
            position: absolute;
            right: 20px;
        }
        .middle .content .con-left .banner img{
            height: 200px;
            width: 850px;
            position: absolute;
            display: none;
        }
        .middle .content .con-left .banner .pic .show
        {
            display: block;
        }
        .middle .content .con-right{
            height:100%;
            width: 300px;
            background: #754e22;
            float: right;
        }
        .bottom1{
            width: 100%;
            height: 100px;
            background: #775522;
        }
        .bottom1 .bot-top1{
            width: 1200px;
            height: 100%;
            background: gold;
            margin:0 auto;
        }
        .bottom2{
            width: 100%;
            height: 60px;
            background: black;
        }
        .bottom2 .bot-top2{
            width: 1200px;
            height:100%;
            background: coral;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="menu"></div>
    </div>
    <div class="middle">
        <div class="content">
            <div class="con-left">
                <div class="banner">
                    <ul class="pic">
                        <li><img class="show" src="D:\pathfinder\untitled1\8.jpeg" alt=""></li>
                        <li><img src="D:\pathfinder\untitled1\7.png" alt=""></li>
                        <li><img src="D:\pathfinder\untitled1\9.png" alt=""></li>
                        <li><img src="D:\pathfinder\untitled1\6.jpeg" alt=""></li>
                    </ul>
                    <ul class="btn">
                        <li id="left">&lt;</li>
                        <li id="right">&gt;</li>
                    </ul>
                    <ul class="cir">
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>
            <div class="con-right"></div>
        </div>
    </div>
    <div class="bottom1">
        <div class="bot-top1"></div>
    </div>
    <div class="bottom2">
        <div class="bot-top2"></div>
    </div>
    <script>
        var obj = document.querySelectorAll(".cir li");
        var pic = document.querySelectorAll(".pic img");
        n = 1;
        for(let i=0;i<obj.length;i++)
            obj[i].onclick = function () {
                for(let j=0;j<pic.length;j++)
                    if(i===j){
                    pic[j].className = "show";
                    n = j;
                    }
                    else{
                    pic[j].className = "";
                    }
        }
        var btn = document.querySelectorAll(".btn li");
        btn[0].onclick = function () {
            if(n>0){
                pic[n].className = "";
                n--;
                pic[n].className = "show";
            }
            else {
                pic[n].className = "";
                n = pic.length-1;
                pic[n].className = "show";
            }
        };
        btn[1].onclick = function () {
            pic[n].className = "";
            n = n + 1;
            // pic[n].className = "show";
            if(n > pic.length-1){
                n=0;
            }
            pic[n].className = "show";
        };
        function auto1() {
            pic[n].className = "";
            n = n + 1;
            if(n > pic.length-1){
                n=0;
            }
            pic[n].className = "show";
        }
        var timer = setInterval(auto1, 2000);
        var banner = document.querySelector(".banner");
        banner.onmouseenter = function(){
            clearInterval(timer);
        }
        banner.onmouseleave = function () {
            timer = setInterval(auto1, 2000);
        }

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

这个是动态的轮播图。
在这里插入图片描述

6.自己写的巨星不易

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>my_html</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        .top{
            background: black;
            height: 60px;
            width: 100%;
        }
        .top .menu{
            background: green;
            width: 500px;
            height: 100%;
            line-height: 60px;
            text-align: center;
            margin: 0 auto;
            font-size: 25px;
            font-family: 华文仿宋;
            font-weight: bolder;
        }
        .mid{
            background: aqua;
            height: 600px;
            width: 100%;
        }
        .mid .content{
            background: white;
            width: 500px;
            height: 100%;
            margin: 0 auto;
            position: relative;
            /*float: left;*/
        }
        .mid .content .list{
            position: absolute;
            bottom: 20px;
            left: 50%;
            margin-left: -102px;
        }
        .mid .content .list li{
            background: gold;
            width: 20px;
            height: 20px;
            float: left;
            border: 1px solid red;
            margin-left: 30px;
            border-radius: 50%;
            cursor: pointer;
            text-align: center;
            line-height: 20px;
        }
         .mid .content .arrows{
             font-size: 60px;
             color: black;
             height:200px;
             line-height: 200px;
             font-family: 华文琥珀;
             cursor: pointer;

         }
         .mid .content .arrows #left{
             position: absolute;
             left: 20px;
             bottom: 300px;
         }
         .mid .content .arrows #right{
             position: absolute;
             right: 20px;
             bottom: 300px;
         }
        .mid .content img{
            width: 500px;
            height: 550px;
            position: absolute;
            display: none;
        }
        .mid .content .show{
            display: block;
        }
        .bottom{
            background: black;
            height: 80px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="menu">
            大家好,我叫毛不易
        </div>
    </div>
    <div class="mid">
        <div class="content">
            <ul class="list">
                <li>一</li>
                <li>二</li>
                <li>三</li>
            </ul>
            <img  src="D:\pathfinder\untitled1\1.jpeg" >
            <img class="show" src="D:\pathfinder\untitled1\4.jpeg">
            <img src="D:\pathfinder\untitled1\6.jpeg">
            <!--<img src="D:\pathfinder\untitled1\7.png">-->
            <ul class="arrows">
                <li id="left">&lt;</li>
                <li id="right">&gt;</li>
            </ul>
        </div>
    </div>
    <div class="bottom">
    </div>
    <script>
        var img = document.querySelectorAll(".content img");
        var list = document.querySelectorAll(".list li");
        n = 1;
        for(let i=0;i<list.length;i++){
            list[i].onclick = function () {
                for(let j=0;j<img.length;j++){
                    if(i===j){
                        img[j].className = "show";
                        n = j ;
                    }
                    else {
                        img[j].className = "";
                    }
                }
            }
        }
        var arrow = document.querySelectorAll(".arrows li");
        arrow[0].onclick = function () {
            if (n > 0) {
                img[n].className = "";
                n--;
                img[n].className = "show";
            }
            else {
                img[n].className = "";
                n = img.length - 1;
                img[n].className = "show";
            }
        };
        arrow[1].onclick = function () {
            img[n].className = "";
            n = n + 1;
            // pic[n].className = "show";
            if(n > img.length-1){
                n=0;
            }
            img[n].className = "show";
        };
        function auto1() {
            img[n].className = "";
            n = n + 1;
            if(n > img.length-1){
                n=0;
            }
            img[n].className = "show";
        }
        var timer = setInterval(auto1, 1000);
        var banner = document.querySelector(".content");
        banner.onmouseenter = function(){
            clearInterval(timer);
        }
        banner.onmouseleave = function () {
            timer = setInterval(auto1, 1000);
        }
    </script>
</body>
</html>

在这里插入图片描述

  • 6
    点赞
  • 38
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的3D环绕效果前端代码示例: ```html <!DOCTYPE html> <html> <head> <title>3D环绕效果</title> <style> .container { width: 400px; height: 400px; position: relative; perspective: 1000px; } .box { width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; animation: rotation 10s linear infinite; } .box div { position: absolute; width: 100%; height: 100%; background-color: #ccc; color: #fff; font-size: 30px; text-align: center; line-height: 400px; font-weight: bold; opacity: 0.8; transform-origin: center center -200px; box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); } .box div:nth-child(1) { transform: rotateY(0deg) translateZ(200px); background-color: #ff7675; } .box div:nth-child(2) { transform: rotateY(60deg) translateZ(200px); background-color: #74b9ff; } .box div:nth-child(3) { transform: rotateY(120deg) translateZ(200px); background-color: #55efc4; } .box div:nth-child(4) { transform: rotateY(180deg) translateZ(200px); background-color: #fdcb6e; } .box div:nth-child(5) { transform: rotateY(240deg) translateZ(200px); background-color: #a29bfe; } .box div:nth-child(6) { transform: rotateY(300deg) translateZ(200px); background-color: #dfe6e9; } @keyframes rotation { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } </style> </head> <body> <div class="container"> <div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> </div> </body> </html> ``` 这段代码使用了CSS3的3D变换和动画技术,创建了一个立方体的3D环绕效果,每个面上都有不同的内容,可以根据需要进行修改。注释已经添加在代码中,以便更好地理解。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值