300px

2024-10-30JS实现图片放大镜效果
代码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title>
2024-10-20第六章作业
<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>旅游攻略网站</title> <styletype="text/css"> .all{ width:600px; height:800px; background:url(img/bg.JPG); }
2024-10-17盒子的属性
在CSS中，"boxmodel"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。下面的图片说明了盒子模型(BoxModel)： width和heightwidth:width属性设置元素的宽度这个属性定义元素内容区的宽度，在内容区外面可以增加内
2024-08-15css水平移动动画
<template><divid="app"><divclass="container"><div:class="{'moving':isMoving}"class="box"><button@click="moveBox">Move</button>
2024-08-08【CSS入门】第二课 - margin外边距
这一小节，我们说一下margin外边距。怎么理解这个外边距呢，比如小张和小丽站在一起，紧紧排着站。试想一下，如果他俩冬天都穿着羽绒服和夏天穿着短袖，是不是占据的空间会不一样呢。那么回到HTML网页开发商来说，如果两个元素，他们加一些外边距，占的空间也会不一样，而且会使两个元素的距离也
2024-05-20简单的css3头像旋转与3D旋转效果
Tips：当你看到这个提示的时候，说明当前的文章是由原emlog博客系统搬迁至此的，文章发布时间已过于久远，编排和内容不一定完整，还请谅解`简单的css3头像旋转与3D旋转效果日期：2017-7-10阿珏css浏览：3896次评论：2条经常会在一些网站看到评论区，评论人的头像当鼠标经过会360°旋
2024-04-15css 盒子模型
1.分类标准盒子模型content-box怪异盒子模型border-box2.示例代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1
2024-02-23网状布局
<template><div><divclass="wrap5wrap"><divclass="left"></div><divclass="center">网格布局</div><divclass="right"
2024-02-23绝对布局
<template><div><divclass="wrap2wrap"><divclass="left"></div><divclass="center">绝对定位布局</div><divclass="right&quo
2024-02-23浮动布局
<template><div><divclass="wrap1"><divclass="left"></div><divclass="right"></div><divclass="
2024-02-23表格布局
<template><div><divclass="wrap4wrap"><divclass="left"></div><divclass="center">表格布局</div><divclass="right"
2023-12-13css实现元素四周阴影
首先确定的是需要使用box-shadow这一属性语法如下：box-shadow:h-shadowv-shadowblurspreadcolorinset;h-shadow：表示水平方向上的阴影偏移量，必须指明，可以是正数、负数、0，如果为正数左方有阴影，如果为负数右方有阴影，如果为0它位于元素的正中间。v-shadow：表示垂直方向上的阴影偏移
2023-10-30图片渐进式加载
图片渐进式加载一般图片在网页上加载时，可能会因为网速问题，加载缓慢或者突兀出现感觉不协调。常见的解决办法有懒加载和渐进式等等。这里只说渐进式……参考例子//html<divclass="relative"><imageclass="zhanwei"src="占位/压缩图片"></image><imageclass="yuantu":
2023-10-19css 渐变与背景裁剪
1.css的渐变线性渐变/*线性渐变*/.one{width:300px;height:300px;background:linear-gradient(toright,rgb(244,239,239)2%,rgb(0,9,0)5%,rgb(244,239,239)9%);border:1pxsolidred;} <divclass="one"&g
2023-10-02假设高度已知,请写出三栏布局,其中左栏、右栏宽度各为300px,中间自适应.
浮动、绝对定位、flexbox、表格、网格布局.<stylemedia="screen">.layoutdiv{min-height:300px;}.layout.float{float:left;width:300px;background:red;}.layout.right{float:right;width:300px;background:blue;}.layout.center{background:yellow
2023-09-2019 相对定位
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>相对定位</title><style>#box{height:300px;width:300px;padding:20
2023-09-2020 相对定位练习
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>相对定位</title><style>#box{height:300px;width:300px;padding:20
2023-09-02220230823-flex实现水平垂直居中
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>flex</title><
2023-07-07关键帧与动画
HTML部分<body><divclass="box"></div></body>css部分//设置背景颜色body{background:#333;}.box{background:#fff;//设置显眼的颜色width:200px;//固定宽，为了看的见height:200px;//固定高，为了看的见position:re
2023-06-30轮播图效果
<style> @keyframesswiper{ 0%{transform:translateX(0);} 28%{transform:translateX(0);} 33%{transform:translateX(-300px);} 61%{transform:translateX(-300px);}
2023-06-25CSS实现图片自适应布局，且不拉伸变型
1.通过背景图的方式处理图片（通过background-size作用在容器上）.img_background{width:300px;height:300px;background-image:url('image.jpg');background-repeat:no-repeat;//是否平铺background-position:centercenter;//设置背景图像的起
2023-06-07JavaScript上传文件
效果实现无论是上传文件还是上传图片，用的都是input标签的type="file"；input标签触发onChange事件时，会接受input元素本身作为参数，元素对象的files属性，值是fileList(即文件列表，列表中是一个个文件对象，文件对象包括文件的名称，大小等)；有了文件列表之后，需要创建一个FileReader对象
2023-05-30css rotate翻转图像案例
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>.box{position:relative;width:300px;heig
2023-04-11CSS 实现垂直居中的5种方法
方法1：使用绝对定位和负外边距对块级元素进行垂直居中优点：兼容不错。缺点：必须提前知道被居中块级元素的尺寸.father{width:300px;height:300px;background-color:red;position:relative;
2023-04-11BFC
1.什么是BFC直译为块级格式化上下文理解一：把BFC理解成一块独立的渲染区域，元素触发BFC后，变成隔离的独立容器，容器内的元素不会影响到容器外的元素理解二：一种布局方式，相比box-sizing,flex布局而言，叫做传统布局2.实现BFC属性的方法1.浮动元素，float除none以外的值2.定位元