web前端学习Day4

最新推荐文章于 2024-11-01 13:37:40 发布
最新推荐文章于 2024-11-01 13:37:40 发布
阅读量40 收藏
点赞数
文章标签： 前端 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75408313/article/details/131644488
版权

01-盒子模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    div {
            width: 300px;
            height: 300px;
            background-color: pink;
            padding-left: 4px;
            border: 3px solid red;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div>
        ffffffffyttttttyyyyyyyybhbhjjjjjj
    </div>
</body>
</html>

02-内边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 600px;
            height: 600px;
            background-color: aquamarine;
            padding-left: 20px;
            padding-top: 20px;
            padding-right: 20px;
            padding-bottom: 20px;
            /* padding: 10px 60px 60px 10px;
                         上   右   下    左 */
        }
    </style>
</head>
<body>
    <div>
        idoxenrfskrikcxjnmiokklgtdogmicjtdpxekmzwsfioprelf
        ksxcsiojxrocuxrlzifxlizjrsuinaxlirufnrjrknfiuxrzwsdjozswrfxxv
        xzejronzuixjknsxfhzaljfuziounujckiunxr;fnxlauirzoicfde
        zxerfjibenzxviujkernfslixbfliuzeahinxfpviulceabkjxfrczrxf
        zxeiorjzfoesahzxuiozandp;zaowidjxh;ofhco/anxklzjfia;xzejr
        zxafjgb.euiaxhbzxvyheul,bxvckzjebcvliuewzdzwjfxluifcxbui,
    </div>
</body>
</html>

03-外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li {
            list-style: none;
            background-color: aqua;
            margin-bottom: 30px;
        }
        span {
            display: inline-block;
            width: 40px;
            background-color: aqua;
            padding-left: 4px;
        }
        div {
            width: 300px;
            height: 300px;
            background-color: bisque;
            padding-left: 4px;
            border: 3px solid red;
            margin: 40px;
        }
    </style>
</head>
<body>
    <ul>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
    </ul>
    <span>1</span><span>2</span><span>3</span><span>4</span>
    <div>wioedjmioeafhjdfniohfncurf</div>
</body>
</html>

04-外边距塌陷问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 400px;
            height: 400px;
            background-color: blue;
            /*解决方法1： border: 1px solid red; */
            /*解决方法2:  padding: 1px; */
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: aqua;
            margin-bottom: 20px;
            /*解决方法3: overflow: hidden; ------偏方*/
        }

        .son1 {
            margin-top: 300px;
        }
        /* margin塌陷问题 
        父元素的第一个元素的margin
        解决方法:给父元素添加边框
        */
        
    </style>
</head>
<body>
    <div class="father">
        <div class="son son1">111</div>
        <div class="son son2">222</div>
        <div class="son son3">333</div>
    </div>
    <span>odxxaolxm,dpoeacmpocakpocx</span>
</body>
</html>

05-文本溢出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            /* overflow:auto; */
            /* overflow: hidden; */
            /* overflow:visible;s */
            /* overflow 尽量远离 */
        }
    </style>
</head>
<body>
    <div>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
        Enim nulla tempore facilis, harum provident porro, delectus tenetur commodi culpa eius veritatis. 
        Reiciendis ea exercitationem quasi reprehenderit pariatur quos. Repellat, ratione!
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
        Enim nulla tempore facilis, harum provident porro, delectus tenetur commodi culpa eius veritatis. 
        Reiciendis ea exercitationem quasi reprehenderit pariatur quos. Repellat, ratione!
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
        Enim nulla tempore facilis, harum provident porro, delectus tenetur commodi culpa eius veritatis. 
        Reiciendis ea exercitationem quasi reprehenderit pariatur quos. Repellat, ratione!
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
        Enim nulla tempore facilis, harum provident porro, delectus tenetur commodi culpa eius veritatis. 
        Reiciendis ea exercitationem quasi reprehenderit pariatur quos. Repellat, ratione!
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
        Enim nulla tempore facilis, harum provident porro, delectus tenetur commodi culpa eius veritatis. 
        Reiciendis ea exercitationem quasi reprehenderit pariatur quos. Repellat, ratione!
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
        Enim nulla tempore facilis, harum provident porro, delectus tenetur commodi culpa eius veritatis. 
        Reiciendis ea exercitationem quasi reprehenderit pariatur quos. Repellat, ratione!
    </div>
</body>
</html>

06-样式继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            font-size: 20px;
            text-decoration: none;
            color: blue;
        }
        div {
            font-size: 50px;
            color: aqua;
        }
        /* css样式的继承性
        不是所有样式都继承，只有改变之后对布局无影响的样式，才会继承
        a链接最好在自身更改样式
         */
    </style>
