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.rhkb.cn/news/344084.html

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

相关文章

使用wireshark分析tcp握手过程

使用wireshark分析tcp握手过程

开启抓包 tcpdump -i any host 127.0.0.1 and port 123 -w tcp_capture.pcap 使用telnet模拟tcp连接 telnet 127.0.0.1 123 如果地址无法连接&#xff0c;则会一直重试SYN包&#xff0c;各个平台SYN重试间隔并不一致&#xff0c;如下&#xff1a; 异常站点抓包展示&#xff…
阅读更多...
抽象的java入门1.3.0

抽象的java入门1.3.0

前言&#xff1a; 在1.2.0版本中我们介绍了public class hello {}并从中提取出两个新概 修饰符和作用域 public class hello {public static void main(String[] args) {System.out.println("Hello World");} } 正片&#xff1a; 这一期把剩余的内容刨析出来 pub…
阅读更多...
Python 机器学习 基础 之 【实战案例】轮船人员获救预测实战

Python 机器学习 基础 之 【实战案例】轮船人员获救预测实战

Python 机器学习 基础 之 【实战案例】轮船人员获救预测实战 目录 Python 机器学习 基础 之 【实战案例】轮船人员获救预测实战 一、简单介绍 二、轮船人员获救预测实战 三、数据处理 1、导入数据 2、对缺失数据的列进行填充 3、属性转换&#xff0c;把某些列的字符串值…
阅读更多...
【SkyWalking】启用apm-trace-ignore-plugin追踪忽略插件

【SkyWalking】启用apm-trace-ignore-plugin追踪忽略插件

背景 使用Agent采集追踪数据的时候&#xff0c;想排除某些路径&#xff0c;比如健康检查等&#xff0c;这样可以减少上报的数据&#xff0c;也可以去除一些不必要的干扰数据。 加载插件 在agent/optional-plugins目录中有个apm-trace-ignore-plugin-${version}.jar插件&…
阅读更多...
WEB漏洞服务能提供哪些帮助

WEB漏洞服务能提供哪些帮助

在数字化浪潮的推动下&#xff0c;Web应用程序已成为企业展示形象、提供服务、与用户进行交互的重要平台。然而&#xff0c;随着技术的飞速发展&#xff0c;Web应用程序中的安全漏洞也日益显现&#xff0c;成为网络安全的重大隐患。这些漏洞一旦被恶意攻击者利用&#xff0c;可…
阅读更多...
AI高考大战，揭秘五大热门模型谁能问鼎数学之巅？

AI高考大战，揭秘五大热门模型谁能问鼎数学之巅？

在高考前&#xff0c;我就有想法了&#xff0c;这一次让AI来做做高考题。就用国内的大模型&#xff0c;看哪家的大模型解题最厉害。 第一天考完&#xff0c;就拿到了2024高考数学2卷的电子版&#xff0c;这也是重庆市采用的高考试卷 这次选了5个AI工具&#xff0c;分别是天工&a…
阅读更多...
Fatfs

Fatfs

STM32进阶笔记——FATFS文件系统&#xff08;上&#xff09;_stm32 fatfs-CSDN博客 STM32进阶笔记——FATFS文件系统&#xff08;下&#xff09;_stm32 文件系统怎样获取文件大小-CSDN博客 STM32——FATFS文件基础知识_stm32 fatfs-CSDN博客 021 - STM32学习笔记 - Fatfs文件…
阅读更多...
React -- memo允许你的组件在 props 没有改变的情况下跳过重新渲染。

React -- memo允许你的组件在 props 没有改变的情况下跳过重新渲染。

memo(Component, arePropsEqual?) 使用 memo 将组件包装起来&#xff0c;以获得该组件的一个 记忆化 版本。通常情况下&#xff0c;只要该组件的 props 没有改变&#xff0c;这个记忆化版本就不会在其父组件重新渲染时重新渲染。但 React 仍可能会重新渲染它&#xff1a;记忆化…
阅读更多...
java 大型企业MES生产管理系统源码：MES系统与柔性化产线控制系统的关系、作用

java 大型企业MES生产管理系统源码：MES系统与柔性化产线控制系统的关系、作用

MES定义为“位于上层的计划管理系统与底层的工业控制之间的面向车间层的管理信息系统”,它为操作人员/管理人员提供计划的执行、跟踪以及所有资源(人、设备、物料、客户需求等)的当前状态。 MES系统与柔性化产线控制系统的关系 MES&#xff08;制造执行系统&#xff09;是一种…
阅读更多...
离散数学---树

离散数学---树

目录 1.基本概念及其相关运用 2.生成树 3.有向树 4.最优树 5.前缀码 1.基本概念及其相关运用 &#xff08;1&#xff09;无向树&#xff1a;连通而且没有回路的无向图就是无向树&#xff1b; 森林就是有多个连通分支&#xff0c;每个连通分支都是树的无连通的无向图&…
阅读更多...
pytorch构建模型训练数据集

pytorch构建模型训练数据集

