html+css+js入门一

最新推荐文章于 2024-05-31 19:50:46 发布
最新推荐文章于 2024-05-31 19:50:46 发布
阅读量115 收藏 1
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ljs298443/article/details/117751968
版权

一、登录界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <style>
        .boy{
            width: 100%;
            height: 700px;
            background-image: url(bg06.png);
        }
        .yuan{
            position: absolute;
            top:70px;
            left:480px;
            width: 600px;
            height: 600px;
            border-radius: 70%;
            background-color:white;
            opacity: 0.7;
        }
        .login{
            font-size: 35px;
            font-weight: bolder;
            position: absolute;
            top:100px;
            left: 220px;
        }

        #yx{
            position: absolute;
            top:30px;
            left: -56px;
            border: none;
            border-bottom: solid 2px gray;
            
        }

        #mm{
            position: relative;
            top:30px;
            left: -56px;
            border: none;
            border-bottom: solid 2px gray;
        }


        #one{
            position: absolute;
            top:170px;
            left: 270px;
        }

        #two{
            position: absolute;
            top:80px;
            left: -5px;
        }

        #three{
            position: absolute;
            top:90px;
            left: -5px;
        }

        #btn1{
            width: 100px;
            height: 35px;
            position: absolute;
            top:130px;
            left: -73px;
            background-color:rgb(238, 255, 0);
            display: inline-block;
            padding: 2px;
            border-radius: 45px;
        }

        #btn2{
            width: 100px;
            height: 35px;
            position: absolute;
            top:130px;
            left: 45px;
            background-color: rgb(238, 255, 0);
            display: inline-block;
            padding: 2px;
            border-radius: 45px;
        }
    </style>
</head>
<body>
    <div class="boy">
        <div class="yuan">
            <b class="login">立即登录</b>
            <text id="one">邮箱<text><input type="text" id="yx" onblur="checkemail()">
            <text id="two">密码<text><input type="password" id="mm" placeholder="密码长度至少为6位" onblur="checkpassword()">
            <a href="" style="flood-color: rgb(180, 48, 48);" id="three">忘记密码?</a>
            <button type="button" id="btn1">登录</button> <button type="button" id="btn2">注册</button>
        </div>
    </div>
    
</body>
<script>
    function checkemail(){
        var email=document.getElementById("yx").value;
        if(email.match(/[0-9]{5,8}@[0-9a-zA-Z]{2,4}.com/) == null){
            alert("邮箱格式错误");
            return false;
        }
        return true;
    }

    function checkpassword(){
        var pas=document.getElementById("mm").value;
        if(pas.match(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/) == null){
            alert("密码格式错误");
            return false;
        }
        return true;
    }
</script>
</html>

效果：

二、注册界面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <style>
        #boy{
            width: 100%;
            height: 700px;
            background-image: url(bg06.png);
        }

        .zc{
            font-size: 30px;
            font-weight: bolder;
            position: absolute;
            top:30px;
            left: 320px;

        }

        #one{
            position: absolute;
            top:60px;
            left:200px;
            width: 800px;
            height: 600px;
            background-color:white;
            opacity: 0.7;
        }

        #two{
            position: relative;
            top:52px;
            left:992px;
            width: 300px;
            height: 600px;
            background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.t-biao.com%2FtubiaoJDEwLmFsaWNkbi5jb20vYmFvL3VwbG9hZGVkL2kzL1RCMTdsb2VSJDZYYUZYViQ1JDM.jpg&refer=http%3A%2F%2Fwww.t-biao.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625799470&t=d2fbc86763123dcb5bc62b4c2849e10a);
        }

        #fir{
            position: absolute;
            top:90px;
            left: 370px;
        }

        #sen{
            position: absolute;
            top:70px;
            left: -5px;
        }

        #three{
            position: absolute;
            top:70px;
            left: 5px;
        }

        #four{
            position: absolute;
            top:70px;
            left: 1px;
        }

        #five{
            position: absolute;
            top:80px;
            left:1px;
        }

        #six{
            position: absolute;
            top:80px;
            left: -15px;
        }

        #yx{
            position: absolute;
            top:30px;
            left: -100px;
            width: 254px;
            border: none;
            border-bottom: solid 2px gray;
            
        }

        #ming{
            position: relative;
            top:10px;
            left: -100px;
            width: 254px;
            border: none;
            border-bottom: solid 2px gray;
        }

        #nan{
            position: absolute;
            top:37px;
            left: -11px;
        }

        #nu{
            position: absolute;
            top:37px;
            left: 50px;
        }
        
        #l{
            position: absolute;
            top: 35px;
            left: -30px;
        }

        #n{
            position: relative;
            top: 15px;
            left: 30px;
        }

        #toux{
            position: relative;
            top:15px;
            left: -110px;
            width: 262px;
            border: none;
            border-bottom: solid 2px gray;
        }

        #mm{
            position: relative;
            top:15px;
            left: -110px;
            width: 262px;
            border: none;
            border-bottom: solid 2px gray;
        }

        #resm{
            position: relative;
            top:15px;
            left: -95px;
            width: 262px;
            border: none;
            border-bottom: solid 2px gray;
        }

        #btn1{
            width: 270px;
            height: 35px;
            position: absolute;
            top:85px;
            left: -100px;
            background-color:rgb(238, 255, 0);
            display: inline-block;
            padding: 2px;
            border-radius: 45px;
        }

        #btn2{
            width: 100px;
            height: 35px;
            position: relative;
            top:430px;
            left: 90px;
            text-decoration: none;
            color:white;
            /* background-color:rgb(238, 255, 0); */
            display: inline-block;
            padding: 2px;
            border-radius: 45px;
            background-color: transparent;
        }


        #zhanghao{
            font-size: 30px;
            font-weight: bolder;
            position: absolute;
            top:60px;
            left: 80px;
            color: rgba(218, 36, 36, 0.842);
        }

        #haojiu{
            font-size: 18px;
            font-weight: bolder;
            position: absolute;
            top:90px;
            left:50px;
            color: rgba(231, 33, 33, 0.986);
        }

    </style>
