- 博客(10)
- 收藏
- 关注
RSS订阅原创 居中的多种实现
方法1<div class="box"> <p>hello</p></div>.box { width: 200px; height: 200px; border: 1px solid; display: grid; align-items: center; justify-items: center;}p { background: red;}方法2（掌握）<div class="box">
2020-10-12 16:57:11
261
原创 HTML-基础
<!DOCTYPE html> 告诉浏览器使用“标准模式”去渲染页面<meta http-equiv="X-UA-Compatible" content="IE=Edge" >告诉浏览器使用IE 最新版本的 Standards<html lang=“en”>告诉浏览器当前页面的语言 比如告诉浏览器翻译工具把英文翻译成本地语言<meta charset=“utf-8”>告诉浏览器当前页面的编码方式<meta name="viewpo
2020-10-06 15:12:39
303
1
原创 CSS-定位
学习目标掌握定位的几种方式为什么需要定位？改变元素的位置让元素重叠放置任意位置让元素固定在窗口固定位置一个简单的范例.box { position: absolute; top: 10px; left: 10px; z-index: 1;}涉及的属性position：static、relative、absolute、fixed、stickytop、left、right、bottomz-indexposition: static该关键字指定元素使用正常的
2020-10-06 14:35:18
216
原创 CSS-浮动与布局
学习目标掌握浮动的特性掌握清除浮动的技巧掌握两栏和三栏布局的实现方式为什么需要浮动？文字围绕图片水平排列布局浮动的例子• 文字围绕浮动元素<div class='wrapper'><img src='http://placehold.it/100/ff0'><p>float 属性最初只用于在成块的文本内浮动图像，但是现在它已成为在网页上创建多列布局的最常用工具之一。本文将阐述它的有关知识。</p></div>&
2020-10-05 15:52:45
212
原创 CSS-常见样式
一、列表样式• 修改列表样式/*去掉默认的符号。这个常用*/ul, ol { list-style: none;}/*列表方形符号*/ul { list-style: square;}/*符号在盒模型内*/ul { list-style: inside; /*outside*/ 以前面那个点开始计算，也就是序号}/*可以用图形符号*/ul { list-style: url(https://i.loli.net/2019/11/08/4vriKT
2020-10-05 14:43:25
171
原创 CSS-优先级与继承
CSS(cascade style sheet)层叠样式表一个元素的最终样式是由多个来源叠加后的结果一、样式来源使用不同的选择器设置的样式浏览器默认样式 (user agent stylesheet)继承的样式 (Inherited from xxx)二、优先级顺序!important > 内联样式(标签上得style上的属性) > 选择器设置样式 （css文件，style标签）> 浏览器默认样式 > 继承样式2.1、!important<div clas
2020-10-05 03:04:45
367
原创 CSS-文本样式
一、color1.1、设置字体颜色单词表示法：red、blue、green、grey…十六进制表示法：#ff00ff、#f0frgb、rgba、hsl、hsla关键字：currentColor 当前的颜色 一般用在边框上、transparent 透明度为0颜色是由red green blue 混合构成的rgba 是增强了透明度，第四个值是透明度 color:rgba(0,0,0,0.3)一般用1-0之间的值 ，0的话透明看不见，1是黑rgb 三个参数也是 red green blue构成，三
2020-10-05 01:01:21
645
原创 CSS-伪类和伪元素
CSS选择器CSS 选择器用于定位我们想要给予样 式的 HTML 元素。一、选择器分类1.1、元素选择器(标签选择器)p { color: red; }div { color:}1.2、 ID选择器<p id=”box”>饥人谷</p><style> #box { border: 1px solid red;} </style>1.3、 类选择器<p class=“box active”>饥人谷&l
2020-09-29 15:46:50
189
原创 CSS-语法
CSS-基础一、两种语法选择器 { 属性: 值; 属性: 值; }@关键字 { 其他 }注意：空格和缩进建议保留半角符号，不要写成全角二、四种引入方式2.1、引入方式一通过<link>标签引用<link rel="stylesheet" href="index.css">2.1、引入方式二通过CSS语法@import引入放在style标签或者CSS文件中@import 必须放在CSS文件开头语法后面的分号必不可
2020-09-29 15:13:28
862
原创 CSS-盒模型、默认样式、边距合并、inline-block、外边距合并
块级盒子 vs. 内联盒子Block box vs. Inline box代码案例块级盒子和行级盒子的差异<p>欢迎<p> <p>来饥人谷学习</p> <span>前端</span> <span>Java</span> <style> p { border: 1px solid black; }span { border: 1px
2020-09-27 13:58:51
520
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人