</head>
<body>
    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit<br />
        <span>Voluptates reprehenderit quisquam, incidunt itaque delectus</span><br />
        <a href="#">sequi officiis dolorem ut, recusandae veniam unde fugit quam obcaecati?</a>
    </div>
</body>
</html>

07-解决padding影响盒子大小问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: aquamarine;
            padding: 40px;
            border: 2px solid red;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div>
        Lorem, ipsum dolor sit amet consectetur 
        Enim nulla tempore facilis, harum provident 
        Reiciendis ea exercitationem quasi reprehenderit
        Lorem, ipsum dolor sit amet consectetur adipisicing. 
        Enim nulla tempore facilis, harum provident porro
        Reiciendis ea exercitationem quasi reprehenderit
    </div>
</body>
</html>

08-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>
    <style>
        .father {
            width: 800px;
            height: 400px;
            background-color: aqua;
            display: flex;
            /* 排列方式 */
            /* column column-reverse row row-reverse
                垂直排   反向垂直排  水平排  反向水平排 */
            flex-direction: row;
            /* 让flex布局变为多行 */
            /* wrap nowrap */
            flex-wrap: wrap;
            /* 主轴上的布局 */
            /* center end space-around space-between space-evenly */
            justify-content: end;
            /* 侧轴上的布局 */
            /* start center end */
            /* align-items   设置单行的 */
            align-items: start;
            /* align-content   设置多行的 */
            align-content:center;
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">1</div>
        <div class="son">2</div>
        <div class="son">3</div>
        <div class="son">4</div>
        <div class="son">4</div>
        <div class="son">4</div>
        <div class="son">4</div>
        <div class="son">4</div>
    </div>
</body>
</html>

09-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>
    <style>
        .father {
            display: flex;
            width: 400px;
            height: 400px;
            background-color: aqua;
        }
        .son {
            width: 200px;
            background-color: blue;
        }
        .son1 {
            flex: 1;
        }
        .son2 {
            /* order  值越小，排列在越前面 */
            order: -2;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son1 son">1</div>
        <div class="son2 son">2</div>
    </div>
</body>
</html>

10-定位补充

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: red;
        }
        .son {
            width: 100px;
            height: 100px;
        }
        .son1 {
            position: absolute;
            /* z-index    定位中显示优先级 */
            z-index: 2;
            top: 100px;
            left: 50px;
            background-color: aquamarine;
        }
        .son2 {
            position: absolute;
            z-index: 1;
            top: 110px;
            left: 80px;
            background-color: blanchedalmond;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son1 son"></div>
        <div class="son2 son"></div>
    </div>
</body>
</html>

11-小米布局练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .goods {
            display: flex;
            width: 1240px;
            height: 600px;
        }
        .left {
            width: 230px;
            height: 600px;
            background-color:aqua;
        }
        li {
            width: 230px;
            height: 275px;
            list-style: none;
            background-color: blanchedalmond;
        }
        .right {
            width: 990px;
            height: 700px;
            list-style: none;
        }
        .right ul {
            margin-top: 0;
            display: flex;
            width: 990px;
            height: 600px;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-between;
        }
    </style>
</head>
<body>
    <div class="goods">
        <div class="left"></div>
        <div class="right">
            <ul>
                <li>
                    <a href="#">

                    </a>
                </li>
                <li>
                    <a href="#">

                    </a>
                </li>
                <li>
                    <a href="#">

                    </a>
                </li>
                <li>
                    <a href="#">

                    </a>
                </li>
                <li>
                    <a href="#">

                    </a>
                </li>
                <li>
                    <a href="#">

                    </a>
                </li>
                <li>
                    <a href="#">

                    </a>
                </li>
                <li>
                    <a href="#">

                    </a>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

12-float讲解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 1000px;
            background-color: aqua;
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
        }
        .son2 {
            background-color: black;
            float: left;
            /* float 浮动，会脱离文本流  不在保留原位置   */
            /* 会造成在其下方的兄弟元素位置发生变化
                当子元素发生浮动时，其父元素的高度发生塌陷 */
        }
        .son3 {
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son son1"></div>
        <div class="son son2"></div>
        <div class="son son3"></div>
    </div>
</body>
</html>

13-float的问题解决方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            height: 300px;
        }
        ul li {
            float: left;
            list-style: none;
            margin-right: 20px;
        }
        p {
            /* clear  清除浮动 */
            clear: both;
        }
    </style>
</head>
<body>
    <ul>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <p>sowapedizjmxowikldxzzd</p>
    </ul>
</body>
</html>

14-渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 800px;
            background-image: linear-gradient(to right, red,blue,black);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

15-字体图标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="././."></script>
    <style>
        /* 进入icon */
        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: antiquewhite;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-a-008_hanbaokuaican"></use> 
    </svg>
</body>
</html>

16-媒体查询

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            background-color: aqua;
        }
        @media screen and (min-width:900px) {
            div {
                background-color: beige;
            }
        }
        @media only screen and (min-width:320px) and (max-width:700px) {
            div {
                background-color: blue;
            }
        }
    </style>
