1.11Web前端基础笔记

最新推荐文章于 2024-07-23 14:51:29 发布
最新推荐文章于 2024-07-23 14:51:29 发布
阅读量156 收藏 1
点赞数 1
分类专栏： 1.web前端——html、css基础 文章标签： 前端 css html web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64838786/article/details/123584074
版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

一、背景

1.背景颜色

background-color： red;

2.背景图片

 background-image: url("img/dog.jpg");
  • 可以同时设置背景颜色和背景图片，这样背景颜色就成为了背景图片的背景
  • 如果背景图片小于元素，则背景图片会自动在元素中重复平铺将元素占满
  • 如果背景图片大于元素，将不完全显示
background-repeat:repeat-x;

background-repeat用来设置背景的重复方式
可选值：

  • repeat 默认值，背景会沿着x轴、y轴双方向重复
  • repeat-x 沿着x轴方向重复
  • repeat-y 沿着y轴方向重复
  • no-repeat 不重复
background-position:center;

background-position用来设置背景图片的位置
可选值：

  • top、left、right、bottom、center使用方位时必须同时指定两个值，也可只写一个
.box1{
            width: 1000px;
            height: 1000px;
            background-image: url("img/轮播图2.jpg");
            background-color: gray;
            background-repeat: no-repeat;
            background-position: left bottom;
        }

在这里插入图片描述

还可以用偏移量指定背景图片的位置：

background-position:-50px 150px;

background-clip 设置背景的范围
可选值：

  • border-box 默认值，背景会出现在边框的下边
  • padding-box 背景不会出现在边框，只会出现在内容区和内边距
  • content-box 背景只会出现在内容区

background-origin背景图片的偏移量计算的原点
可选值：

  • padding-box 默认值，background-position从内边距开始计算
  • content-box 背景图片的偏移量从内容区开始计算
  • border-box 背景图片的偏移量从边框处开始计算

background-size设置背景图片的大小
可选值：

  • 第一个值表示宽度 第二个值表示高度，如果只写一个另一个值为auto
  • cover 图片的比例不变，将元素铺满
  • contain 图片比例不变，在元素中完整显示

background-attachment设置背景图片是否跟随元素移动
可选值：

  • scroll 默认值，背景图片会随之元素移动而移动
  • fixed 背景会固定在页面中，不会随元素移动

background背景相关的简写属性，所有背景的样式都通过该样式设置
注：position要写在size前面，并用/分开；origin要写在clip前面

.box1{
            width: 500px;
            height: 500px;
            border: 10px red double;
            padding: 50px;
            background: url("img/轮播图4.jpg") yellowgreen no-repeat center center/contain border-box content-box;
        }

结果：
在这里插入图片描述

二、背景练习——按钮练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:link{
            display: block;
            width: 93px;
            height: 29px;
            background-image: url("img/link.png");
        }
        a:hover{
            background-image: url("img/hover.png");
        }
        a:active{
            background-image: url("img/active.png");
        }
    </style>
</head>
<body>
    <a href="#"></a>
</body>
</html>

在这里插入图片描述

图片闪烁问题:
图片属于网页中的外部资源,外部资源都需要浏览器单独发送请求加载
浏览器加载外部资源时是需要加载的,用则加载,不用就不加载
解决方法
可以将多个小图片统一保存到一个大图片,然后通过调整background-position,这样图片会同时加载到网页中,就可以有效避免出现闪烁
这个方法称为 CSS-Sprite,也称为 雪碧图 
a:link{
            display: block;
            width: 93px;
            height: 29px;
            background-image: url("img/btn.png");
        }
        a:hover{
            background-position: -93px 0;
        }
        a:active{
            background-position: -186px 0;
        }

三、线性渐变

通过渐变可以设置一些复杂的背景颜色,可以实现从一个颜色向其他颜色过渡的效果渐变是图片,需要通过background-image设置

