css——background综合运用

站错队了同志      2022-02-10     380

关键词:

搜索栏图标:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        input {
            width:270px;
            height:28px;           
            background: url('serch.jpg') no-repeat right center;
        }
    </style>
</head>
<body>
    <input type="text" name="name" value="" placeholder="请输入..." />
</body>
</html>

效果:

视频列表图标:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        li{
            list-style:none;
            text-indent:2em;
            background:url('li.gif') no-repeat left center;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#">哈哈哈哈哈哈哈</a></li>
        <li><a href="#">哈哈哈哈哈哈哈</a></li>
        <li><a href="#">哈哈哈哈哈哈哈</a></li>
        <li><a href="#">哈哈哈哈哈哈哈</a></li>
        <li><a href="#">哈哈哈哈哈哈哈</a></li>
    </ul>
</body>
</html>

效果:

购物车图标:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        a{
            display:inline-block;
            width:67px;
            height:32px;
            background:url('110.png');
        }
            a:hover {
                background: url('110.png') bottom;
            }
    </style>
</head>
<body>
    <a href="#"></a>
</body>
</html>

素材:

效果:

在点击购物车图标后背景图片会立马切换到登陆:

css3一些综合运用(备份前端网)(代码片段)

html代码多行省略号display:-webkit-box;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;white-space:normal!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;<!DOCTYPEhtml><htmllan 查看详情

css3_综合案例

综合案例设置元素的width,还可以利用left和right 为了防止图片太小,background-size:100%100%;                  查看详情

css综合问题

...么,有什么优缺点将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。减少HTTP请求数,极大地提高页面加载速度增加图片信息重复度,提高压缩比,减少图片大小2display:none;与visibility:hidden;... 查看详情

css3新属性运用

1、动画效果===》===》》》 <style>.star{position:absolute;width:80px;height:80px;}.point{position:absolute;left:0;top:0;bottom:0;right:0;margin:auto;width:10px;height:10px;background:transparent;back 查看详情

css背景及css列表

CSS背景background是一个综合属性,它分为以下几个属性。background-color 背景色background-image 背景图片background-repeat 设置背景图的平铺方式属性值:no-repeat     repeat-x    repeat-ybackground-position 设置或检索对象的背景... 查看详情

综合运用(拓展)

...不是感觉到所学未能取到什么用,估计会有这种感觉吧?综合起来讲,C语言知识就是基本数据类型、循环、数组、基本函数运用、指针基本操作......后面还会讲到结构体(联合体、枚举体),全部都是基础知识。因为是C语言,所... 查看详情

综合运用之拖动模态框案例(代码片段)

...;*margin:0;padding:0;.father/*position:relative;*/width:400px;height:400px;background-color:pink;margin:100px;.sonposition:absolute;/*当给子盒子加了absolute那就可以直接让子盒子相对于父盒子的距离得到了 查看详情

贪吃蛇(双重优先队列的综合运用)

HoledoxEatingProblemDescriptionHoledoxisasmallanimalwhichcanbeconsideredasonepoint.ItlivesinastraightpipewhoselengthisL.Holedoxcanonlymovealongthepipe.Cakesmayappearanywhereinthepipe,fromtimetotime.Wh 查看详情

表单综合运用

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en"><head> <me 查看详情

综合运用(带lcd的机车版)

/***authorwjf*date2017/12/3014:23*每个长注释中的代码,都可以单独的模块运用*/////////////////引入头文件////////////////////////////////////////////////////通用字符串库#include<stdio.h>#include<string.h>#include<stdlib 查看详情

linux综合运用

一、 Linux用户和组及其权限管理请根据以下项目要求,写出操作过程和命令并进行相应的验证测试操作。项目要求:某软件开发公司即将开始在Linux系统上进行项目的开发。要实现的环境是:公司有软件开发,网络和技术支... 查看详情

指令综合运用-品牌案例.html

案列:使用vue实现品牌的增加,删除和关键字搜索以及时间的处理分析:手动实现筛选的方式:筛选框绑定到vm实列中的searchName属性中:<hr>输入筛选名称:<inputtype="text"v-model="searchName"> 使用v-for指令循环每一行的数据... 查看详情

实验五综合运用三种基本结构进行程序设计(综合性实验)

实验五 综合运用三种基本结构进行程序设计(综合性实验) 【实验目的】  (1)进一步掌握选择与循环结构程序设计的方法和技巧;(2)综合运用三种基本结构进行程序设计;【实验条件】  PC机或者远... 查看详情

excelvlookup和small综合运用

表数据如下:如何通过EXCEL函数把“谁拥有错误的代码”的名称列出来,数组公式如下:=IFERROR(INDIRECT("A"&IFERROR(SMALL(IF(ISERROR(VLOOKUP(T(IF({1},$C$2:$C$8&$B$2:$B$8)),$H$2:$H$4&$I$2:$I$4,1,)),ROW($C$2:$C$8),FALSE),R 查看详情

wpf--3dmax+blend+wpf综合运用

原文:WPF--3Dmax+blend+WPF综合运用引自:http://blog.sina.com.cn/s/blog_95dbdf9e0100we3z.html 本人小菜,WPF刚入门,只是写一下最近的项目心得。欢迎各位前辈们前来拍砖指正,感激不敬!先申明,小弟我入门仓促,很多东西也是一知半解... 查看详情

wpf--3dmax+blend+wpf综合运用

...甚解,所以大神们就直接绕路算了。总结一:3Dmax+blend+WPF综合运用开发环境:Autodesk3dsMaxDes 查看详情

一道c语言比赛真题,比较考验数组的综合运用,先给大家打个样(代码片段)

...目如下:内容我大概看了一下,非常考验数组的综合运用,以及数组下标的运用。首先在讲之前先给大家科普一下数组下标的巧妙运用:#include<bits/stdc++.h>usingnamespacestd;intmain()    intn,a[100],b;    ci 查看详情

一道c语言比赛真题,比较考验数组的综合运用,先给大家打个样(代码片段)

...目如下:内容我大概看了一下,非常考验数组的综合运用,以及数组下标的运用。首先在讲之前先给大家科普一下数组下标的巧妙运用:#include<bits/stdc++.h>usingnamespacestd;intmain()    intn,a[100],b;    ci 查看详情