前端的基本知识day1

已于 2022-03-28 11:51:50 修改
阅读量668 收藏
点赞数
文章标签： css html
于 2022-03-28 11:46:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51710745/article/details/123791327
版权

开始认认真真去学点东西主要是记录跟着B站去学在这就当做打卡吧3.28

<body>
    <!-- 成对出现，文本内容不建议使用font标签 -->
   <font color="red">欢迎来到这里由vscode开发</font>
    <!--文本都放置于容器之中一般不会独立存在根据容器来调试  -->
    <!-- 表格，div -->
    <!-- style属性指定的是css样式 -->
    <div style="color: orange ;font-size: 50px; font-family: 幼圆;">欢迎来到我的世界</div>
     <!-- 图片 -->
    <img src="image/shell脚本.png" width="200" /><br/>
    <!-- 超链接  target打开新的标签页-->
    <a href="https://www.baidu.com" target="_blank">百度练剑</a><br/>
<!-- 表格由行和列组成tr定义一行td定义一列 -->
       <table width="500" height="200"bgcolor="red"border="2">
           <tr>
               <td width="40%" heigth="30">第一行第一列</td>
               <td width="30%" height="30">第一行第二列</td>
               <td width="30%" height="40">第一行第二列</td>
           </tr>
           <tr>
            <td></td>
            <td></td>
            <td></td>
          </tr>
       </table>
<!-- 表单文本框 -->
<input type="text" placeholder="请输入你的用户名"/>
<!-- 密码框 -->
<input type="password"/>
<!-- 按钮 -->
<input type="button" value="请点击登陆"/>
<!-- 下拉框 -->
<select>
    <option>选项一</option>
    <!-- 默认被选中 -->
    <option  selected="">选项一</option>
    <option>选项一</option>
</select>
<!--按钮补充 -->
<button>点我</button>

在这里插入代码片

<!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>计算器基于table实现</title>
    <style>
        /* 类选择器 */
        .button{
            background-color:gray;
            /* 设置背景色 */
            margin:auto;
            /* 设置容器水平居中 */
        }
        /* 层次选择器 选择button 类下的所有标签为td的元素*/
        .button tr td{
            background-color: aquamarine;
            width: 25%;
            text-align: center;
            font-size: 30;
        }
        .point-red{
            width: 20px;
            height: 20px;
            background-color:red;
            /* 水平 */
            float:left;
            /* 左右间隔 */
            margin-left:10px;
            border-radius: 50%;
        }
        .point-blue{
            width: 20px;
            height: 20px;
            background-color:blue;
            /* 水平 */
            float:left;
            /* 左右间隔 */
            margin-left:10px;
            border-radius: 50%;
        }
        .point-green{
            width: 20px;
            height: 20px;
            background-color:green;
            /* 水平 */
            float:left;
            /* 左右间隔 */
            margin-left:10px;
            border-radius: 50%;
        }
        .title{
            color: blue;
            font-size: 20px;
            float:right;
            margin-right: 20;
        }
    </style>
</head>
<body>
    <!-- 表格两行一列 -->
    <!-- 边框设置样式 -->
    <!-- 水平居中 -->
    <table width="450" height="120"bgcolor="gray" border="0" cellspacing="10" align="center">
        <tr bgcolor="white" >
            <td bgcolor="gray"height="50">
                <div class="point-red"></div>
                <div class="point-blue"></div>
                <div class="point-green"></div>
                <div class="title">计算器</div>
            </td>
        </tr>
        <tr bgcolor="white" style="border: solid 2px red;">
            <td></td>
        </tr>
        
    </table>
    <!-- 五行四列 shift out-->
    <table width="450" height="400" border="0"align="center" cellspacing="4" class="button">
        <tr>
            <td>AC</td>
            <td>+/-</td>
            <td>%</td>
            <td>%</td>
        </tr> 
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>*</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>-</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>+</td>
        </tr>
        <tr>
            <td>0</td>
            <td>删除</td>
            <td>.</td>
            <td>=</td>
        </tr>
    </table>
    