</head>
<body>
    <div>sdrtdgtybth</div>
</body>
</html>

17-默认外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div>fdsgxjbnvugtfy</div>
</body>
</html>

18-2d转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }
        .son {
            width: 300px;
            height: 300px;
            background-color: aqua;
            /* 平移 */
            transform: translate(80px,40px); 
            /*                    X    Y */
            /* transform: translateX(80px);
            transform: translateY(40px); */
            /* 旋转 */
            /* transform: rotateZ(45deg); */
            /* 复合写法 旋转永远放在最后 */
            /* transform: translate(10px) rotateZ(45deg); */
            /* 缩放 */
            /* transform: scale(2); */
            /* 扭曲 */
            /* transform: skew(45deg); */
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

19-3d

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 100px auto;
            /* 开启3d空间 */
            transform-style: preserve-3d;
            perspective: 800px;
            /* perspective-origin: 100px 200px; */
        }
        .son {
            width: 300px;
            height: 300px;
            background-color: aqua;
            /* 旋转 */
            transform: rotate3D(1,1,0,45deg);
            /* 隐藏背部 */
            backface-visibility: hidden;
            transform-origin: top;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">222222</div>
    </div>
</body>
</html>

20-过渡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> 
    <style>
        .father {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 100px auto;
            /* 开启3d空间 */
            transform-style: preserve-3d;
            perspective: 800px;
        }
        .son {
            transition: all 5s;
            width: 300px;
            height: 300px;
            background-color: aqua;
            
            backface-visibility: hidden;
            transform-origin: top;
        }
        .son:hover {
            width: 800px;
            transform: rotate3D(1,1,0,45deg);
        }
    </style>    
</head>
<body>

</body>
</html>

21-动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes myMovie {
            from {
                width: 200px;
                background-color:red;
            }
            to {
                width: 800px;
                background-color:antiquewhite;
            }    
        }
        /* @keyframes myfirst {
            0% {
                width: 200px;
                background-color:antiquewhite;
            }
            20% {
                width: 400px;
                background-color:aqua;
            }
            80% {
                width: 800px;
                background-color:blue;
            }
            100% {
                width: 1200px;
                background-color: black;
            }
        } */
        div {
                width: 200px;
                height: 50px;
                background-color:aqua;
                animation: myMovie 5s infinite;
            }
    </style>
</head>
<body>
    <div>

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

无妄之灾|
关注
Web前端学习-day03-JavaScript
Javaw1212的博客
08-26 4037
交互性强: 由于JS语言是嵌入到HTML页面中undefined最终执行在客户端的浏览器中的语言undefined和用户是直接接触undefined Java语言是运行在服务器的语言undefined 用户需要进行交互的话必须通过网络才可以undefined所以JS语言的交互性会更强.==和===区别: ==先统一等号两边变量的类型 再比较值undefined ===先比较两个变量的类型undefined类型一致后再比较值. "666"==666 true "666"===666 false。...
vito的Web前端学习_JavaScript_Day1
03-04
在“vito的Web前端学习_JavaScript_Day1”这个课程中，我们将会深入探讨JavaScript的基础概念和核心特性，为日后的Web开发打下坚实的基础。 首先，我们要理解JavaScript与ECMAScript的关系。JavaScript是基于...
快速学习web前端day1
javfen的博客
02-03 158
自主学习web前端
WEB前端学习日志Day 1
bbbbbbxxx的博客
03-16 1327
WEB前端学习日志网页的组成网页的构成WEB标准计算机语言HTML的发展初次尝试VScode 网页的组成 1.网址（域名） 2.资源存储空间（租用空间）：服务器 3.项目制作：a.规划网站的资源，功能等 b.网站的设计，界面，交互 c.前端设计（承上启下） d.后端 e.联调，测试 f.上线 g.维护 网页的构成 网页的结构：网页中的文字，图片等 网页的表现：网页中的排版，文字的颜色等 网页的...
WEB前端学习day1-HTML
qq_44850230的博客
03-19 1444
HTML基础知识 1.HTML语法规范 <html> <head></head> <body></body> </html> <br/> 标签是尖括号包围的关键字。 通常是双标签，开始和结束标签，如<html>等； 也有单标签，如<br/> 也可写为<br> (转义标签用``) 2.网页初始化 DOCTYPE:声明文档类型 告诉浏览器使用哪种HTML版本来显示网页 lang：定义文档
WEB前端学习日志Day5
bbbbbbxxx的博客
03-20 1224
WEB前端学习日志Day5 今日学习内容总结：通过一天的学习，主要学习了CSS选择符的权重问题，并对css层叠性做解释，也学习了CSS的文本属性，并且初步了解了浮动。 1.CSS选择符的权重 选择符的权重： id > class > 标签 首先通过四个数字表示权重： 内联样式表 -> 1000 id -> 100 class -> ...
前端学习日记day4——图文混排
jumao555的博客
09-14 1971
1.图像标记<img/> 语法：<img src="图像URL"> 其中src属性用于指定图像文件的路径和文件名。 表1-1 <img/>标记相关属性 属性 属性值 描述 src URL 图像路径 alt 文本 图像不能显示时的替换文本 title 文本 鼠标悬停时显示的内容 width 像素 设置图像宽度 height 像素 ...
Web安全学习day02
weixin_52445990的博客
01-18 2572
CSRF 1.什么是CSRF？ Cross-Site Request Forgery 跨站请求伪造 CSRF概念： CSRF跨站点请求伪造(Cross—Site Request Forgery)，跟XSS攻击一样，存在巨大的危害性，你可以这样来理解： 攻击者盗用了你的身份，以你的名义发送恶意请求，对服务器来说这个请求是完全合法的，但是却完成了攻击者所期望的一个操作，比如以你的名义发送邮件、发消息，盗取你的账号，添加系统管理员，甚至于购买商品、虚拟货币转账等。 如下：其中Web A为存在CSRF漏洞
前端学习day8
m0_46896340的博客
03-17 116
移动web学习 css总结
web前端期末大作业（附有源码）
热门推荐
m0_74087268的博客
12-28 1万+
这里使用的是Visual Studio Code（VSCode）设计的Web前端作业，包括了HTML、CSS和JavaScript。选用VSCode作为开发环境和工具来说有诸多优势之处，也给设计前端时带来了诸多益处。首先，是VSCode智能代码提示和补全。VSCode具备强大的代码提示功能，能够根据输入和上下文提供智能建议，减少拼写错误和语法问题，提高编码效率。其次，VSCode拥有丰富的扩展生态系统。
前端学习day10
m0_46896340的博客
03-22 87
移动web完结
Web前端基础day04.zip
08-19
在Web前端开发中，布局和定位是至关重要的概念，它们决定了网页元素的排列方式和位置。...在学习过程中，可以参考压缩包中的"day04"文件，它可能包含了相关的代码示例和练习，进一步加深对这些概念的理解。
Web前端基础day02.zip
08-12
内部样式: 在head标签里面添加style标签 标签体内写样式代码，可以在当前页面复用,这种写法学习使用较多,工作中使用较少 外部样式: 在单独的css样式文件中写样式代码,通过link标签引入,好处:可以多页面复用,可以将...
2020求知讲堂web前端（html5+css3）(Day1).pdf
03-14
根据提供的文件内容，下面是对“2020求知讲堂web前端（html5+css3）(Day1).pdf”文件中知识点的详细说明。 首先，课程大纲概述了前端开发所需掌握的技能和知识点，包括但不限于： 1. Photoshop：虽然主要是一款...
Web前端基础day03.zip
08-19
在Web前端开发中，盒子模型（Box Model）是理解页面布局和元素尺寸计算的关键概念。这个模型描述了HTML元素如何占据空间，包括元素的内容区域、内边距、边框和外边距。让我们深入探讨一下这些组成部分以及它们如何...
一些常用的react hooks以及各自的作用
最新发布
weixin_48602044的博客
11-01 413
关于react hooks的一些知识与应用
做一个能适配「手机」的网站需要注意什么
illidri的博客
11-01 292
像现在主流会采用 H5 响应式布局，仅涉及前端的开发工作，代码量少，效果佳，是一种性价比比较高的选择，如果题主有意要进行网站建站，特别是想要手机浏览也有一定效果，可以选择这种~当然还有一种类似的方式叫自适应布局，俗称 AWD（AdaptiveWebDesign），同样是检测视口分辨率，判断不同尺寸和分辨率是什么设备，从而返回不同布局页面。最根本的区别在于，响应式页面的代码量少，但质量要求高，根据不同分辨率自动调整排版，而自适应页面需要根据不同设备准备不同的页面，这样前期的开发工作就大了很多。
前端 常见开发工具使用
weixin_45534301的博客
10-31 485
【代码】前端 常见开发工具使用。
Google Recaptcha V2 简单使用
吴家健ken的博客
10-30 312
Google Recaptcha V2 简单使用
Web前端Day1学习笔记：关键概念与标签解析
"这是一份关于web前端学习的笔记，主要涵盖了HTML基础标签和属性的使用，包括文本格式化、链接、表格、列表、注释以及一些基本样式控制。" 在web前端开发中，HTML（HyperText Markup Language）是构建网页内容的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值