网页设计实例学习（2） | 字节青训营笔记

拿奖去喝AD钙
152 阅读2分钟

👀 这是我参与「第四届青训营 」笔记创作活动的的第10天！

😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀

[@5V)GZ]0U6U)M9_NOZVUD6D.gif

🍻1、下拉菜单案例

案例：下拉菜单

image.png

案例分析：

（1）导航栏里面的 li 都要有鼠标经过效果，所以需要循环注册鼠标事件。

（2）核心原理： 当鼠标经过 li 里面的第二个孩子 ul 时，显示， 当鼠标离开，则 ul 隐藏。

代码

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>
    <link rel="stylesheet" href="./下拉菜单.css">
</head>
<body>
    <ul class="nav">
        <li>
            <a href="#">新浪微博</a>
            <ul>
                <li><a href="#">qqqq</a></li>
                <li><a href="#">qqqq</a></li>
                <li><a href="#">qqqq</a></li>
            </ul>
        </li>
        <li>
            <a href="#">新浪微博</a>
            <ul>
                <li><a href="#">qqqq</a></li>
                <li><a href="#">qqqq</a></li>
                <li><a href="#">qqqq</a></li>
            </ul>
        </li>
        <li>
            <a href="#">新浪微博</a>
            <ul>
                <li><a href="#">qqqq</a></li>
                <li><a href="#">qqqq</a></li>
                <li><a href="#">qqqq</a></li>
            </ul>
        </li>
        <li>
            <a href="#">新浪微博</a>
            <ul>
                <li><a href="#">qqqq</a></li>
                <li><a href="#">qqqq</a></li>
                <li><a href="#">qqqq</a></li>
            </ul>
        </li>

    </ul>
</body>
<script src="./下拉菜单.js"></script>
</html>

CSS

*{
    margin: 0;
    padding: 0;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
    font-size: 14px;
}
.nav{
    margin: 100px;
    border-top: 2px solid #ff8500;
}
.nav>li{
    position: relative;
    float: left;
    width: 100px;
    height: 41px;
    text-align: center;
}
.nav li a{
    display: block;
    width: 100%;
    height: 100%;
    line-height: 41px;
    color: #333;
}
.nav>li:hover{
    background-color: #eee;
}
.nav>li>a:hover{
    background-color: #eee;
    color: #ff8400;
}
.nav ul{
    display: none;
    position: absolute;
    top: 41px;
    left: 0;
    width: 100%;
    border-left: 1px solid #fecc5b;
    border-right: 1px solid #fecc5b;
}
.nav ul li{
    border-bottom: 1px solid #fecc5b;
}
.nav ul li a:hover{
    background-color: #fff5da;
}

JavaScript

var nav=document.querySelector('.nav');
var lis=nav.children;
for(var i=0;i<lis.length;i++){
    lis[i].onmouseover=function(){
        this.children[1].style.display='block';
    }
    lis[i].onmouseout=function(){
        this.children[1].style.display='none';
    }
}

效果展示

Screenshot_2022_0818_164904.gif

[@5V)GZ]0U6U)M9_NOZVUD6D.gif

🍻2、仿注册页面框案例

核心思路

  • 在点击图标时密码框显示隐藏密码，因此需要获取的事件源为图标和密码框；事件类型为点击眼睛图标onclick；点击后if语句判断密码表单的类型，如果是类型type为password则转变为文本text，图标变为睁眼；如果是类型type为text则转变为文本password，图标变为闭眼。

  • 然后判断的事件是表单失去焦点onblur

  • 如果输入正确则提示正确的信息

  • 如果输入不是6到16位，则提示错误信息

  • 因为里面变化样式较多，我们采取className修改样式

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>
    <link rel="stylesheet" href="./密码框.css">
</head>
<body>
    <div class="bigbox">
        <div class="box">
            <label for="">
                <img src="./闭眼.png" alt="" class="imgs" id="simgs">
            </label>
            <input type="password"  class="passwords" id="spasswords">
        </div>
        <div>
            <p class="message"></p>
        </div>
        <div>
            <p class="wenzi"></p>
        </div>
    </div>
    
</body>
<script src="./密码框.js"></script>
</html>

CSS

*{
    box-sizing: border-box;
}
.bigbox{
    height: 30px;
    width: 1200px;
   position: relative;
}
.box{
    float: left;
    position: relative;
    width: 400px;
    height: 30px;
    border: 1px solid #ccc;
    
}
.passwords{
    width: 350px;
    height: 25px;
    position: absolute;
    top: 3px;
    left: 0px;
    border: 0;
    outline:  none;
}
.imgs{
    width: 30px;
    position:absolute;
    right: 10px;
    top: 1px;
    cursor: pointer;
}
.message{
    float: left;
    height: 30px;
    width: 35px;
    text-align: center;
    margin: 0;
    position: absolute;
    top: 0;
    line-height: 3px;
    left: 402px;
    background-image: url();
    background-repeat:no-repeat;
    background-size: 30px 30px;
    background-position: 0 0px;
}
.messageth{
    float: left;
    height: 30px;
    width: 35px;
    text-align: center;
    margin: 0;
    position: absolute;
    top: 0;
    line-height: 3px;
    left: 402px;
    background-image: url(./叹号.png);
    background-repeat:no-repeat;
    background-size: 30px 30px;
    background-position: 0 0px;
}
.messagecw{
    float: left;
    height: 30px;
    width: 35px;
    text-align: center;
    margin: 0;
    position: absolute;
    top: 0;
    line-height: 3px;
    left: 402px;
    background-image: url(./错误.png);
    background-repeat:no-repeat;
    background-size: 30px 30px;
    background-position: 0 0px;
}
.messagezq{
    float: left;
    height: 30px;
    width: 35px;
    text-align: center;
    margin: 0;
    position: absolute;
    top: 0;
    line-height: 3px;
    left: 402px;
    background-image: url(./正确.png);
    background-repeat:no-repeat;
    background-size: 30px 30px;
    background-position: 0 0px;
}
.wenzi{
    width: 500px;
    height: 30px;
    margin: 0;
    position: absolute;
    left:438px ;
    top: 3px;
    font-size: 18px;
}

JavaScript

var img_s=document.getElementById('simgs');
var password_S=document.getElementById('spasswords');
var flag=0
img_s.onclick=function(){
    if(flag==0){
        password_S.type='text';
        img_s.src='./睁眼.png';
        flag=1;
    }
    else{
        password_S.type='password';
        img_s.src='./闭眼.png';
        flag=0;
    }

}

var ipt=document.querySelector('.passwords');
var message=document.querySelector('.message');
var wenzi=document.querySelector('.wenzi');
ipt.onblur=function(){
    if(this.value.length<6 || this.value.length>16){
        message.className='message messagecw';
        wenzi.innerHTML='输入错误,请输入6~16位密码';
    }
    else{
        message.className='message messagezq';
        wenzi.innerHTML='输入正确，祝您注册愉快';
    }
}
ipt.onfocus=function(){
    message.className='message messageth';
    wenzi.innerHTML='请输入6~16位密码';
}

效果展示 Screenshot_2022_0818_184527.gif

[@5V)GZ]0U6U)M9_NOZVUD6D.gif

🍻3、总结

🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈

今日学习了网页常见的基本布局，学习了css的布局实现，主要学习了如何使用JavaScript来控制页面，使页面成为一个动态效果。这些布局在网页中是常见的，学习这些基本布局可以对我们开发网页有很大的帮助。学习淘宝 京东等页面的布局方式以及效果实现，可以让我们选择更合适的方法来实现网页效果。

🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈

avatar
文章
阅读
粉丝