HTML+CSS+JavaScript:九九乘法表

一、需求如图

HTML+CSS+JavaScript:九九乘法表_第1张图片

二、思路及代码

1、JavaScript代码

稍微刷过一点算法题的小伙伴就很容易想到这题需要利用双层for循环来实现,思路也是比较简单的,我在这里就直接放代码了

不添加CSS渲染的代码如下




    
    
    九九乘法表


    

浏览器预览效果

HTML+CSS+JavaScript:九九乘法表_第2张图片

2、CSS美化

从上面的预览效果我们可以看到,只有JavaScript的代码在浏览器上看起来还是比较丑的,所以我们需要添加CSS代码去美化一下我们的九九乘法表

首先来说一个反面教材(嘻嘻,也就是作者自己)

看到九九乘法表的需求图之后,我的“心路历程”:emmm……黑色实线边框,排列这么整齐,一看就是表格table

于是,我用表格table加的美化效果是这样的




    
    
    九九乘法表
    


    

浏览器预览起来是这样的

HTML+CSS+JavaScript:九九乘法表_第3张图片

 讲真还不如不加美化效果……

后来,看了pink老师的代码之后,我恍然大悟:原来不是只有表格能拥有黑色实线边框,原来不是只有表格能拥有整齐的排列……

顿时觉得那13个小时的CSS都白学了,使用border不就轻轻松松给标签加上黑色实线边框吗?使用行内块元素不就轻轻松松让元素在一行整齐地排列吗?再加个宽高、居中什么的不就更完美了吗?

于是,我改进了我的代码




    
    
    九九乘法表
    


    

浏览器预览效果

HTML+CSS+JavaScript:九九乘法表_第4张图片

 我一瞅:嗯效果不错,这下至少能看了

我本以为到这里就结束了,但没想到pink老师一波操作猛如虎,让这张九九乘法表更好看了,唉看来还是我CSS没学好,13个小时的课程不太够啊,一些样式我都没有接触过,比如添加阴影效果

话不多说,直接放进一步美化后的代码了




    
    
    九九乘法表
    


    

浏览器预览效果

HTML+CSS+JavaScript:九九乘法表_第5张图片

 都写到这了,那就顺便再介绍一下CSS的box-shadow属性吧(其实我也是现学的哈哈)

三、box-shadow

作用:添加阴影效果

语法:
box-shadow: h-shadow v-shadow blur spread color inset;

HTML+CSS+JavaScript:九九乘法表_第6张图片

 一个例子:








浏览器预览效果

HTML+CSS+JavaScript:九九乘法表_第7张图片

你可能感兴趣的:(javascript,开发语言,ecmascript,css)