</body>
</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>计算器div版</title>
</head>
<style>
    #top{
        width: 450px;
        height: 50px;
        margin: auto;
        background-color:gray;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
    }
    #top .point{
        width: 20px;
        height: 20px;
            
        /* 水平 */
        float:left;
        margin-top: 15px;
            /* 左右间隔 */
        margin-left:10px;
        border-radius: 50%;
    }
    #top .red{
        background-color: red;
    }
    #top .blue{
        background-color: blue;
    }
    #top .green{
        background-color:green;
    }
    #title{
        font-size: 22px;
        margin-right: 15px;
        float: right;
        color: white;
        margin-top: 15px;
    }
    #relust{
        width: 446px;
        height: 50px;
        margin:auto;
       
        background-color:white;
        border:solid red;
    }
    #button{
        width: 450px;
        height: 422px;
        background-color: gray;
        margin: auto;
    }
    #button div{
        width: 108px;
        height: 80px;
        float: left;
        margin: 2px;
        background-color: greenyellow;
        line-height: 80px; 
        text-align: center;
        font-size: 25px;
    }
    #button div:hover{
        background-color: red;
        font-size: 30px;
    }

</style>
<body>
    <!-- 顶部div -->
    <div id="top">
        <div class="point red"></div>
        <div class="point blue"></div>
        <div class="point green"></div>
        <div id="title">小计算器</div>
    </div>

    <div id="relust"></div>
    <div id="button">
        <div>AC</div>
        <div>+/-</div>
        <div>%</div>
        <div>%</div>

        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>*</div>

        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>-</div>

        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>+</div>

        <div>0</div>
        <div>删除</div>
        <div>.</div>
        <div>=</div>
    </div>
</body>
</html>

其实还有使用JS的方法去实现的可是捏不可以轻易放出来毕竟是跟着B站学的要是侵权请及时联系，来源是蜗牛学院嘿嘿嘿就当是给它宣传也是自己好好学习的一天，加油！

