CSS样式
文章平均质量分 57
mango660
这个作者很懒,什么都没留下…
展开
-
【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>Doc原创 2022-05-19 22:20:17 · 99 阅读 · 0 评论 -
【轮播图js实现】
接上篇// 获取元素/* 我就是个憨批!!! */let box = document.getElementsByClassName('box')[0];let main = document.getElementsByClassName('main');let imgs = document.querySelectorAll('.main > img')let last = document.querySelector('.last')let next = document.qu.原创 2022-03-18 17:58:27 · 672 阅读 · 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>Doc原创 2022-03-18 16:54:41 · 468 阅读 · 0 评论 -
【自适应两栏式布局】
两栏式布局左列定宽,右列自适应左列不定宽,右列自适应1. 左列定宽,右列自适应<div class="container"> <div class="left">定宽左部分</div> <div class="right">自适应右部分</div></div>方法一:浮动 + margin.container{ width: 70%; border: 2px solid red;}原创 2022-03-18 13:49:53 · 316 阅读 · 0 评论 -
【选择器】14
文章目录选择器属性选择器2 伪元素选择器3 子节点伪类选择器选择器属性选择器E[attr]拥有attr属性的元素E[type=“text”]拥有attr属性且值为text的元素E[attr~=“value”]拥有attr属性且值包含了一个value词的元素,词列表用空格分开E[attr^=“value”]拥有attr属性且值以value开头的元素E[attr$=“value”]拥有attr属性且值以value结束的元素E[attr*=“value”]拥有attr属性且值包含了一个value原创 2022-02-27 13:03:05 · 233 阅读 · 0 评论 -
【iframe框架】13
iframe:框架标签在当前页面内开启新窗口。scrolling:是否有滚动条,值为yes(有)/no(无),默认为auto(需要的时候出现)frameBorder:是否有边框,值为正整数,默认为1,值为0时无边框src:打开的页面地址width/height:嵌套页面区域的宽高name:值可以作为atarget属性的值,使a的跳转方式为框架优点:解决加载缓慢的第三方内容图标和广告等的加载问题;无刷新文件上传;跨域通信缺点:会阻塞主页面的onload事件;无法被一些搜索原创 2022-02-27 11:54:48 · 136 阅读 · 0 评论 -
【盒模型阴影&背景】12
文章目录盒模型阴影和背景6.1 盒模型阴影6.2 盒模型背景盒模型阴影和背景6.1 盒模型阴影box-shadow:[inset] x y blur [spread] color,… (x、y、blur和color同文字阴影)[inset]:投影方式(默认为外投影,inset为内投影)[spread]:扩展阴影半径(先扩展原有形状,再开始画阴影)div{ width: 200px; height: 200px; margin: 0 auto; backgrou原创 2022-02-27 11:44:09 · 269 阅读 · 0 评论 -
【文字书写、文本阴影】11
文字书写和文字阴影文章目录文字书写和文字阴影1. 文本多列2. 文字书写方向3. 文字阴影1. 文本多列文本多列:将文本内容设计成像报纸一样的多列布局,集合样式columncolumn-width:指定列的宽度column-count:要分的列数column-gap:列之间的距离column-rule:栏目间隔线由(类似边框的复合样式width、color和style)p{ /* width: 800px; */ border: 2px solid fuchsia;原创 2022-01-02 22:16:05 · 330 阅读 · 0 评论 -
【css组合选择器】10
CSS组合选择器后代选择器:选取某元素的后代元素div p{ color: red;}子元素选择器:只能选择作为某元素直接/一级子元素的元素。div>p{ background-color:yellow;}相邻兄弟选择器:选择紧接在另一元素后的元素,且二者有相同父元素。p{ display: inline-block; width: 200px; height: 80px; background-color: chartreu原创 2022-01-02 22:09:04 · 236 阅读 · 0 评论 -
【三栏式布局、双飞翼布局、圣杯布局】09
三栏式布局文章目录三栏式布局1. 用calc函数实现三栏式布局2. 双飞翼布局3. 圣杯布局两边盒子固定宽度,中间盒子自适应的布局。1. 用calc函数实现三栏式布局<div class="wrap"> <div class="left"></div> <div class="middle"></div> <div class="right"></div></div>.wra原创 2022-01-02 22:05:24 · 333 阅读 · 0 评论 -
【表单】08
三、表单1. form 表单form标记:表单元素的容器,属性action、methodaction属性:表单处理服务器,完整格式(协议的名称必须写)method属性:表单的提交方式(post和get)GET 方法,浏览器会与表单处理服务器建立连接,然后在传输步骤中发送所有的表单数据(key=value的格式):浏览器会将数据直接附在表单的 action URL(Uniform Resource Locator,统一资源定位符,俗称网络地址) 之后,URL和数据间用问号进行分隔POST 方法原创 2022-01-02 21:58:02 · 498 阅读 · 0 评论 -
【BFC盒子】07
BFC文章目录BFC1. 自适应两栏式布局2. 防止外边距折叠3. 问题BFC(Block fomatting context)即"块级格式化上下文"。是一个独立的渲染区域,它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。Box是CSS布局的对象和基本单位,不同类型的Box,会参与不同的Formatting Context(一个决定如何渲染文档的容器),因此Box内的元素会以不同的方式渲染。display 属性为 block, list-item, table原创 2022-01-02 21:56:15 · 80 阅读 · 0 评论 -
【内联元素居中、内联块元素居中、区块元素居中】06
居中文章目录居中1. 文字、内联元素、内联块元素在父元素居中2. 区块元素在父元素中居中3. 练习1. 文字、内联元素、内联块元素在父元素居中文字、内联元素居中。父元素设置:text-align: center;`` line-height: height;.parent{ width: 500px; height: 400px; background-color: cadetblue; margin: 0 auto; text-align: cente原创 2022-01-02 21:52:17 · 748 阅读 · 0 评论 -
伪元素选择器_伪类选择器
文章目录8. 伪类选择器9. 伪元素选择器10. 练习学的越多,没学的越多;永远不要停下前进的脚步。8. 伪类选择器状态行伪类:a:link—选择a元素中未被访问的链接a:visited—选择a元素中已被访问过的链接a:hover—选择a元素中鼠标指针位于其上的链接a:active—选择a元素中活动的链接(正在击中)<div></div><a>我是没有链接的a</a><a href="">我是有链接的a</a>原创 2021-11-17 22:21:27 · 786 阅读 · 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"> <link rel="st原创 2021-09-15 17:58:01 · 84 阅读 · 0 评论