CSS
不动声色的小蜗牛
The eager young minds of tomorrow.
展开
-
模仿京东登录页面(HTML、CSS、JavaScript / jQuery)
效果:Index.html:<!DOCTYPE html><html> <!-- 作者:zzy 时间:2020-07-28 描述:模仿京东登陆页面(自己练习,非商用) --> <head> <meta charset="utf-8" /> <title>京东-欢迎登录</title> <!--<link rel="icon" href="/原创 2020-07-28 18:36:15 · 6342 阅读 · 3 评论 -
CSS之定位(元素的层级z-index)
元素的层级z-index:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>绝对定位元素的布局</title> <style> .box1{ width: 500px; height: 500px; background-color: #7FFFD4; position: relative;原创 2020-07-16 11:33:42 · 635 阅读 · 0 评论 -
CSS之定位(绝对定位元素的布局)
绝对定位元素的布局:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>绝对定位元素的布局</title> <style> .box1{ width: 500px; height: 500px; background-color: #7FFFD4; position: relative; }原创 2020-07-16 11:32:49 · 336 阅读 · 0 评论 -
CSS之定位(粘滞定位)
粘滞定位:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>粘滞定位</title> <style> body{ height: 3000px; } /* 粘滞定位 -当元素的position属性值设置为sticky时开启元素的粘滞定位 -粘滞定位和相对定位的特点基本一致,不同的是粘原创 2020-07-16 11:31:58 · 1676 阅读 · 0 评论 -
CSS之定位(固定定位)
固定定位:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>固定定位</title> <style> body{ font-size: 60px; height: 2000px; } .box1{ width: 200px; height: 200px; background原创 2020-07-16 11:30:58 · 355 阅读 · 0 评论 -
CSS之定位(绝对定位)
绝对定位:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>绝对定位</title> <style> body{ font-size: 60px; position: relative; } .box1{ width: 200px; height: 200px; b原创 2020-07-16 11:30:13 · 345 阅读 · 0 评论 -
CSS之定位(定位/相对定位)
定位/相对定位:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>定位/相对定位</title> <style> body{ font-size: 60px; } .box1{ width: 200px; height: 200px; background-color: #bfa;原创 2020-07-16 11:29:06 · 274 阅读 · 0 评论 -
CSS之布局(轮廓和圆角)
轮廓和圆角:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>轮廓和圆角</title> <style> .box1{ width: 200px; height: 200px; background-color: #BBFFAA; /*box-shadow用来设置元素的的阴影效果,阴影不会原创 2020-07-16 11:26:06 · 331 阅读 · 0 评论 -
CSS之布局(盒子的尺寸)
盒子的尺寸:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>盒子的尺寸</title> <style> .box1{ width: 100px; height: 100px; background-color: #BBFFAA; padding: 10px; border: 10px so原创 2020-07-16 11:25:11 · 305 阅读 · 0 评论 -
CSS之布局(默认样式)
默认样式:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>默认样式</title> <!-- 重置样式表:专门用来对浏览器的样式进行重置的 reset.css 直接去除浏览器的默认样式 normalize.css 对默认样式进行了统一 --> <style> /*原创 2020-07-15 11:25:43 · 412 阅读 · 0 评论 -
CSS之布局(行内元素的盒模型)
行内元素的盒模型:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>行内元素的盒模型</title> <style> .s1{ background-color: yellow; /* 行内元素的盒模型: -行内元素不支持设置宽度和高度 -行内元素可以设置padding,但是原创 2020-07-15 11:24:01 · 267 阅读 · 0 评论 -
CSS之布局(外边距的折叠)
外边距的折叠【重叠】:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>外边距的折叠</title> <style> .box1,.box2{ width: 200px; height: 200px; } /* 垂直外边距的重叠(折叠) -相邻的垂直方向外边距会发生重叠现象原创 2020-07-15 11:23:00 · 162 阅读 · 0 评论 -
CSS之布局(盒子的垂直布局)
盒子的垂直布局:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>盒子的垂直布局</title> <style> .outer{ background-color: #BBFFAA; /* 默认情况下父元素的高度会被内容撑开 */ } .inner{原创 2020-07-15 11:21:24 · 861 阅读 · 0 评论 -
CSS之布局(盒子的水平布局)
盒子的水平布局:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>盒子的水平布局</title> <style> .outer{ width: 800px; height: 200px; border: 10px red solid; } .inner{ width: 2原创 2020-07-15 11:20:21 · 586 阅读 · 0 评论 -
CSS之布局(盒子模型--外边距)
盒子模型--外边距:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>盒子模型--外边距</title> <style> .box1{ width: 200px; height: 200px; background-color: #bfa; border: solid 10px orange原创 2020-07-15 11:18:45 · 161 阅读 · 0 评论 -
CSS之布局(盒子模型--内边距)
盒子模型--内边距:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>盒子模型--内边距</title> <style> .box1{ width: 200px; height: 200px; background-color: #bfa; border: solid 10px orange;原创 2020-07-15 11:17:27 · 222 阅读 · 0 评论 -
CSS之布局(盒子模型—边框)
盒子模型—边框:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>盒子模型-边框</title> <style> .box1{ width: 200px; height: 200px; background-color: #bfa; /* border-width可以用来指定四个原创 2020-07-15 11:15:39 · 179 阅读 · 0 评论 -
CSS之布局(盒模型)
盒模型:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>盒模型</title> <style> .box1{ /* 内容区(content),元素中的所有的子元素和文本内容都在内容区中排列 内容区的大小由width和height两个属性来设置 */ width: 200px;原创 2020-07-15 11:13:51 · 150 阅读 · 0 评论 -
CSS之布局(文档流)
文档流:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>文档流</title> <style> .box1{ background-color: yellow; } </style> </head> <body> <!-- 文档流(原创 2020-07-15 11:12:31 · 207 阅读 · 0 评论 -
CSS之关系选择器(子元素、后代、兄弟选择器)
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> /*为div的子元素span设置一个字体颜色*/ /* 子元素选择器: 作用:选中指定父元素的指定子元素 语法:父元素>子元素{} */ /*div>span{ color:.原创 2020-07-14 10:56:26 · 1317 阅读 · 0 评论 -
CSS之复合选择器(交集、并集选择器)
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> /*将class为red的元素设置为红色*/ .red{ color: red; } /*将class为red的div字体大小设置为30px*/ /* 1、交集选择器 作用:选中同时复合多个条件.原创 2020-07-14 10:53:25 · 785 阅读 · 0 评论 -
CSS之常用选择器(元素、id、类、通配选择器)
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> /* 1、元素选择器 作用:根据标签名来选中指定的元素 语法:标签名{} 例子:p{} h1{} div{} */ /*p{ color: red; }*/ .原创 2020-07-14 10:49:46 · 532 阅读 · 0 评论