自学编程日记（7）

returnadsss

于 2021-12-28 19:03:38 发布

阅读量579

点赞数

分类专栏：前端文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/returnadsss/article/details/122200265

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

最近在看vue，因为之前入门学的莫振杰的三件套，自我感觉良好，看书看了2星期，没怎么写代码就准备上手vue了，结果！发现自己css啥都不会，连计算器的页面都设计不出来！就这图
在这里插入图片描述
百度js计算器的第一个，我一上手就磕磕碰碰，估计这状态上手js高级教程，甚至初级教程都不敢说自己掌握了，默默放下了手中的vue实战指南，看来基础还是得打牢，于是花了2个小时，对着这个图片尽可能模仿它，终于实现了。
在这里插入图片描述
附上代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/style.css"/>

</head>
<body>
    <div class="wrapper">
        <div class="logo">
            <span class="name">计算器</span>
            <span class="version">@linzhan v1.0</span>
        </div> 
        <div class="cal">
            <input type="text" id="input"/>
        </div>
        <div class="keys">
        <table>
        <tr>
            <td><div class="button seven">7</div></td>
            <td><div class="button eight">7</div></td>
            <td><div class="button night">7</div></td>
            <td><div class="button back">7</div></td>
            <td><div class="button clean">7</div></td>
        </tr>
        <tr>
            <td><div class="button seven">7</div></td>
            <td><div class="button eight">7</div></td>
            <td><div class="button night">7</div></td>
            <td><div class="button back">7</div></td>
            <td><div class="button clean">7</div></td>
        </tr>
        <tr>
            <td><div class="button seven">7</div></td>
            <td><div class="button eight">7</div></td>
            <td><div class="button night">7</div></td>
            <td><div class="button back">7</div></td>
            <td><div class="button clean">7</div></td>
        </tr>
        <tr>
            <td><div class="button seven">7</div></td>
            <td><div class="button eight">7</div></td>
            <td><div class="button night">7</div></td>
            <td><div class="button back">7</div></td>
            <td><div class="button clean">7</div></td>
        </tr>
        </table> 
        </div>
        <div class="foot">
            <span class="welcome">Javascript计算器</span>
            <span class="reply"><a href="#">反馈</a></span>
        </div>     
    </div>
</body>
</html>

.wrapper{	
	background-color: lightgray;
	width: 300px;
	height: 340px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -200px;
	margin-left: -150px;
	box-shadow: 0 0 1px 1px white inset;
}
.name,.welcome{
	float: left;
}
.version,.reply{
	float: right;
}
html{
	background-color: #778899;
}
.logo,.foot{
	margin: 10px;
}
.logo::after,.foot::after{
	clear: both;
	content: "";
	display: block;
	height: 0;
	visibility: hidden;
}
.cal{
	margin: 10px;
	width: 272px;
}
#input{
	height: 20px;
	width: 100%;
}
.keys{
	position: relative;
	width: 278px;
	height: 210px;
	margin: 10px;
	border: 1px solid white;
}
.button{
	width: 30px;
	height: 20px;
	margin: 10px;
	text-align: center;
	border-top: 1px solid white;
	border-left: 1px solid white;
	border-right: 1px solid #868686;
	border-bottom: 1px solid #868686;
}
table{
	width: 200px;
	height: 200px;
	position: absolute;
	top: 50%;
	margin-top: -100px;
}

两个教训：1、不要急于求成，基础打牢很重要，。
2、学编程多写是最重要的，看书是看不会的，以后要多模仿页面，css是最最基础的。

returnadsss

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
自学编程日记（7）

最近在看vue，因为之前入门学的莫振杰的三件套，自我感觉良好，看书看了2星期，没怎么写代码就准备上手vue了，结果！发现自己css啥都不会，连计算器的页面都设计不出来！就这图百度js计算器的第一个，我一上手就磕磕碰碰，估计这状态上手js高级教程，甚至初级教程都不敢说自己掌握了，默默放下了手中的vue实战指南，看来基础还是得打牢，于是花了2个小时，对着这个图片尽可能模仿它，终于实现了。附上代码。<!DOCTYPE html><html lang="en"><head
复制链接

扫一扫