html前端
一些html布局,和js效果
一只勤奋的代码狗
星辰大海
展开
-
flex超出宽度自动换行
效果图<!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&g原创 2022-02-12 14:48:40 · 9323 阅读 · 0 评论 -
opacity 避免子元素继承
把 background: #000000; opacity:0.5;属性改写成下面的方式background: rgba(0,0,0,0.5);原创 2022-02-06 11:32:43 · 744 阅读 · 0 评论 -
div自动适应浏览器高度的方法
div自动适应浏览器高度的方法<!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">原创 2022-02-04 23:20:51 · 1862 阅读 · 0 评论 -
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=device-width, initial-scale=1.0"> <title&g原创 2022-02-04 23:13:33 · 1024 阅读 · 0 评论 -
两栏布局左侧自适应,右固定
效果图<!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&g原创 2022-02-02 20:04:39 · 212 阅读 · 0 评论 -
两栏布局左固定,右侧自适应
效果图<!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&g原创 2022-02-02 20:02:44 · 336 阅读 · 0 评论 -
两列布局左右定宽布局
效果图<!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&g原创 2022-02-02 20:00:58 · 114 阅读 · 0 评论 -
三栏布局左侧中间固定,右侧自适应
效果图<!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&g原创 2022-02-02 19:58:10 · 321 阅读 · 0 评论 -
三栏布局左侧自适应,中间和右侧固定
效果图<!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&g原创 2022-02-02 19:55:47 · 145 阅读 · 0 评论 -
html布局三栏布局左右固定中间自适应
效果图<!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&g原创 2022-02-02 19:53:23 · 575 阅读 · 0 评论 -
html常见的网站布局header,footer,left,center
html常见的网站布局header,footer,left,center原创 2022-02-02 19:51:24 · 1008 阅读 · 0 评论 -
html布局双飞翼布局
效果图<!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&g原创 2022-02-02 19:48:33 · 276 阅读 · 0 评论