html+CSS+js部分基础运用17

  1. 在图书列表中，为书名“零基础学JavaScript”和“HTML5+CSS3精彩编程200例”添加颜色。（请用class或style属性实现），效果如下图1所示：

图1 图书列表

  1. Class和style的综合应用。（1）应用class的对象、数组语法；（2）应用style的对象、数组语法.  

           图2 class和style的综合应用

代码可以截图或者复制黏贴放置在“调试过程及实验结果”中

  1. 补全代码，页面效果如下图3所示：

图3 输出古诗

  • 1. 在图书列表中，为书名“零基础学JavaScript”和“HTML5+CSS3精彩编程200例”添加颜色。（请用class或style属性实现）

  • 2. Class和style的综合应用。（1）应用class的对象、数组语法；（2）应用style的对象、数组语法

3. 补全代码，页面效果如下图3所示

  • 1. 在图书列表中，为书名“零基础学JavaScript”和“HTML5+CSS3精彩编程200例”添加颜色。（请用class或style属性实现）

  • 2. Class和style的综合应用。（1）应用class的对象、数组语法；（2）应用style的对象、数组语法

3. 补全代码，页面效果如下图3所示

8.1

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>为指定书名添加颜色</title>

<style>

.item{

width:350px;

height:100px;

line-height:100px;

border-bottom:1px solid #999999;}

.item img{

width:100px;

float:left}

.active{

height:100px;

line-height:100px;

color:#FF0000

}

</style>

<script src="vue.js"></script>

</head>

<body>

<div id="example">

    <div>

          <div class="item" v-for="book in books">

              <img v-bind:src="book.image">

              <span v-bind:class="{active : book.active}">{{book.bookname}}</span>

          </div>

    </div>

</div>

<script type="text/javascript">

var vm = new Vue({

    el:'#example',

    data:{

        books : [{//定义图书信息数组

            bookname : '零基础学JavaScript',

            image : 'images/javascript.png',

            active : true

        },{

            bookname : '零基础学HTML5+CSS3',

            image : 'images/htmlcss.png',

            active : false

        },{

            bookname : 'JavaScript精彩编程200例',

            image : 'images/javascript200.png',

            active : false

        },{

            bookname : 'HTML5+CSS3精彩编程200例',

            image : 'images/htmlcss200.png',

            active : true

        }]

    }

})

</script>

</body>

</html>



 

8.2

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>模拟古诗垂直显示文本</title>

<script src="vue.js"></script>

</head>

<body>

<div id="example">

    <!--

        1、baseStyle设置背景色为lightblue,

        2、fontStyle设置字体为36px,颜色为green，文本水平居中，字体类型为华文楷体

        3、styleRadius设置边框样式1px solid #CCCCCC，文本垂直排列，设置边框阴影

    -->

    <div v-bind:style="[baseStyle, fontStyle, styleRadius]">

        <h4>枫桥夜泊</h4>

        <p>

            月落乌啼霜满天，<br>江枫渔火对愁眠。<br>姑苏城外寒山寺，<br>夜半钟声到客船。

        </p>

    </div>

</div>

<script type="text/javascript">

var vm = new Vue({

    el:'#example',

    data:{

        bgcolor : 'lightblue',

        family : "华文楷体",

        fontSize : 36,

        color : 'green',

        align : 'center',

        border : '1px solid #CCCCCC',

        mode : 'vertical-rl',//垂直方向自右而左的书写方式

       

    },

    computed: {

        baseStyle: function () {//基本样式

            return{

                'background-color':this.bgcolor,

            }

        },

        fontStyle: function(){//字体样式

            return{

                fontSize:this.fontSize+'px',

                color:this.color,

                'text-align':this.align,

                'font-family':this.family,

            }

        },

        styleRadius: function () {

            return {

                border:this.border,

                'writing-mode':this.mode,

               

            }

        }

    }

})

</script>

</body>

</html>



 

8.3

<!-- vue-3-6.html -->

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>class与style绑定综合应用实战</title>

        <script src="vue.js"></script>

        <style type="text/css">

            .redP {color: red;font-size: 28px;font-weight: bold;}

            .class-a {color: green;font-size: 36px;font-weight: bolder;}

            .class-b {border: 1px dashed #0033CC;}

            .active {color: blue;text-decoration: underline;}

        </style>

    </head>

    <body>

        <div id="vue36">

            <p v-bind:class="myClass">1.1 普通变量：Vue应用前景宽广！</p>

              <!-- 1.2 使用非内联的形式：classObject为一个对象，使用.class-a"和.class-b样式 -->

            <p :class="classObject">1.2 对象-非内联：Vue应用前景宽广！</p>

             <!-- 1.3 使用内联的形式：渲染.active样式 -->

            <div v-bind:class="{active: isActive }">1.3 对象-内联：Vue应用前景宽广！</div>

            <!-- 1.4 使用计算属性，渲染.class-a"和.class-b样式 -->

            <div v-bind:class="showClass">1.4 对象-计算属性：Vue应用前景宽广！</div>

            <div v-bind:class="[classA, classB]">1.5 数组：Vue非常好学！</div>          

            <div v-bind:style="{color:activeColor,fontSize:fontSize+'px'}">2.1 对象-内联：绑定style</div>

            <!-- 2.2 使用对象-非内联形式：通过styleObject对象实现字体大小为32px，边框为2px蓝色实线2px solid #0033CC -->

            <div :style="styleObject">2.2 对象-非内联：style对象</div>

            <div v-bind:style="[styleObjectA, styleObjectB]">2.3 数组：style数组</div>

            <!-- 2.4 使用计算属性，让2.4文本的color为blue，fontSize为32px -->

            <div v-bind:style="showStyle">2.4 对象-计算属性：Vue应用前景宽广！</div>

        </div>

        <script type="text/javascript">

            var myViewModel = new Vue({

                el: '#vue36',

                data: {

                    myClass: 'redP',

                   

                    isActive:true,

                    classA: 'class-a',

                    classB: 'class-b',

                    activeColor: '#99DD33',

                    fontSize: 36,

                    classObject:{

                        'class-a':true,

                        'class-b':true,

                    },

                    styleObject: {

                        border: '2px' + 'solid' + '#0033CC',

                        fontSize: 32 + 'px',

                    },

                    styleObjectA: {

                        color: 'blue',

                        fontSize: 36 + 'px'

                    },

                    styleObjectB: {

                        background: '#DFDFDF'

                    }

                },

                computed:{

                    showClass:function(){

                        return {

                            'class-a':true,

                            'class-b':true,

                        }

                    },

                    showStyle:function(){

                        return {

                            color:'blue',

                            fontSize:'32px',

                        }

                    }

                }

            })

        </script>

    </body>

</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/24427.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

命令行打包最简单的android项目从零开始到最终apk文件

命令行打包最简单的android项目从零开始到最终apk文件

准备好需要的工具 AndroidDevTools - Android开发工具 Android SDK下载 Android Studio下载 Gradle下载 SDK Tools下载 jdk的链接我就不发出来，自己选择，我接下来用的是8版本的jdk和android10的sdk sdk的安装和环境变量的配置 sdk tool压缩包打开后是这样子，打开sdk mana…
阅读更多...
高防CDN是如何应对DDoS和CC攻击的

高防CDN是如何应对DDoS和CC攻击的

高防CDN&#xff08;内容分发网络&#xff09;主要通过分布式的网络架构来帮助网站抵御DDoS&#xff08;分布式拒绝服务&#xff09;和CC&#xff08;挑战碰撞&#xff09;攻击。 下面是高防CDN如何应对这些攻击的详细描述&#xff1a; 1. DDoS攻击防护 DDoS攻击通过大量的恶…
阅读更多...
【动态规划-BM71 最长上升子序列(一)】

【动态规划-BM71 最长上升子序列(一)】

题目 BM71 最长上升子序列(一) 分析 dp[i] 考虑到下标i&#xff0c;其组成的最长上升子序列长度 可以用动态规划的原因&#xff1a; 到i的结果可以由到j &#xff08;j<i) 的结果推出&#xff0c;只需要判断下标j对应的数字是否比下标i 对应的字母小即可 注意&#xf…
阅读更多...
vs2013 - 打包

vs2013 - 打包

文章目录 vs2013 - 打包概述installshield2013limitededitionMicrosoft Visual Studio 2013 Installer Projects选择哪种来打包? 笔记VS2013打包和VS2019打包的区别打包工程选择view打包工程中单击工程名称节点&#xff0c;就可以在属性框中看到要改的属性(e.g. 默认是x86, 要…
阅读更多...
Linux安装RocketMQ教程【带图文命令巨详细】

Linux安装RocketMQ教程【带图文命令巨详细】

巨详细Linux安装Nacos教程RocketMQ教程 1、检查残留版本2、上传压缩包至服务器2.1压缩包获取2.2创建相关目录 3、安装RocketMQ4、配置RocketMQ4.1修改runserver.sh和runbroker.sh启动脚本4.2新增broker.conf配置信息4.3启动关闭rocketmq4.4配置开机自启动&#xff08;扩展项&am…
阅读更多...
AI Agentic Design Patterns with AutoGen（下）：工具使用、代码编写、多代理群聊

AI Agentic Design Patterns with AutoGen（下）：工具使用、代码编写、多代理群聊

文章目录 四、工具使用: 国际象棋游戏4.1 准备工具4.2 创建两个棋手代理和棋盘代理4.3 注册工具到代理4.4 创建对话流程&#xff0c;开始对话4.5 增加趣味性&#xff1a;加入闲聊 五、代码编写&#xff1a;财务分析5.1导入和配置代码执行器5.2 创建 代码执行/编写 代理5.3 定义…
阅读更多...
win10重装系统？电脑系统重装一键清晰，干货分享！

win10重装系统？电脑系统重装一键清晰，干货分享！

在电脑的使用过程中&#xff0c;由于各种原因&#xff0c;我们可能会遇到系统崩溃、运行缓慢或者出现各种难以解决的问题。这时&#xff0c;重装系统往往是一个有效的解决方案。今天&#xff0c;我们就来详细介绍一下如何在Win10环境下进行系统的重装&#xff0c;帮助大家轻松解…
阅读更多...
【三十三】springboot+序列化实现返回值脱敏和返回值字符串时间格式化问题

【三十三】springboot+序列化实现返回值脱敏和返回值字符串时间格式化问题

互相交流入口地址 整体目录&#xff1a; 【一】springboot整合swagger 【二】springboot整合自定义swagger 【三】springboot整合token 【四】springboot整合mybatis-plus 【五】springboot整合mybatis-plus 【六】springboot整合redis 【七】springboot整合AOP实现日志操作 【…
阅读更多...
Java学习-JDBC(一)

Java学习-JDBC(一)

JDBC 概念 JDBC(Java Database Connectivity)Java数据库连接JDBC提供了一组独立于任何数据库管理系统的APIJava提供接口规范&#xff0c;由各个数据库厂商提供接口的实现&#xff0c;厂商提供的实现类封装成jar文件&#xff0c;也就是我们俗称的数据库驱动jar包JDBC充分体现了…
阅读更多...
什么是虚拟局域网？快解析有哪些的虚拟化应用功能？

什么是虚拟局域网？快解析有哪些的虚拟化应用功能？

什么是虚拟局域网&#xff1f;从字面上理解就是不是真实存在的局域网。虚拟局域网是将网络用户和设备集中在一起&#xff0c;从而可以对不同地域和商业的需要有一定的支持性。虚拟局域网有它的优点&#xff0c;在使用过程中可以为企业提供更安全、更稳定、更灵活的服务保障体系…
阅读更多...
记录jenkins pipeline ,git+maven+sonarqube+打包镜像上传到阿里云镜像仓库

记录jenkins pipeline ,git+maven+sonarqube+打包镜像上传到阿里云镜像仓库

1、阶段视图&#xff1a; 2、准备工作 所需工具与插件 jdk&#xff1a;可以存在多版本 maven&#xff1a;可以存在多版本 sonar-scanner 凭证令牌 gitlab&#xff1a;credentialsId sonarqube:配置在sonarqube208服务中 3、jenkinsfile pipeline {agent anystages {stage(从…
阅读更多...
Mac怎么读取内存卡 Mac如何格式化内存卡

Mac怎么读取内存卡 Mac如何格式化内存卡

在今天的数字化时代&#xff0c;内存卡已经成为了我们生活中不可或缺的一部分。对于Mac电脑用户而言&#xff0c;正确地读取和管理内存卡中的数据至关重要。下面我们来看看Mac怎么读取内存卡&#xff0c;Mac如何格式化内存卡的相关内容。 一、Mac怎么读取内存卡 苹果电脑在读…
阅读更多...
Python中__面向对象__学习 (上)

Python中__面向对象__学习 (上)

目录 一、类和对象 1.类的定义 2.根据对象创建类 二、构造和析构 1.构造方法 &#xff08;1&#xff09;不带参数的构造方法 &#xff08;2&#xff09;带参数的构造方法 2.析构方法 三、重载 1.定制对象的字符串形式 &#xff08;1&#xff09;只重载__str__方法 …
阅读更多...
QT Udp广播实现设备发现

QT Udp广播实现设备发现

测试环境 本文选用pc1作为客户端&#xff0c;pc2&#xff0c;以及一台虚拟机作为服务端。 pc1,pc2(客户端&#xff09;: 虚拟机&#xff08;服务端)&#xff1a; 客户端 原理&#xff1a;客户端通过发送广播消息信息到ip:255.255.255.255(QHostAddress::Broadcast),局域网…
阅读更多...
了解Java内存模型（Java Memory Model, JMM）

了解Java内存模型（Java Memory Model, JMM）

了解Java内存模型&#xff08;Java Memory Model, JMM&#xff09; Java内存模型&#xff08;Java Memory Model, JMM&#xff09;是Java语言规范中规定的一组规则&#xff0c;定义了多线程程序中变量&#xff08;包括实例字段、静态字段和数组元素&#xff09;的访问方式。JM…
阅读更多...
git 大文件上传失败 Please remove the file from history and try again.

git 大文件上传失败 Please remove the file from history and try again.

根据提示执行命令 --- 查找到当前文件 git rev-list --objects --all | grep b24e74b34e7d482e2bc687e017c8ab28cd1d24b6git filter-branch --tree-filter rm -f 文件名 --tag-name-filter cat -- --all git push origin --tags --force git push origin --all --force
阅读更多...
Fort Firewall防火墙工具v3.12.13

Fort Firewall防火墙工具v3.12.13

软件介绍 Fort Firewall是一款开源系统的免费防火墙&#xff0c;体积小巧、占用空间不大&#xff0c;可以为用户的电脑起到保护作用&#xff0c;该软件可以控制程序访问网络&#xff0c;控制用户的电脑网速&#xff0c;用户可以更轻松便捷的进行网络安全防护&#xff0c;保护系…
阅读更多...
计算机网络 —— 网络层（IP数据报）

计算机网络 —— 网络层（IP数据报）

计算机网络 —— 网络层&#xff08;IP数据报&#xff09; 网络层要满足的功能IP数据报IP数据报格式IP数据报首部格式数据部分 IP数据报分片 我们今天进入网络层的学习。 网络层要满足的功能 网络层作为OSI模型中的第三层&#xff0c;是计算机网络体系结构的关键组成部分&…
阅读更多...
实验六、IPv4 地址的子网划分，第 2 部分《计算机网络》

实验六、IPv4 地址的子网划分，第 2 部分《计算机网络》

你有没有发现&#xff0c;困的时候真的清醒不了。 目录 一、实验目的 二、实验内容 三、实验小结 一、实验目的 完成本练习之后&#xff0c;您应该能够确定给定 IP 地址和子网掩码的子网信息。 知道 IP 地址、网络掩码和子网掩码后&#xff0c;您应该能够确定有关该 IP 地…
阅读更多...
SpringBoot实现参数校验拦截(采用AOP方式)

SpringBoot实现参数校验拦截(采用AOP方式)

一、AOP是什么&#xff1f; 目的&#xff1a;分离横切关注点&#xff08;如日志记录、事务管理&#xff09;与核心业务逻辑。 优势&#xff1a;提高代码的可读性和可维护性。 关键概念 切面&#xff08;Aspect&#xff09;&#xff1a;包含横切关注点代码的模块。通知&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023