pytorch构建模型训练数据集 pytorch构建模型训练数据集1.AlexNet:1.1.导入必要的库&#xff1a;1.2.数据预处理和增强&#xff1a;1.3.加载数据集&#xff1a;1.4.划分测试集和训练集&#xff1a;1.5.创建数据加载器&#xff1a;1.6.加载AlexNet模型&#xff1a;1.7.修改模型以…
阅读更多...
训练营第三十一天 | 494.目标和474.一和零动态规划：完全背包理论基础518.零钱兑换II

训练营第三十一天 | 494.目标和474.一和零动态规划：完全背包理论基础518.零钱兑换II

494.目标和 力扣题目链接(opens new window) 难度&#xff1a;中等 给定一个非负整数数组&#xff0c;a1, a2, ..., an, 和一个目标数&#xff0c;S。现在你有两个符号 和 -。对于数组中的任意一个整数&#xff0c;你都可以从 或 -中选择一个符号添加在前面。 返回可以使…
阅读更多...
mysql当前状态分析（show status）

mysql当前状态分析（show status）

文章目录 查看当前线程数据查询连接情况查询缓存相关查询锁相关查询增删改查执行次数查询DDL创建相关 SHOW STATUS 是一个在 MySQL 中用来查看服务器运行状态的命令。它可以帮助你了解服务器的当前性能&#xff0c;包括连接数、表锁定、缓冲区使用情况等信息。 查看当前线程数据…
阅读更多...
电机专用32位MCU PY32MD310，Arm® Cortex-M0+内核

电机专用32位MCU PY32MD310，Arm® Cortex-M0+内核

PY32MD310是一颗专为电机控制设计的MCU&#xff0c;非常适合用做三相/单相 BLDC/PMSM 的主控芯片。芯片采用了高性能的 32 位 ARM Cortex-M0 内核&#xff0c;QFN32封装。内置最大 64 Kbytes flash 和 8 Kbytes SRAM 存储器&#xff0c;最高48 MHz工作频率&#xff0c;多达 16 …
阅读更多...
Vue2工程化

Vue2工程化

本节目标 工程化开发项目运行流程组件化组件注册自定义创建项目 工程化开发 基于构建工具的环境开发Vue Webpack的缺点 webpack的配置并不简单基础的配置雷同各公司缺乏统一标准 Vue CLI Vue CLI是Vue官方提供的一个全局命令工具帮助我们快速创建标准化的开发环境( 集成了w…
阅读更多...
图解通用网络IO底层原理、Socket、epoll、用户态内核态······

图解通用网络IO底层原理、Socket、epoll、用户态内核态······

LInux 操作系统中断 什么是系统中断 这个没啥可说的&#xff0c;大家都知道&#xff1b; CPU 在执行任务途中接收到中断请求&#xff0c;需要保存现场后去处理中断请求&#xff01;保存现场称为中断处理程序&#xff01;处理中断请求也就是唤醒对应的任务进程来持有CPU进行需要…
阅读更多...
YOLOv10开源，高效轻量实时端到端目标检测新标准，速度提升46%

YOLOv10开源，高效轻量实时端到端目标检测新标准，速度提升46%

前言 实时目标检测在自动驾驶、机器人导航、物体追踪等领域应用广泛&#xff0c;近年来&#xff0c;YOLO 系列模型凭借其高效的性能和实时性&#xff0c;成为了该领域的主流方法。但传统的 YOLO 模型通常采用非极大值抑制 (NMS) 进行后处理&#xff0c;这会增加推理延迟&#…
阅读更多...
gulimall-search P125 springboot整合elasticsearch版本冲突

gulimall-search P125 springboot整合elasticsearch版本冲突

一、问题 spring-boot.version 2.2.4.RELEASE,在gulimall-search pom.xml中添加elasticsearch.version 7.4.2后&#xff0c;发现出现如下问题&#xff1a;elasticsearch版本是springboot引入的6.8.6&#xff0c;没有变为7.4.2。 二、原因 在gulimall-search 的pom文件中&#…
阅读更多...
【数据结构】平衡二叉树左旋右旋与红黑树

【数据结构】平衡二叉树左旋右旋与红黑树

平衡二叉树左旋右旋与红黑树 平衡二叉树 定义 平衡二叉树是二叉搜索树的一种特殊形式。二叉搜索树&#xff08;Binary Search Tree&#xff0c;BST&#xff09;是一种具有以下性质的二叉树&#xff1a; 对于树中的每个节点&#xff0c;其左子树中的所有节点都小于该节点的值…
阅读更多...
Python - 深度学习系列38 重塑实体识别5-预测并行化改造

Python - 深度学习系列38 重塑实体识别5-预测并行化改造

说明 在重塑实体识别4中梳理了数据流&#xff0c;然后我发现pipeline的串行效率太低了&#xff0c;所以做了并行化改造。里面还是有不少坑的&#xff0c;记录一下。 内容 1 pipeline 官方的pipeline看起来的确是比较好用的&#xff0c;主要是实现了比较好的数据预处理。因为…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023