Question

我想在左侧设置一个带有购物车图标的HTML按钮，如下图所示。使用css和html可以有人提供一个例子吗？

请参阅我现有的代码。

   .btn {
  background: #47b1c4;
  background-image: -webkit-linear-gradient(top, #47b1c4, #00708B);
  background-image: -moz-linear-gradient(top, #47b1c4, #00708B);
  background-image: -ms-linear-gradient(top, #47b1c4, #00708B);
  background-image: -o-linear-gradient(top, #47b1c4, #00708B);
  background-image: linear-gradient(to bottom, #47b1c4, #00708B);
  -webkit-border-radius: 10;
  -moz-border-radius: 10;
  border-radius: 10px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn:hover {
  background: #52c7de;
  background-image: -webkit-linear-gradient(top, #52c7de, #3ea2b3);
  background-image: -moz-linear-gradient(top, #52c7de, #3ea2b3);
  background-image: -ms-linear-gradient(top, #52c7de, #3ea2b3);
  background-image: -o-linear-gradient(top, #52c7de, #3ea2b3);
  background-image: linear-gradient(to bottom, #52c7de, #3ea2b3);
  text-decoration: none;
}
</style>

<input name="Dialogue" onclick="isListEmpty()" style="color:#ffffff;" type="button" class ="btn" value="Add to cart"/>

Answer 1

您可以在具有特定类的链接之前添加范围，如下所示：

Const COL_FRUIT As String = "Fruit", COL_FRESHUNTIL As String = "Fresh Until", COL_STATUSTEXT = "Status text"
Dim POS_FRUIT As Integer, POS_FRESHUNTIL As Integer, POS_STATUSTEXT As Integer


Sub Main()
    Dim lo As ListObject
    SetupData lo
    lo.ListColumns(COL_FRUIT).Range.Select
    MsgBox "Fruit column"

    lo.ListRows(2).Range.Select
    MsgBox "2nd row"

    lo.ListColumns(COL_FRUIT).DataBodyRange.Select
    MsgBox "Fruit data"

    lo.Range.AutoFilter Field:=POS_FRESHUNTIL, Criteria1:= _
        "<4/1/2018", Operator:=xlAnd
    lo.Range.AutoFilter Field:=POS_STATUSTEXT, Criteria1:= _
        "=*exp*", Operator:=xlAnd

    MsgBox "Filter applied: " & vbCrLf & _
    "Row 1 matched: " & (lo.ListRows(1).Range.Height <> 0) & vbCrLf & _
    "Row 2 matched: " & (lo.ListRows(2).Range.Height <> 0) & vbCrLf & _
    "Row 3 matched: " & (lo.ListRows(3).Range.Height <> 0)
End Sub
Sub SetupData(ByRef ref_lo As ListObject)
    Dim newwb As Workbook, currsh As Worksheet, vData As Variant, rData As Range, lo As ListObject
    Set newwb = Workbooks.Add
    Set currsh = newwb.Worksheets(1)
    Dim s As String
    vData = [{"Fruit", "Fresh Until", "Status text"; "Apple","03-03-2018","Fresh";"Apple","03-12-2017","Expired";"Apple","03-12-2017","Date over"}]
    POS_FRUIT = GetColPos(COL_FRUIT, vData)
    POS_FRESHUNTIL = GetColPos(COL_FRESHUNTIL, vData)
    POS_STATUSTEXT = GetColPos(COL_STATUSTEXT, vData)        

    Set rData = currsh.Cells(1).Resize(UBound(vData, 1), UBound(vData, 2))
    rData = vData
    Set ref_lo = currsh.ListObjects.Add(xlSrcRange, rData, , xlYes)     ' or ListObjects("name_of_your_listobject")        

End Sub

Function GetColPos(sCol As String, data As Variant) As Integer
    Dim ifr As Integer, ito As Integer, i As Integer
    ito = UBound(data, 2)
    ifr = LBound(data, 2)
    For i = ifr To ito
        If sCol = data(LBound(data, 1), i) Then
            GetColPos = i
            Exit Function
        End If
    Next

     GetColPos = -1

End Function

使用css渐变为按钮背景着色。

然后给出一个特定的宽度和背景图像，就像使用按钮本身一样。

<div><span class="icon"></span><a href="#">Add to cart</a></div>

Answer 2

它应该工作。如果您想要更多自定义使用此site来生成

.btn {
  height: 37px;
  width: 37px;
  background-image: url('http://www.w3.org/html/logo/downloads/HTML5_Logo_32.png');
  background-repeat: no-repeat;
}

<button class="btn"></button>

将图标添加到按钮

2 个答案: