html+CSS+js部分基礎運用17

在圖書列表中，為書名“零基礎學JavaScript”和“HTML5+CSS3精彩編程200例”添加顏色。（請用class或style屬性實現），效果如下圖1所示：

圖1 圖書列表

Class和style的綜合應用。（1）應用class的對象、數組語法；（2）應用style的對象、數組語法. ?

?? ????????圖2 class和style的綜合應用

代碼可以截圖或者復制黏貼放置在“調試過程及實驗結果”中

補全代碼，頁面效果如下圖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>

<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>

</head>

<body>

? ? <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>

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>

<title>模擬古詩垂直顯示文本</title>

</head>

<body>

? ? <!--

? ? ? ? 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>

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

<!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>

? ? ? ? ? ? ?

? ? ? ? ? ? <p :class="classObject">1.2 對象-非內聯：Vue應用前景寬廣！</p>

? ? ? ? ? ? ?

? ? ? ? ? ? <div v-bind:class="{active: isActive }">1.3 對象-內聯：Vue應用前景寬廣！</div>

? ? ? ? ? ?

? ? ? ? ? ? <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>

? ? ? ? ? ?

? ? ? ? ? ? <div :style="styleObject">2.2 對象-非內聯：style對象</div>

? ? ? ? ? ? <div v-bind:style="[styleObjectA, styleObjectB]">2.3 數組：style數組</div>

? ? ? ? ? ?

? ? ? ? ? ? <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.pswp.cn/web/24427.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/24427.shtml
英文地址，請注明出處：http://en.pswp.cn/web/24427.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！