怎样设定自定义CSS

怎样设定自定义CSS,第1张

自定义CSS的三中方方式:

一、行间样式

 行间样式表是指将CSS样式编码写在HTML标签中,格式如下

<h1 style="font-size:12pxcolor:#000FFF">

我的CSS样式。

</h1>

行间样式表由HTML元素的HTML元素的style支持,只需将CSS代码用分号隔开写在style=""之中。这是最基本的形式,但是它没有实现表现与内容分离且不能灵活的控制多个页面所以我们只是在调试CSS代码的时候使用。

二、内部样式表

 内部样式表与行间样式表相似都是把CSS代码写在HTML页面中,稍微不同的是前者可以将样式表放在一个固定的位置,格式如下

<html>

<head>

<title>内部样式表</title>

<style type="text/css">

   h1{font-size:12px

      color:#000FFF

      }

</style>

</head>

<body>

    <h1>我的CSS样式。</h1>

</body>

</html>

内部样式表编码是初级的应用形式,不能达到跨页面使用所以不适合使用。

三、外部样式表

外部样式表是CSS应用中最好的一中形式,它将CSS样式代码单独放在一个外部文件中,再由网页进行调用。多个网页可以调用一个样式文件表,这样能够实现代码的最大限度的重用及网站文件的最优化配置,格式如下

<html>

    <head>

    <title>外部样式表</title>

    <link rel="stylesheet" rev="stylesheet" href="style.css">

    </head>

    <body>

        <h1>我的CSS样式。</h1>

    </body>

</html>

在style.css中的代码为

h1{font-size:12px

      color:#000FFF

      }

我们在<head>中使用了<link>标签来调用外部样式表文件。将link指定为stylesheet方式,并使用了href="style.css"指明样式表文件的路径便可将该页面应用到在style.css中定义的样式。

在style.css里添加下面样式

.goods_cut { 

background: url("../images/plus.gif") no-repeat scroll 0 0 transparent 

border: 0 none 

cursor: pointer 

display: block 

float: left 

font-size: 0 

height: 15px 

line-height: 0margin: 8px 3px 0 

width: 15px 

input.goodsBuyBox, input.number { 

border: 1px solid #DDDDDD 

float: left 

font-size: 10px 

height: 18px 

line-height: 18px 

margin: 5px 6px 0 

padding: 0 

text-align: center 

width: 32px 

.goods_add { 

background: url("../images/plus.gif") no-repeat scroll 0 -15px transparent 

border: 0 none 

cursor: pointer 

display: block 

float: left 

font-size: 0 

height: 15px 

line-height: 0 

margin: 8px 3px 0 

width: 15px 

}

在flow.dwt里,看各自的模板去修改,总之要找到这串代码:

<input type="text" name="goods_number[{$goods.rec_id}]"   ……

下面是脚本,放进flow.dwt里

     

 <script language="javascript" type="text/javascript"> 

                function goods_cut($val){ 

                    var num_val=document.getElementById('number'+$val) 

                    var new_num=num_val.value 

                    if(isNaN(new_num)){alert('请输入数字')return false} 

                    var Num = parseInt(new_num) 

                    if(Num>1)Num=Num-1 

                    num_val.value=Num 

                    document.getElementById('updatecart').click() 

                } 

                function goods_add($val){ 

                    var num_val=document.getElementById('number'+$val) 

                    var new_num=num_val.value 

                    if(isNaN(new_num)){alert('请输入数字')return false} 

                    var Num = parseInt(new_num) 

                    Num=Num+1 

                    num_val.value=Num 

                    document.getElementById('updatecart').click() 

                } 

            </script>

找到

<input type="text" name="goods_number[{$goods.rec_id}]"

搜索不到你就搜goods_number就行了

替换为:

                             

<span class="goods_cut" onclick="goods_cut('{$goods.rec_id}')"></span> 

                                    <input type="text" name="goods_number[{$goods.rec_id}]" id="number{$goods.rec_id}" value="{$goods.goods_number}" size="4" class="number" onblur="if(isNaN(this.value)){alert('请输入数字')return false}else{document.getElementById('updatecart').click()}" title="{$lang.goods_number_tip}"/> 

                                    <span class="goods_add" onclick="goods_add('{$goods.rec_id}')"></span>

找到

<input name="submit" type="submit" value="{$lang.update_cart}" class="btn_s3"/>

其实就是更新购物车的按钮

添加一个id=“updatecart”

<input name="submit" type="submit" id="updatecart" value="{$lang.update_cart}" class="btn_s3"/>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11954031.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存