首页 > TAG信息列表 > 300px

第 60 题：已知如下代码，如何修改才能让图片宽度为 300px ？注意下面代码不可修改。

<img src="./down.png" style="width:480px !important" /> 答案 <img src="1.jpg" style="width:480px!important; max-width: 300px"> <img src="1.jpg" style="width:480px!important; transform:

前端图片等比例缩放方案

图片等比例缩放方案 在Web开发时无可避免的需要将图片进行缩放，缩放时需要保证图片不变形，也就是需要等比例缩放。 设定宽度或高度 引入图片时，仅设置图片的width或者是height就可以使另一边自适应，从而实现等比例缩放。 <section> <img id="t1" src="http://www.sdust.edu.cn/__

视频直播app源码，实现一个展开和关闭的动画效果

视频直播app源码，实现一个展开和关闭的动画效果 <template>  <div>    <el-button @click="changeShow(true)">展开</el-button>    <el-button @click="changeShow(false)">关闭</el-button>    <div class="mr_sty" :class=&q

Less css扩展语言

　　一、less基础 　　　　@变量名:值 　　　　　　 　　二、less嵌套 　　#header { 　　　　.logo { 　　　　　　width: 300px; 　　　　} 　　}  　　   　　三、less运算 　　less提供了+ - * / 四则运算 运算中间符号左右有空格  

css水平居中的5种几种方式

元素水平居中的第一种方式 子元素不需要宽度也可以 <div class="box"> <div class="son"> 我是内容 </div> </div> .box { width: 500px; height: 300px; background: pink; } .son { width: 300px; margin: auto; text-align

修改图片尺寸

问：如何修改才能让图片宽度为 300px ？注意下面代码不可修改。 <img src="1.jpg" style="width:480px!important;”> 答： 1.max-width: 300px 2.transform: scale(0.625,0.625) 3. box-sizing: border-box; padding: 0 90px;   4. zoom:0625   5.   img { animation: test 0s

【Vue2】Computed 计算属性

  计算属性在编写的时候是一个方法 但是在调用的时候作为属性使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport

练习5：轮播图布局

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d

css做旋转相册效果

css做旋转相册效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; pad

【原生Javascript案例】圆形进度条

案例效果 代码编写 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi

grid布局 #初体验 #九宫格

## 概念 将一个盒子划分成多个单元格，指定内容放在指定的单元格中，实现一种比较整齐的布局方式。例如：9宫格 css代码： .box{             width: 300px;             height: 300px;             border: 1px solid #000;                 /* 网格布局 */

让 div 水平并垂直居中（方法 1~6）中

<style>. 方法四         box4{             width: 300px;             height: 300px;             border: 2px solid green;             /* background-color: pink; */             /* margin: 100px auto; */             /

过渡transition

（一）过渡transition 在对元素进行样式的改变时有时候想要让她的过程进行的缓慢些，形成一个动画效果，因此可以使用transition属性。 （1）transition-property属性：指定需要进行过渡效果的属性（是css属性）。 Transition-property的属性值可以是任意css属性，而且可以写多个属性，只需要用逗号隔开

垂直水平居中的几种方法

html <div class="box"> <p class="inner">hello word</p> </div> 1flex布局 利用justify-content: center;实现水平居中，aline-items：center实现垂直居中； .box{ width: 300px; height: 300px; background-co

响应式web技术dem07

<!DOCTYPE html> <html> <htad> <meta charset="UTF-8"> <title>线性渐变</title> </htad> <style type="text/css"> .rainbow-randial-gradient { width:

CSS: double coin

<!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-

transform-style: preserve-3d，不会的快进来学

前言 今天仿制了一个3D反转的CSS动画，遇到了 transform-style 这个属性。 我们先来看看菜鸟教程和W3School对这个属性的介绍： 很显然，身为菜鸡的我，看不懂这两个介绍，依旧一头雾水。 再来看看 C 站上的诸多博客，好吧，我放弃了，全是代码，一张效果图都没有，云里雾里的。 所以我自己写一篇

实现垂直布局的 8 种方式

1. 单行文本垂直居中 若文本为单行文本的话，直接使用 line-height 等于父元素的高度即可实现。示例代码如下： HTML代码 <div class="text">这是一个需要居中的测试文本</div> css代码： .text { height: 200px; font-size: 3rem; font-weight: bold; background-color: #

使用swiper来实现轮播图

  <!DOCTYPE html> <html> <head> <title>swiper</title> <style> .swiper-container { width: 600px; height: 300px; } .swiper-slide{ width: 600px;

清浮动 css

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=

前端学习记录4

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> #div1{width:300px;heigh:300px;background: red;} #div1:hover{background: black}

037.文本样式

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2021-11-30字体样式</title> <style type="text/css"> /* 颜色：单词RGB：0~F RGBA：（A的范围是0~1） t

This is 第三天

今天继续学习了一些特效 1.shadow：阴影（盒阴影和文字阴影） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi

css-base-盒模型阴影效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="w

行块属性

快属性： div  p  ul　ol  h1-h6 特点 1，可以设置宽高 　　2. 不可以与别的共处一行      3. 不设置宽高的情况下，宽度为100%； 行内属性   span a 特点  1.不可以设置宽高           2.可以与别人共处一行           3.其宽高有由内容撑开 行内快属性 img input