</head>
<body>
    <div id="boy">
        <div id="one">
            <b class="zc">立即注册</b>
            <text id="fir">邮箱<text><input type="text" id="yx" onblur="checkemail()">
            <text id="sen">用户名<text><input type="text" id="ming" placeholder="用户名长度不能超过五位" style="text-align: center;" onchange="checkname()">
            <text id="three">性别<br><text><text id="l">男</text><input type="radio" name="sex" id="nan"> <text id="n">女</text><input type="radio" name="sex" id="nu"><br>
            <text id="four">头像<text><input type="file" id="toux" placeholder="未选择任何文件">
            <text id="five">密码<text><input type="password" id="mm" placeholder="密码长度至少为6位,且为数字和字母的组合" onblur="checkpassword()">
            <text id="six">确认密码<text><input type="password" id="resm" placeholder="两次密码须一致" style="text-align: center;" onblur="checkrespassword()">
            <button type="button" id="btn1">注册</button>
        </div>
        <div id="two">
            <text id="zhanghao">已有账号?</text>
            <p id="haojiu">有账号就登录吧,好久不见了!</p>
            <button type="button" id="btn2">登录</button>
        </div>
    </div>
</body>
<script>
    function checkemail(){
        var email=document.getElementById("yx").value;
        if(email.match(/[0-9]{5,8}@[0-9a-zA-Z]{2,4}.com/) == null){
            alert("邮箱格式错误");
            return false;
        }
        return true;
    }

    function checkname(){
        var xm=document.getElementById("ming").value;
        if(xm.length>5){
            alert("用户名格式错误");
            return false;
        }
        return true;
    }

    function checkpassword(){
        var pas=document.getElementById("mm").value;
        if(pas.match(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/)==null){
            alert("密码格式错误");
            return false;
        }
        return true;
    }

    function checkrespassword(){
        var password1=document.getElementById("mm").value;
        var password2=document.getElementById("resm").value;
        if(password1 != password2){
            alert("密码不一致!");
            return false;
        }
        return true;
    }
</script>
</html>

效果：

三、旋转相册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{  
            padding: 0;  
            margin: 0;  
            border: none;  
            outline: none;  
            box-sizing: border-box;  
        }  

        .Container{
            margin: 4% auto;  
            width: 300px;  
            height: 140px;  
            position: relative;
            top: 100px;
            perspective: 1000px;
            border: 2px; 
            
        }

        #one{
            background-image: url("bg06.png");
            width: 100%;
            height: 650px;
            overflow: hidden;
            position: absolute;
            top: 50px;
        }

        #two{
            position: fixed;
            top: 0px;
            background-color: cadetblue;
            width: 100%;
            height: 50px;
        }

        #three{
            position: relative;
            left: 45px;
            top: 12px;
        }

        #four{
            position: fixed;
            right: 140px;
            top: 12px;
        }

        #five{
            position: fixed;
            right: 45px;
            top: 12px;
        }

        #carousel{
            width: 100%;
            height: 650px;
            position: absolute;
            transform-style:preserve-3d; 
            animation: rotation 20s infinite linear;
        }  

        #carousel:hover{ 
            animation-play-state: paused;  

        }  

        #carousel figure{
            display: block; 
            position: absolute;  
            width: 220px;  
            height: 200px;  
            left: 10px;  
            top: 10px;  
            background: black;  
            overflow: hidden;  
            border: solid 5px black;  
        }  

        img{
            filter: grayscale(0);
            cursor: pointer;  
            transition:all 0.3s ease 0s;  
            width: 100%;  
            height: 100%;  
        }  

        img:hover{  
            filter: grayscale(1);  
            transform: scale(1.2,1.2);
        }  

        #carousel figure:nth-child(1){transform: rotateY(0deg) translateZ(288px);}  
        #carousel figure:nth-child(2) { transform: rotateY(45deg) translateZ(288px);}  
        #carousel figure:nth-child(3) { transform: rotateY(90deg) translateZ(288px);}  
        #carousel figure:nth-child(4) { transform: rotateY(135deg) translateZ(288px);}  
        #carousel figure:nth-child(5) { transform: rotateY(180deg) translateZ(288px);}  
        #carousel figure:nth-child(6) { transform: rotateY(225deg) translateZ(288px);}
        #carousel figure:nth-child(7) { transform: rotateY(270deg) translateZ(288px);}
        #carousel figure:nth-child(8) { transform: rotateY(325deg) translateZ(288px);}


        @keyframes rotation{
            from{
                transform: rotateY(0deg);  
            }  
            to{  

                transform: rotateY(360deg);  
            }  

        }
    </style>