螺丝冒烟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端入门知识（二）
weixin_61742983的博客
07-19 107
所有的学习都是依靠不断地累积，不断地加油而成长的，只要不放弃，一定都可以成功，希望大家可以通过学习进一步增加自己的就业机会。一、八个标签h是标题标签，有换行有上下间距，有左侧内补，粗细和大小会变化sub是下角标签sup是上角标签div是最常见的块标签u是下划线标签del是删除线标签以及上篇写的span与p标签都是比较常见且常用的标签目前需要掌握的几个基本标签，需要多加练习，尽快熟练掌握。.........
前端基础 小知识点
青柠小甜味
07-29 181
一、选择题（共10题，每题3分） 1 . CSS 指的是？ B A. Computer Style Sheets B. Cascading Style Sheets C. Creative Style Sheets D. Colorful Style Sheets 2 . 在以下的 HTML 中，哪个是正确引用外部样式表的方法？ B A. 3 . 在 HTML 文档中，引用外部样式表的正确位置是？ A. 文档的末尾 D B. 文档的顶部 C. 部分 D. 部分 4 . 哪个 HTML 标
前端基础知识（Day 1）
沛沛呀、
06-09 155
如何解决跨域问题 jsonp <script> var script = document.createElement('script') script.type = 'text/javascript' script.src = 'http://www.smileyqp.com/login?username=smileyqp&callback=jsonCallback' document.head.appenChild(script) function jsonCallback(
DAY1：Web基础知识 ——WEB前端
我是张跑跑
06-15 510
1 Web基础知识 第一天，主要介绍Web基础知识，包括三大板块：Web与Internet；Web的工作原理；Web的相关技术。 2 Web与Internet 2.1 Internet简介 Internet是一个全球性的计算机互联网络，中文名称有“因特网”、“国际互联网”、“国际网”、“交互网”等。 Internet提供的主要服务：Telent,Email, WWW,BBS, FTP等。 基本实...
前端开发Vue基础篇：Day02 Vue基础知识.pdf
11-11
Vue基础知识 本文主要介绍了 Vue 基础知识，包括模板语法的插值操作、v-for 指令的 key 属性、reduce 方法的使用和计算属性的使用。 一、模板语法的插值操作 在 Vue 中，我们可以使用模板语法来插值操作。常用的...
HTML678day_htmlCSS_前端基础_
10-01
可能包含前几日的学习资料，涵盖了HTML和CSS的基础概念，学员可以回顾巩固，确保对这些基础知识有扎实的理解。通过这三天的集中学习，学员应能熟练地编写结构清晰、样式美观的网页，并具备一定的前端开发能力。 总...
2020求知讲堂web前端（html5+css3）(Day1).pdf
03-14
根据提供的文件内容，下面是对“2020求知讲堂web前端（html5+css3）(Day1).pdf”文件中知识点的详细说明。 首先，课程大纲概述了前端开发所需掌握的技能和知识点，包括但不限于： 1. Photoshop：虽然主要是一款...
谷粒学院——Day03【项目前端相关基础知识一】
Java技术一点通
11-08 474
要讲清楚这个问题，需要回顾历史。1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织 ECMA，希望这种语言能够成为国际标准。次年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。 因此，ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 J
前端基础从0到1的小知识点项目
01-05
【前端基础从0到1的小知识点项目】是一个适合初学者，特别是“小白白”入门的教程，涵盖了HTML等基础知识的学习。在这个项目中，你将逐步掌握前端开发的基础技能，通过一系列的学习日（day01-day08）进行系统性的...
HTML、CSS实现树状图
p_s_p的博客
09-09 185
【代码】HTML、CSS实现树状图。
CSS学习16--CSS高级技巧：用户界面样式、精灵技术、字体图标、滑动门
qq_54641174的博客
09-09 710
CSS用户界面样式-鼠标样式、轮廓、垂直对齐、溢出文字隐藏
【CSS in Depth 2 精译_025】4.3 弹性布局的方向
PeacefulWinter的博客
09-09 1621
本篇为新版《CSS in Depth》4.3小节内容，主要介绍了 Flexbox 弹性布局的方向设置，并结合一个典型的两列布局案例，对垂直方向的弹性布局做了进一步讨论，最后还对表单元素的细节样式问题进行了讨论，这些都是平时容易忽略的非常有价值的知识点，建议收藏并在本地实测。
前端：HTML、CSS、JS、Vue
云扬的博客
09-04 3686
本文主要介绍了HTML、CSS、JavaScript、Vue的基本语法和使用。供个人学习使用
HTML与CSS网页制作指南
vvvae1234的博客
09-09 1067
HTML（HyperText Markup Language）是网页的基础结构，负责网页内容的组织和展示。HTML使用标签（如等）来定义网页中的各种元素。CSS（Cascading Style Sheets）用于样式设计，它控制网页的外观（如颜色、字体、布局等）。通过CSS，我们可以使网页更具吸引力和可读性。响应式设计是一种允许网页在不同设备上（如手机、平板和桌面）自动调整布局和样式的设计理念。这使得网页能在各种屏幕上都能良好显示，提高了用户体验。
前端三件套（HTML，CSS，JS）查漏补缺
最新发布
weixin_73074505的博客
09-09 97
一些琐碎：内class仅定义行内元素，指的是代码中同一行的元素（如text-align:center）；而表格定义块元素，只要属于旗下的元素都适用（如居中margin 0:auto）。最常用——外链式,其中两个定义style的方法：类与id，简单理解为声明库之后直接调用函数，而其中最重要的就是理解各个层级的关系，因为你要合理地进行逐层嵌套。
CSS具有哪些特点呢？
weixin_54503231的博客
09-09 191
CSS的主要目的是为网页提供样式设计，包括颜色、字体、布局等，通过CSS，可以控制网页元素的外观和排版，使得网页更加美观和易于阅读。方便维护：只要修改保存着网站格式的CSS样式表文件，就可以更改整个网站的风格和特色，避免了逐个页面的修改，缩短了修改页面的时间。跨平台性：CSS是一种跨平台的技术，可以用同一份代码在不同的浏览器和设备上实现相同的效果，减少了开发和测试的成本。良好的可读性：减少了代码的复杂度，当需要修改某一元素的样式时，只需修改样式表中相应的代码。
《响应式 Web 设计：纯 HTML 和 CSS 的实现技巧》
asd4353012的博客
09-09 851
通过使用纯 HTML 和 CSS，可以实现响应式 Web 设计的各种技巧，包括弹性布局、媒体查询、响应式字体和文本等。在进行响应式设计时，应遵循移动优先的原则，使用相对单位和弹性布局来构建网页结构，使用媒体查询来针对不同的屏幕尺寸应用不同的样式。因此，在设计过程中，应优先为移动设备设计简洁、高效的布局和样式，然后再逐步扩展到更大的屏幕尺寸。通过使用媒体查询，可以为不同的设备定制不同的布局和样式，实现响应式设计。属性为不同的屏幕尺寸提供不同的图像源，以确保图像在不同设备上都能呈现出最佳的效果。
CSS学习14[重点]--定位、边偏移、定位模式
qq_54641174的博客
09-06 1862
CSS定位
Web前端Day1学习笔记：关键概念与标签解析
"这是一份关于web前端学习的笔记，...这些基础知识构成了web前端开发的基础，熟练掌握它们对于创建功能丰富的网页至关重要。通过不断实践和学习，可以进一步了解CSS和JavaScript，从而实现更复杂的网页交互和动态效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值