HTML CSS - 随笔分类 - zhongta

CSS 阴影效果text-shadow box-shadow

摘要：1.text-shadow 两个参数，水平阴影和垂直阴影 h1 { text-shadow: 2px 2px; } 第三个参数，颜色。 h1 { text-shadow: 2px 2px red; } 第四个参数模糊效果颜色，第三个参数是模糊的像素效果，第四个是颜色。 h1 { text-shad 阅读全文

posted @ 2025-01-28 10:52 zhongta 阅读(36) 评论(0) 推荐(0)

CSS object-position 按钮样式翻页标签样式多列布局 resize outline-offset box-sizing

摘要：1.The CSS object-position property is used to specify how an or should be positioned within its container. https://www.w3schools.com/css/css3_object-p 阅读全文

posted @ 2025-01-24 12:20 zhongta 阅读(20) 评论(0) 推荐(0)

CSS 图片进阶图片居中图片过滤器图片样式对象适应

摘要：https://www.w3schools.com/css/css3_images.asp 1.圆角图片 2.相框样式 3.响应式图片。图片会随窗口变动。 4.用样式覆盖图片图片居中 https://www.w3schools.com/css/css3_image_center.asp 图片过滤器阅读全文

posted @ 2025-01-23 11:29 zhongta 阅读(13) 评论(0) 推荐(0)

CSS Tooltip

摘要：A tooltip is often used to specify extra information about something when the user moves the mouse pointer over an element: <!DOCTYPE html> <html> <st 阅读全文

posted @ 2025-01-23 10:56 zhongta 阅读(29) 评论(0) 推荐(0)

CSS过渡 Transitions

摘要：How to Use CSS Transitions? To create a transition effect, you must specify two things: the CSS property you want to add an effect to the duration of 阅读全文

posted @ 2025-01-22 10:28 zhongta 阅读(25) 评论(0) 推荐(0)

html Web存储 webworker

摘要：web存储 https://www.w3schools.com/html/html5_webstorage.asp webworker https://www.w3schools.com/html/html5_webworkers.asp 阅读全文

posted @ 2025-01-21 11:20 zhongta 阅读(17) 评论(0) 推荐(0)

CSS text effects

摘要：1.溢出 <!DOCTYPE html> <html> <head> <style> p.test1 { white-space: nowrap; width: 200px; border: 1px solid #000000; overflow: hidden; text-overflow: cl 阅读全文

posted @ 2025-01-15 13:37 zhongta 阅读(17) 评论(0) 推荐(0)

CSS响应式布局

摘要：1.打印机 @media print{ background:transparent; } 2.屏幕 @media screen{ h1{ font-family:""; } } @media (width：800px){ h1{ color:blue; } } //检测视口宽度小于等于700px，阅读全文

posted @ 2025-01-14 14:37 zhongta 阅读(15) 评论(0) 推荐(0)

CSS计数器

摘要：Automatic Numbering With Counters CSS counters are like "variables". The variable values can be incremented by CSS rules (which will track how many ti 阅读全文

posted @ 2025-01-10 14:37 zhongta 阅读(18) 评论(0) 推荐(0)

CSS伸缩盒模型Flex

摘要：<style> .outer{ width:1000px; height:600px; background-color：#888； display:flex;//outer为伸缩容器。 } .inner{ width:200px; height:200px; background-color:sk 阅读全文

posted @ 2025-01-06 11:58 zhongta 阅读(26) 评论(0) 推荐(0)

CSS 一些重要部件的实现

摘要：1.导航条 https://www.w3schools.com/css/css_navbar.asp https://www.w3schools.com/css/css_navbar_vertical.asp https://www.w3schools.com/css/css_navbar_hori 阅读全文

posted @ 2025-01-05 15:32 zhongta 阅读(12) 评论(0) 推荐(0)

css3动画

摘要：When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times. 阅读全文

posted @ 2025-01-04 11:48 zhongta 阅读(26) 评论(0) 推荐(0)

CSS icon

摘要：Icons can easily be added to your HTML page, by using an icon library. How To Add Icons The simplest way to add an icon to your HTML page, is with an 阅读全文

posted @ 2024-12-29 14:51 zhongta 阅读(20) 评论(0) 推荐(0)

CSS 2D3D变换

摘要：1.2d位移 2d位移可以改变元素的位置。具体使用方法如下 1.先给元素添加转换属性transform 2.编写transform的具体值 translate() translateX() translateY() 可以写长度值，百分比，百分比是相当于自身的长宽。 translate()移动元素，从阅读全文

posted @ 2024-12-27 13:06 zhongta 阅读(19) 评论(0) 推荐(0)

CSS3

摘要：CSS查询网站 caniuse.com 构建工具 webpack 新增长度单位 vw 相当于视口宽度的百分比 vh 相当于视口高度的百分比 vmax 视口宽高较大值的百分比 rem根元素字体大小的倍数。新增盒子属性 box-sizing:content-box;//内容盒子 box-sizing 阅读全文

posted @ 2024-12-20 13:59 zhongta 阅读(16) 评论(0) 推荐(0)

CSS-定位

摘要：1.相对定位。 1.1如何设置相对定位？给元素设置postion:relative 即可实现相对定位。可以使用left,right top,bottom调整位置 1.2相对定位的参考点在哪里相对自己原来的位置。 1.3相对定位的特点. (1)不会脱离文档流，元素位置的变化只是视觉效果的变化。不阅读全文

posted @ 2024-11-24 14:04 zhongta 阅读(60) 评论(0) 推荐(0)

CSS-浮动float

摘要：1.浮动特点（1）脱离文档流（2）不管浮动前是什么元素，浮动后默认宽与高都被内容撑开（尽可能小），而且可以设置宽高。（3）不会独占一行。可以与其他元素共用一行。（4）不会margin合并，也不会塌陷，能够完美设置四个方向的margin padding （5）不会像行内块一样被当文本处理。不会阅读全文

posted @ 2024-11-22 14:41 zhongta 阅读(29) 评论(0) 推荐(0)

CSS 伪类选择器和伪元素选择器，属性选择器

摘要：1.没访问的a为橙色，访问过的为绿色。悬浮为蓝色，按下鼠标不松手为红色 a：link{ color:orange; } a:visited{ color:green; } a:hover{ color:blue; } a:active{ color:red; } 注意实现顺序，顺序错误效果会覆盖，失阅读全文

posted @ 2024-10-30 13:27 zhongta 阅读(160) 评论(0) 推荐(0)

html字符实体

摘要：1.空格在网页中会合并成一个，多个空格需要特殊字符表示。   产生空格。 2.&lt 小于号 &gt 大于号 3.&amp 产生一个&符。 4.￥ ¥ 5.© &copy； 6 × × 7.÷ ÷ 查找方式百度MDN 进入网页搜索术语表左侧查找enti 阅读全文

posted @ 2024-10-25 11:11 zhongta 阅读(25) 评论(0) 推荐(0)

html5布局

摘要：注释vscode ctrl+/ vs code 自动生成！+tab键删除某行 ctrl+shift+k shift+刷新按钮强制刷新 ctrl+enter 不改变当行元素换新一行 <html lang="zh-CN">设置语言为简体中文 <meta charset="UTF-8">使用utf- 阅读全文

posted @ 2024-10-15 13:16 zhongta 阅读(16) 评论(0) 推荐(0)

zhongta

随笔分类 - HTML CSS

公告