html、css
关注
分享
扫一扫
咩有猫腻.
要努力哦.
展开
-
css命名
常用的CSS命名规则 1.注释的写法: /* Footer */ 内容区 /* End Footer */2. id的命名: (1)页面结构 容器: container 页头：header 内容：content/container 页面主体：main 页尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center原创 2020-06-29 10:50:49 · 229 阅读 · 0 评论 -
公用的、基础的、重置的css和一些常用的文件
reset.css@charset "utf-8";html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img,input { margin: 0; padding: 0;}body { font-size: 16px; font-family: "微软雅黑";}ul,ol,li { list-style: none;}b,strong { font-原创 2020-06-29 10:47:34 · 181 阅读 · 0 评论 -
css-button标签说明
button按钮 是H5专门强化的标签,实际项目中,推荐使用button标签,替换input按钮 样式设定更方便,功能更加强大 在一般情况下,button按钮默认没有任何功能,配合JavaScript使用 在form标签中 button 按钮默认是提交功能 type="submit" 重置标签恢复默认值 type=...原创 2020-04-02 14:11:36 · 2514 阅读 · 0 评论 -
小米网页案例
1.小米网站的大致框架<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g...原创 2020-03-09 18:23:43 · 3489 阅读 · 0 评论 -
响应式布局案例
1.案例一<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do...原创 2020-03-09 17:44:15 · 617 阅读 · 0 评论 -
grid网格布局案例
原创 2020-03-09 17:30:53 · 194 阅读 · 0 评论 -
rem布局案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...原创 2020-03-09 17:19:45 · 560 阅读 · 0 评论 -
flex-流式布局案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...原创 2020-03-09 17:14:48 · 643 阅读 · 0 评论 -
grid网格布局
1. outline: none;chrome浏览器选中选中元素的默认蓝色框框。2. grid网格布局作用在父容器上的： display : grid grid-template-columns : 设置列数 grid-template-rows : 设置行数 fr单位 repeat()方法 注：网格中提供了一个新的单...原创 2020-03-09 14:20:00 · 273 阅读 · 0 评论 -
flex和grid骰子立方体
<div id="box2"> <div></div> <div></div></div><div id="box3"> <div></div> <div></div> <div>...原创 2020-03-09 12:23:14 · 239 阅读 · 0 评论 -
css的四则运算//子元素在父元素中居中
1. 正常情况下，CSS是不支持运算的width : 400px - 200px -> 宽度失效了calc() : 可以进行四则运算width:calc(100% - 200px);width:width:calc(100% * 2);**注：**运算的时候，需要在运算符两边添加空格**注：**乘除的时候，是只写倍数的，不写单位。**注：**应用场景，在百分比与像素进行计算的时...原创 2020-03-09 12:03:49 · 248 阅读 · 0 评论 -
字体图标//文字阴影//盒子阴影//浏览器前缀//遮罩//倒影//模糊
1. 字体图标font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中。比如：你可以想象成一个小图片，其实它不是图片，而是一个字。 好处： 1.可以非常方便的改变大小和颜色 font-size:40px; color:red; 2.放大后不会失真 3.减少请求次数和提高加载速度 4.简化网页...原创 2020-03-08 23:47:51 · 554 阅读 · 0 评论 -
background背景图填充/裁切/css渐变
1. background-origin : 背景图的填充位置 默认情况下，如果xy都平铺的话，border padding content 区域都有背景图。 padding-box (默认) : 在padding区域开始填充背景图 border-box : 在border区域开始填充背景图 content-box : 在content区域开始填充背景图2. background-...原创 2020-03-08 23:19:54 · 677 阅读 · 0 评论 -
多种过渡变形动画（定位）组合案例
1.2.原创 2020-03-08 22:18:56 · 617 阅读 · 0 评论 -
摩天轮-position+animation
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding:0;} body,html{height:100%;} body{b...原创 2020-03-08 22:12:34 · 5785 阅读 · 0 评论 -
transition过渡/transform变形/animation动画
1. CSS3CSS3是CSS的最新版本。width height background border 都属于 CSS2.1CSS3 会保留之前 CSS2.1的内容，只是添加了一些新的语法。CSS3 : border-radius :nth-of-type() background-size2. transition过渡transition-property : 规定设置过渡...原创 2020-03-08 21:47:57 · 288 阅读 · 0 评论 -
折扇案例
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>*{padding:0;margin:0;}.box{width:600px; height:230px; margin:50px ...原创 2020-03-08 21:36:38 · 336 阅读 · 0 评论 -
position定位及小案例
一.position定位和float浮动的区别浮动(float)主要是解决左右排列的问题，定位(position)则主要是解决叠加排列的问题，设置对象的定位方式，可以让布局层位置容易绝对定位，控制盒子对象位置更加准确。二.position语法与结构① 语法：position：static(默认)/relative(相对定位)/absolute(绝对定位)/fixed(固定定位)/sticky...原创 2020-02-23 17:06:07 · 907 阅读 · 0 评论 -
flex弹性布局
一、弹性布局是什么flex布局即弹性布局，主要代替传统float浮动布局，解决排版和对齐方式等问题，其优势是做一维布局（网格布局是二维布局）。二.flex布局的用法布局要给父元素设置，子元素按照布局方式排列，他会使块级元素不独占一行① 设置在父容器上的内容display：flex; 【必须存在，才能进行弹性布局】flex-direction：row;【主轴排列方向】row;默...原创 2020-03-01 23:32:28 · 248 阅读 · 0 评论 -
css3中一些标签和控件的扩展学习
一、音频与视频audio ：音频 ，双标签controls : 显示控件loop : 循环播放autoplay : 自动播放 ( 很多浏览器已经禁止这个功能，因为考虑到用户体验的问题 )muted : 静音video : 视频 ， 双标签 object-fit: cover; 可以让视频覆盖整个父容器。注：音频和视频的默认控件是隐藏的。注：如果想做出跟QQ音乐一样的效果...原创 2020-03-03 23:22:20 · 194 阅读 · 0 评论 -
响应式布局
1. 响应式布局用一套代码，去适配不同的设备。既可以运行在PC端，也可以运行在移动端。注：比较适合小网站，个人博客，产品介绍页…2. CSS3 媒体查询即media queries，可以针对不同的媒体类型定义不同的样式，从而实现响应式布局 。也可以针对不同的分辨率设置不同的样式。1024分辨率以上：PC端1024 ~ 768 : pad pro768 ~ 450 : pad mini...原创 2020-03-04 21:54:34 · 174 阅读 · 0 评论 -
XHTML与HTML5的区别及HTML5新语义化标签
一. HTML5 与 XHTML区别HTML4.01 -> HTML5( 功能强大 )XHTML : XML + HTML ( 严格版本的HTML )发展 XHTML2.0区别： **DOCTYPE文档及编码** HTML5 : <!DOCTYPE html> XHTML和HTML4.01 : <!DOCTYPE html P...原创 2020-03-05 23:26:29 · 265 阅读 · 0 评论 -
移动端的两种布局（流式布局、rem布局）
一. 当用户访问淘宝网站的时候，网站做了什么处理？大网站：一般情况下，PC端的网页和移动端的网页是两套代码。用户：www.taobao.com -> 淘宝的服务端（检测用户是PC端过来，还是移动端）-> PC端 -> https://www.taobao.com-> 移动端 -> 后端重定向 -> https://main.m.taobao.com/...原创 2020-03-06 21:12:39 · 983 阅读 · 0 评论 -
锚点跳转
锚链接的作用：在同一页面内的不同位置进行跳转1. name方法 2.id方法 <标签 id=“名字”></标记>原创 2020-03-07 22:56:58 · 198 阅读 · 0 评论 -
边框做出小三角
1.效果2.代码原创 2020-03-07 23:01:26 · 184 阅读 · 0 评论 -
字体属性及复合写法
1.效果2.代码3.复合写法原创 2020-03-07 23:04:44 · 616 阅读 · 0 评论 -
表格+表单及其组合
一.表格1.效果1-2.代码2.效果2-2.代码3.效果-表单中用lable3-2.代码二.表格+表单组合1.效果1-2.代码2.效果1-2.代码原创 2020-03-07 23:17:42 · 332 阅读 · 0 评论 -
浮动与清浮动
float浮动文档流 文档流是文档中可显示对象在排列时所占用的位置。float特性加浮动的元素，会脱离文档流，会沿着父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。取值：left 沿着父容器靠左排列。right 沿着父容器靠右排列。none 没有浮动float注意点 只会影响后面的元素。内容默认提升半层。默认宽根据内容决定。换行排列，当容器放不下...原创 2020-03-08 15:50:50 · 160 阅读 · 0 评论 -
css继承-文字及inherit/优先级-权重/盒子问题box-sizing/溢出overflow
一. CSS继承文字相关的样式可以被继承color line-height font-style font-size font-weight …布局相关的样式不能被继承 ( 默认行为 )通过设置inherit值，可改变默认的继承方式。 二. CSS优先级相同样式优先级 当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。 内部样式与外部样式 内...原创 2020-03-08 16:14:47 · 1025 阅读 · 0 评论 -
标签分类/标签嵌套规范/透明度/手势/最小宽高/CSS默认样式
一. 标签的分类按类型分： 1. block (块) : div ul ol li dl dd dt p h1 h2 ..h6 ... 特点： 1. 块是上下排列的 ，块是独占一行的。(霸道的小总裁) 2. 块，支持CSS中的所有样式。 3. 当块不写宽度的时候，默认的宽度是父容器的宽...原创 2020-03-08 16:53:35 · 183 阅读 · 0 评论 -
BFC/添加省略号/圆角
1. 触发BFC的样式浮动元素：float 除 none 以外的值绝对定位元素：position (absolute、fixed) display 为 inline-block、table-cells、flexoverflow 除了 visible 以外的值 (hidden、auto、scroll)2. BFC解决的问题解决子元素带动父层级的问题解决margin叠加问题...原创 2020-03-08 17:21:49 · 147 阅读 · 0 评论 -
列表案例做法
案例一案例二案例三案例四案例五原创 2020-03-08 17:28:20 · 289 阅读 · 0 评论 -
精灵图/超大图居中/滑动门/轮播图/漂亮控件/通栏版心
一. CSS Sprite（精灵图、雪碧图）特点：优化网页的手段，提高加载速度。 好处 可以减少图片的质量，网页的图片加载速度快 减少图片的请求的次数，加快网页的打开通过PS工具中的切片工具，可以非方便的测量位置和大小。在线处理雪碧图：http://alloyteam.github.io/gopng二. 超大图居中1. 用背景 : back...原创 2020-03-08 20:51:31 · 379 阅读 · 0 评论 -
导航栏
1.过渡+背景图定位移动原创 2020-03-08 21:03:06 · 180 阅读 · 0 评论 -
固定定位-左右侧分享
一.左侧分享原创 2020-03-08 21:08:40 · 156 阅读 · 0 评论