css有哪些常用 控件

html-css015

css有哪些常用 控件,第1张

css有哪些常用控件可以分为三类，即id选择器、class选择器、标签选择器。

用法如下：

#id名 { 属性名:属性值}

.class名 { 属性名:属性值}

标签名 { 属性名:属性值}

其中，他们之间又可以以不同的方式进行组合，如下：

后代选择器: 父代名 后代名 { 属性名:属性值}

子代选择器: 父代名>子代名 { 属性名:属性值}

群组选择器: #name1, .name2, #name div { 属性名:属性值}

伪类选择器: name:伪类

通用(通配符)选择器: * { 属性名: 属性值}

在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"/>

众所周知，CSS有一个特殊的calc()函数，用于做基本的数学运算。

demo：

让我们来详细的学习一下这个功能吧:

calc()函数只能在值中使用。

demo:

也可以在部分属性的内部作为单独的值使用.

demo:

它甚至可以成为构成属性一部分的另一个功能的一部分！例如，这里的calc() 用于渐变的色标中.

demo:

calc() 可以将不同的单位混合在一起 .

demo:(在sass中)

例如：假设我们需要写定一个父盒子的7分之一的宽度的盒子；

calc() 中可以使用加减乘除 , 但他们在使用方法上有所不同。

加法(+)和减法(-)要求这两个数都是长度

除法(/)要求第二个数字是无单位的