慧河第一周大作业

最新推荐文章于 2024-06-27 14:17:33 发布

bsjmxg

最新推荐文章于 2024-06-27 14:17:33 发布

阅读量101

点赞数

文章标签： java 前端

本文链接：https://blog.youkuaiyun.com/bsjmxg/article/details/127348920

版权

1.学会了js的基本应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<button onclick="tt1()">wowuyu</button>
</body>
<script src="index.js"></script>
<html>

2.学会了弄一个弹窗

<!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>
</head>
<body>
    <button onclick="function1()">haha</button>
</body>
<script>
    function function1()
    {
        alert("1111111111")
    }
</script>

</html>

3.placedhoder的使用

<!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>
</head>
<body>
    <input text="1" placeholder="22" style="width: 200px;">
</body>
</html>

4.盒子塌陷的解决方法：用overflow:hidden

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="box1"></div>
<div id="box2">
    <div id="a1"></div>
</div>
</body>
<style>
    #box1{
background-color: bisque;
width: 200px;
height: 300px;
    }
    #box2{
        background-color: blueviolet;
        width: 200px;
        height: 300px;
        overflow:hidden
    }
    #a1{
        background-color:blue;
        width: 80px;
        height: 140px;
        margin-top: 30px;
    }
</style>

<html>

5.flex布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="item" style="background-color:red;">haha</div>
        <div class="item" style="background-color: blue;">lala</div>
        <div class="item" style="background-color:purple;">dada</div>
    </div>
</body>
<style>
    .container{
        display: flex;
        flex-direction:row-reverse; 
        height: 300px;
        background-color: yellowgreen;
    
    }
    .item{
        padding: 100px;
    }
    <style>
<html>

6.学会了markdown语法