- 2024-07-04原来逆水寒官网这样用CSS进行适配的
前言这段时间对逆水寒很是着迷，这不我又打开了它的官网，不得不说网易前端官网做的是真炫酷！！！同样是前端的开发者(自己还是小菜鸡罢了)，就不得不想扣扣官方的细节了，拿出我们老生常谈的问题—适配，官方做的很漂亮，窗口缩小不会影响页面内容位置的偏移，当我将窗口缩小的时候还会出现
- 2024-07-02html+css3实现超级充电动画
图例 源码在图片后面，有HTML和CSS个部分 源代码HTML<!doctypehtml><html><head><metacharset="utf-8"><title>PureCSS超级充电器</title><linktype="text/css"href="css/style.css"rel="stylesheet&quo
- 2024-06-23百度一下首页制作（HTML+CSS）
部分代码展示：<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>百度一下，你就知道</title><styletype="text/css">/*清除元素默认性质*/body{margin:0;
- 2024-06-19CSS（4）盒子模型
盒子模型（CSS重点）其实，CSS就三个大模块：盒子模型、浮动、定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。1.看透网页布局的本质网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整齐有序呢？看透网页布局的本质：把网页元素比如文字图片等
- 2024-06-17悬浮贴样式
悬浮贴样式悬浮贴样式效果图如下：预览地址：https://www.cnblogs.com/leo130-blogs/p/18251987html语句:<divclass="sticker"><divclass="sticker-title"></div><divclass="sticker-detail"><divclass=&qu
- 2024-06-14web前端期末大作业：旅游网页设计与实现——个人旅游博客(4页)HTML+CSS
- 2024-06-06HTML-页面布局
HTML-页面布局1盒子模型盒子：页面中所有的元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）盒子的大小，其实就包括三个部分：bo
- 2024-06-05给容器右上角打标，带图标
假设容器的active类名为is-active，那么可以通过伪元素的方式来给容器打标。效果如下： 样式如下：.is-active{ position:relative;}.is-active::after{content:"";position:absolute;right:0;top:0;border-right:20pxsolid#0A53C8;border-top:20pxsolid#0A
- 2024-06-04web前端期末大作业：旅游网页设计与实现——个人旅游博客(4页)HTML+CSS
- 2024-06-03CSS当中 grid响应式布局！
b站当中，那种布局方式，采用的就是grid的布局方式，如图：上代码吧，今天有点不舒服，就不叭叭了，<template><div><h3>grid布局</h3><hr><divclass="container"><divclass="box1box">index</div><divc
- 2024-06-02博客网页制作基础大二dw作业 web课程设计网页制作 个人网页设计与实现 我的个人博客网页开发
- 2024-06-02复盘样式-2024-06
1.将“保存”按钮移到详情页右下角，如下代码已测试能实现需求<script>functionalert1(){alert(1);}</script><!--我一开始写的<scripttype="css"></script>有误--><!--这样写里面定义的样式更不不会被识别--><style>.save-but
- 2024-06-01css特殊效果和页面布局
特殊效果圆角边框：div{border-radius:20px 10px 50px 30px;}四个属性值按顺时针排列，左上的1/4圆半径为20px，右上10，右下50，左下30。div{border-radius:20px;}四角都为20px。div{border-radius:20px10px;}左上和右下20px，右上左下10px。div{border-radius:20px10p
- 2024-05-31CSS中inset属性详细讲解
CSS中的inset属性是一种用于定位和调整非static定位元素的缩略属性。它是四个单独属性的简写，这些属性是top、right、bottom和left。通过inset属性，可以同时设置这些属性的值，简化代码书写。1.属性语法inset属性的语法如下：/*单个值*/inset:<length>|<perce
- 2024-05-27文字超出显示省略号及更多
超出一行显示省略号html如下：<divclassName='box'>时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。俨骖騑于上路，访风景于崇阿；临帝子之长洲，得天人之旧馆。层峦耸翠，上出重霄；飞阁流丹，下临无地。鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体
- 2024-05-22QPushButton设置选中和未选择时的图标
发现checked状态图标不会改变，qproperty-icon设置对checked样式设置无效，无法实现自动切换；所以还是采用如下样式，在代码里检测checked状态，设置不同的样式。如果没有文字，只是单独的图标，可以换成background-image:url(:/analysisCenter/Resources/analysisCenter/orderup.svg);可以
- 2024-05-06React入门
React极简入门：从JavaScript到React-知乎(zhihu.com) HTML<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>Mytestpage</title></head><body><h1>这是标题一</h1>
- 2024-04-18【布局进阶】巧用 :has & drop-shadow 实现复杂布局效果
最近，群里聊到了一个很有意思的布局效果。大致效果如下所示，希望使用CSS实现如下所示的布局效果：正常而言，我们的HTML结构大致是如下所示：<divclass="g-container"><divclass="g-nav"><ul><li>Tab1</li><li>Tab2</li>
- 2024-04-0153.html+css+js网页设计实例/“旅游”主题北京介绍/web前端期末大作业/
一、前言 本实例以“旅游”北京为主题设计，应用html+css+js，包括菜单导航、视频、留言表单、搜索等，供大家参考。【关注作者】2000+套Web模板，主题涵盖30+类型，更多网页课程、网页模板，DW网页成品源代码下载，有兴趣的联系我交流分享！您的支持是我创作的动力，【点赞收藏博文】，3Q！二
- 2024-04-01CSS3制作图片样式
问题：如果在img上直接使用CSS3的border-radius和box-shadow应用在图片，浏览器并不会完全显示。前面在《jQuery和CSS3给图片制作圆角》中说过其解决方法，就是把图片作为背景图片，这样我们就可以应用任何样式来修饰图片，而且此时浏览器也会完美的呈现出来。解决方法：要让浏览器能正常渲
- 2024-03-23前端实现响应式以及类似响应式的效果
背景：我需要说明一下，我说的响应式类似于小米官方的卡片效果，电脑端是4个，随着宽度的减小卡片的个数而变少。这里是宽度大的情况：这里是宽度小的情况： 1、使用css原生的@media这个不用多说，直接使用@media媒体响应就行了需要自己设计，主要是设计一个最小的高和宽，不然的话容易
- 2024-03-19全栈的自我修养 ———— js中的拖拽api
今天让我们试一下js中的比较有趣味的拖拽api，用他来做成一个课程表！一、实现目标二、过程1、html实现第一步第二步js实现三、源码一、实现目标二、过程1、html实现第一步创建一个container的拖拽区域，左边准备放课程，然后给每一个div设置同一个draggable为truetrue
- 2024-03-17HTML学习笔记4: 盒子模型
盒子模型布局标签div&spanDIV一行只显示一个，宽度默认是父元素的宽度, 高度默认由内容撑开,可以设置宽高设置div的CSS样式<style>div{width:200px;height:200px;box-sizing:border-box;/*指定widthheight为盒子的宽高*/
- 2024-02-21前端 html 一个元素padding-right，不起作用？毫无反应？padding right 无效
有没有宝子，开发html，给一个父元素padding-right，子元素却毫无反应，万分捉急，在线等，急！我知道你着急，但是你先别急我会在这里娓娓道来，带你走上一个新的技术台阶1、一段基础代码代码如下：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"
- 2024-01-31CSS规则集详解
整个结构称为规则集（规则集通常简称规则），注意各个部分的名称：选择器（Selector）HTML元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 <p> 元素）。要给不同元素添加样式，只需要更改选择器。声明（Declaration）一个单独的规则，如 color:red; 用来指