</head>
<body>
    <div id="one">
        <div id="two">
            <text id="three">欢迎李四登录!</text> <text id="four">个人信息</text> <text id="five">退出</text>
        </div>
        <div class="Container"> 
            <div id="carousel"> 
                <figure><img src="pic1.jpeg" ></figure>
            
                <figure><img src="pic2.jpg"></figure>  
            
                <figure><img src="pic3.jpg" ></figure>  
            
                <figure><img src="pic4.jpg" ></figure>  
            
                <figure><img src="pic5.jpg"></figure>  
            
                <figure><img src="pic6.jpg" ></figure>
                <figure><img src="pic7.jpg" ></figure>
                <figure><img src="pic8.jpg" ></figure>
            </div> 
        </div> 

    </div>
   
</body>
</html>

效果：

 

ljs298443
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML+CSS+JavaScript编程入门指南
12-30
下载文件是HTML+CSS+JavaScript编程入门指南这本书的示例代码，全书分HTML，CSS与JavaScript三个部分，然后结合三个部分用项目说明应用方法。各部分的代码展示了三种语言的使用方法，可以搭配webstorp执行
js+HTML实现组织结构图
m0_55728090的博客
03-02 2120
记得引用jQuery。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Title</title> </head> <style> @media screen a...
HTML5+CSS3+JS入门教程 + 源代码 pdf
03-28
HTML5+CSS3+JS，教程，源代码 javascript 很好的开发编辑教程 下载试读
Html+Css+Javascript从入门到精通.pdf
09-27
Html+Css+Javascript从入门到精通.pdfHtml+Css+Javascript从入门到精通.pdf
HTML+CSS+JS-入门基础ppt课件.ppt
11-19
HTML+CSS+JS-入门基础ppt课件.ppt
Html+Css+Javascript从入门到精通
08-31
Html+Css+Javascript从入门到精通 高清，一本特别好的网页开发制作教程。
CSS实现一个雨滴滑落效果
云加速
05-28 1265
这只是一个非常基础的示例，真实的雨滴滑落效果可能需要更复杂的动画和可能的JavaScript交互来实现更逼真的效果，比如雨滴的大小、速度、下落路径的随机性等。如果你想要一个更复杂的动画效果，你可能需要考虑使用SVG、Canvas或者WebGL等技术，并结合JavaScript来实现。使用纯CSS来实现一个真实的雨滴滑落效果可能会有些挑战，因为CSS主要关注于静态样式和简单的动画效果。然而，你可以使用CSS动画和@keyframes来模拟一个雨滴滑落的简化效果。这个示例中的雨滴是一个简单的圆形元素。
css-垂直居中的几种写法
xxuxioxx的博客
05-27 352
垂直居中的几种写法
CSS 空间转换 动画
qq_67140973的博客
05-31 287
空间转换、视距 - perspective、空间转换 - 旋转、立体呈现 - transform-style、空间转换 - 缩放、动画 - animation、动画的基本使用、animation 复合属性、animation 拆分属性、多组动画
CSS学习笔记：bootstrap的介绍、下载、使用及响应式布局的实现
lbcbjtlhmjq的博客
05-30 724
Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的CSS 样式 bootstrap过时了吗？ 其实在学bootstrap这一部分的网课时，在弹幕上看到一些同学说bootstrap已经过时了，这里谈谈我的看法
【html知识】html中常用的表单元素+css格式美化
weixin_56334307的博客
05-30 307
本作品是一个简洁明了的HTML文档，包含了多种常用的表单元素，如输入框、密码框、单选按钮、多选按钮、下拉列表、文本域、按钮、隐藏文字以及文件上传等。每个元素都配备了相应的说明和示例，方便用户快速理解和使用。
第二十四章多栏布局解决方案（什么是自适应?/）
J3259392566的博客
05-29 564
5.middle 内容拉回来了，但 left 也跟着过来了，所以要还原，就对 left 使用相对定位 left:-200px 同理，right 也要相对定位还原right:-220px;4、这时left 拉回来了，但会覆盖middle内容的左端，要把middle内容拉出来，所以在外围container加上padding:0 220px 0 200px;4、此时main占满了，所以要把left拉到最左边，使用margin-left:-100%，同理right使用margin- left:-220px;
css-Ant-Menu 导航菜单更改为左侧列表行选中
2301_76671906的博客
05-31 175
Ant-Menu 导航菜单更改为左侧列表行选中
CSS弹性布局方式，及其常用属性
qq_62357662的博客
05-30 326
flex-grow：指定弹性项目的放大比例，默认为0，即不放大。flex-shrink：指定弹性项目的缩小比例，默认为1，即按照比例缩小。CSS弹性布局（Flexbox）是一种用于排列元素的布局模型，它提供了一套属性和值，使元素能够以弹性和自适应的方式排列在容器中。使用Flexbox布局，需要将父容器的display属性设置为flex或inline-flex，这样子元素就可以成为弹性项目。以上是一些常用的Flexbox属性及其作用，通过灵活使用这些属性，可以实现各种弹性的布局效果。
使用element的提示框并修改css
qq_43235503的博客
05-30 169
使用element的提示框并修改css
Day08：CSS 高级
EmulateStep的博客
05-27 688
本文首先讲解了CSS的三种定位方式以及实际开发中的使用场景，接下来讲解了堆叠层级z-index、什么是精灵图、怎么使用精灵图、字体图标的下载和使用、怎么上传自己的字体图标，然后讲了什么是基线以及行内的垂直对齐方式，最后讲了过渡、透明度和光标类型，希望对大家的学习有所帮助！
CSS学习笔记目录
wz_1992的博客
05-30 300
CSS学习笔记之基础教程（一） CSS学习笔记之基础教程（二） CSS学习笔记之中级教程（一） CSS学习笔记之中级教程（二） CSS学习笔记之中级教程（三） CSS学习笔记之高级教程（一） CSS学习笔记之高级教程（二） CSS学习笔记之高级教程（三） CSS学习笔记之高级教程（四）
CSS中z-index不生效的原因和解决办法
最新发布
2301_79858914的博客
05-31 699
了解堆叠上下文的创建：识别哪些属性会创建新的堆叠上下文，并了解它们对z-index的影响。管理堆叠顺序：确保在同一个堆叠上下文内正确使用z-index值，以达到预期效果。检查元素属性：如果z-index不生效，检查元素是否创建了新的堆叠上下文，调整属性如positionopacitytransform等。避免不必要的堆叠上下文：尽量减少不必要的堆叠上下文创建，使用其他方法如translate等实现视觉效果。通过理解和管理堆叠上下文，可以有效地解决z-index。
使用element的小弹框并修改css
qq_43235503的博客
05-30 242
使用element的小弹框并修改css
html+css+javascript编程入门指南pdf
10-20
HTML、CSS和JavaScript是现代网页开发的三大基石。HTML是一种用于构建网页结构的标记语言，通过使用不同的HTML元素和属性，可以将文字、图片、链接等内容展示在网页上。CSS是一种用于设置网页样式的语言，通过使用不同的CSS属性和选择器，可以为网页元素提供不同的样式效果，包括颜色、字体、布局等。JavaScript是一种用于实现网页交互和动态效果的脚本语言，通过使用不同的JavaScript语法和函数，可以进行表单验证、动态内容加载、页面元素操作等。 对于初学者来说，学习HTML、CSS和JavaScript的最佳方式是结合实践和理论。首先，可以从网上或书籍中找到一本编程入门指南PDF，这种资源通常会提供基础知识和实例代码来帮助初学者理解和运用这些语言。在学习过程中，可以分别学习HTML、CSS和JavaScript的基础语法和常用特性，例如HTML标签的用法、CSS选择器的使用和JavaScript函数的编写方法。同时，可以通过模仿和修改实例代码来锻炼自己的编程能力。 此外，建议初学者在学习的过程中，尽量找一些简单的项目来实践。例如，可以尝试创建一个简单的网页，使用HTML来构建页面结构，使用CSS来设置页面样式，使用JavaScript来实现一些简单的交互效果，如点击按钮弹出提示框等。通过实际操作，可以更好地理解和记忆所学的知识。 最重要的是，编程是一个不断学习和实践的过程。只有不断地写代码和解决问题，才能不断提高自己的编程能力。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值