线性渐变,颜色沿着一条直线发生变化
linear-gradient()
linear-gradient(red,yellow)红色在开头,黄色在结尾,中间是过渡区域.
可以指定线性渐变的方向 to left /to right /to bottom /to top /xxxdeg 表示度数 /to top left /.25 turn 表示圈数 
box1{
            width: 500px;
            height: 500px;
            background-image: linear-gradient(.45turn,#e3e4e5,pink);
        }

在这里插入图片描述

可以写多个颜色,平均分布,也可以手动指定渐变的分布情况

            background-image: linear-gradient(#e3e4e5 50px,pink 200px);

repeating-linear-gradient()可以平铺的线性渐变

background-image: repeating-linear-gradient(#e3e4e5,pink 100px);

在这里插入图片描述

四、径向渐变

radial-gradient()径向渐变(放射性的效果)

默认情况下径向渐变的形状根据元素的形状来计算
正方形 - - >圆形
长方形 - ->椭圆形
也可以手动指定
  • radial-gradient(100px 100px,red,yellow);
  • circle:圆形radial-gradient(circle,red,yellow);
  • ellipse:椭圆形radial-gradient(ellipse,red,yellow);
  • 也可以指定渐变的位置radial-gradient(at top left,red,yellow);

也可以指定渐变的位置

语法:

radial-gradient(大小 at 位置 ,颜色 位置 ,颜色 位置 ,颜色 位置)
注:位置前面要用at开头,也可以用像素值,大小位置可省略不写

大小:
circle 圆形
ellipse 椭圆
closest-side 近边
closest-corner 近角
farthest-side 远边
farthest-corner 远角
位置
top right left center bottom 
 background-image: repeating-radial-gradient(100px 100px,pink,#e3e4e5);

结果:
在这里插入图片描述

五、电影卡片练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电影卡片</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="fa/css/all.css">
    <style>
        .outer{
            width: 240px;
            margin: 100px auto; 
            box-shadow: 0 0 10px rgba(0, 0, 0, .3);
        }
        .img-wrapper img{
            width: 100%;
            vertical-align: bottom;
        }
        .info{
            margin: 0 18px;
            color: #acaaaa;
            font-size: 14px;
        }
        .info .title{
            color: #717171;
            font-size: 18px;
            margin: 13px 0 15px 0;
        }
        .info .category i{
            margin-left: 4px;
            margin-right: 7px;
        }
        .info .intro{
            margin: 17px 4px;
            line-height: 20px;
        }
        .star-wrapper{
            height: 46px;
            border-top: 1px solid #e9e9e9;
            line-height: 46px;
            color: #ddd;
            padding: 0 16px;
        }
        .star-wrapper .light{
            color: #b9cb41;
        }
        .star{
            float: left;
        }
        .star-wrapper .weibo{
            float: right;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="img-wrapper">
            <img src="img/dog.jpg" alt="">
        </div>
        <div class="info">
            <h2 class="title">动画电影</h2>
            <h3 class="category">
                <i class="fas fa-map-marker-alt"></i>
                动画
            </h3>
            <p class="intro">这是一部迪士尼动画电影，炒鸡炒鸡棒！！！</p>
        </div>
        <div class="star-wrapper">
            <ul class="star">
                <li class="fas fa-star light"></li>
                <li class="fas fa-star light"></li>
                <li class="fas fa-star"></li>
                <li class="fas fa-star"></li>
            </ul>
            <ul class="weibo">
                <li class="fab fa-weibo"></li>
            </ul>
        </div>
    </div>
</body>
</html>

结果:
在这里插入图片描述

至 暗
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【前端学习笔记day28】3.12. background属性
汪雯琦的博客
01-30 1371
文章目录3.12. background属性 3.12. background属性 ## background属性 属性解释 background属性是css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，background是一个复合属性，它可以分解成如下几个设置项： background-color 设置背景颜色 background-image 设置背景图片地址...
1.13Web前端基础笔记
m0_64838786的博客
03-30 136
html最后一篇！！！🎉🎉🎉
前端第三天
m0_53232536的博客
07-09 37
复合选择器 后代选择器 元素1 元素2{} 元素1和元素2空格隔开 一层一层往下 元素2是元素1的子级或者孙，最终选择的是元素2 例：ol li a{color：red}把 ol的li的a变色 子选择器 只能选择作为某元素最近一级子元素 元素1>元素2{} 元素2只能是元素1的子，最终选择的是元素2 并集选择器 元素1,元素2{} 一般竖着写，最后一个不要加逗号 伪类选择器 静态伪类：:link超链接点击之前 :visited超链接被访问之后 动态伪类：:ho...
CSS里的 no-repeat 是什么意思
Andrew_Chenwq的博客
09-18 6839
CSS 里的 no-repeat是针对背景图来说的。当你设置了no-repeat这个属性后，你的背景图将不会被重复，再换一种说法，你在网站上所看见的背景图就是你所增加的图， 不会出现平铺或重复的现象。当然你仍然可以通过其他方式来 控制图 的位置，例如： {backgroud:top, center, no-repeat;} 这样你的背景图就位于上部的居中位置。
1.2Web前端基础笔记
m0_64838786的博客
03-14 354
web前端，第二篇 学习笔记
Python基础学习笔记
03-21
根据b站千峰教育所做的笔记 1.Python基础 1.1使用基础 1.2PIP使用 1.3内置函数/变量/模块 1.4代码输入基础知识细节 1.5列表 1.6元组 1.7字典 1.8集合 1.9公共方法 1.10推导式 1.11函数 1.12文件操作 1.13语法错误与...
asp1.11.rar_WEB开发_ASP_
08-11
在ASP1.11版本中，我们主要关注的是ASP技术在WEB开发中的应用，特别是它如何被用来构建一个全静态的树形论坛。 在WEB开发中，树形结构常用于组织和展示信息，比如论坛的版块分类、主题和帖子的层次关系。全静态的树...
Django （Web 应用程序框架） v1.11正式版
12-02
Django 项目是一个定制框架，它源自一个在线新闻 Web 站点，于 2005 年以开源的形式被释放出来。Django 框架的核心组件有： 用于创建模型的对象关系映射 为最终用户设计的完美管理界面 一流的 URL 设计 设计者友好的...
jquery 1.11 版本
02-16
jquery 3 版本没有 jquery 1.11版本好。
gdal1.11文档1.pdf
11-23
GDAL 1.11是该库的一个版本，此文档详细介绍了GDAL的功能、API以及相关的开发和用户指南。 **第一章 GDAL - 地理空间数据抽象库** 1. **用户导向的文档**：这部分内容主要是为GDAL的使用者准备的，可能包括如何...
no-repeat案例
悲欢离合
04-26 3546
理解 no-repeat x xp y xp -x表示上方移动x个xp， x表示下方移动x个xp， -y表示左方移动x个xp， -y表示右方移动x个xp， 1一张图片有许多图像，图像都规则的显出 2.网站先出来如图所示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g...
html中hover和no-repeat
qq_43560721的博客
11-23 4991
hover：当鼠标滑上时。 （其实就是给你鼠标要滑上的区域一个超链接，然后给它一个伪类来实现你想要实现的效果。） （这里以我自己的项目效果为例） no-repeat：调像素，后边紧跟的是调动的x轴y轴的值。 1.最基本的 当鼠标滑上文字文字变色。 a:hover{ color:red; } 像这种给文字一个超链接，然后再写一个伪类实现你想要实现的效果。 1.当鼠标滑上时出现红...
css中元素backgroud-repeat的设置中为no-repeat含义为不平铺
一木生兮
06-26 5041
css中no-repeat一般用在元素backgroud-repeat的设置中，含义为不平铺；一般与background-image 一起使用；此图片做背景时不平铺；另外还有几个其他值：repeat:平铺repeat-x:横向平铺repeat-y:纵向平铺...
5.CSS学习（浮动）
最新发布
ShawLee0925的博客
07-23 172
css浮动——float特点
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 76
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 920
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 64
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值