![](https://img-blog.csdnimg.cn/7315db6cd51643cbbcaf4f0ba05f57d1.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS 系列笔记+源码展示
实战为主,理论为辅,一点一滴的打造CSS的技术笔记和感悟
思诚代码块
这个作者很懒,什么都没留下…
展开
-
CSS总结,随便提一下
大家好,今天来讲一下css总结前面讲过,css是层叠样式表的意思,在网站开发当中负责网页的表现就是在HTML源码的基础上做各种各样的修饰,使我们的网页变得更加的丰富多彩在这里,我们讲css3以下就是css3的学习要点和注意点当然,还有很多细节上面没有,css就是三大块比较重要,就是 盒子模型 、 浮动 、 定位,其它的都是小细节好了,有关于CSS总结就到这里了,谢谢大家。...原创 2022-02-07 15:54:27 · 100 阅读 · 0 评论 -
CSS绝对定位和固定定位,一讲就会
大家好,今天给大家分享一下CSS绝对定位和固定定位定位:基于xxxx定位,上下左右的位置变化1.没有父级元素定位的情况下,相对于浏览器定位2.假设父级元素存在定位,我们通常会相对于父级元素进行偏移3.在父级元素范围内移动相对于父级或浏览器的位置,进行指定的偏移,绝对定位的话,它不存在标准文档流中,原来的位置不会被保留先讲绝对定位:写源码:<!DOCTYPE html><html lang="en"><head> <meta charset原创 2022-02-07 17:47:29 · 506 阅读 · 0 评论 -
CSS方块定位的练习
大家好,今天我们来分享一下CSS方块定位的练习我们这一次我们使用方块练习css相对定位看图:这是我们的成品,就是几个超链接方块,你鼠标点上去,它的颜色会由粉色变成蓝色第一部分的源码;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #box{原创 2022-02-07 13:33:35 · 1413 阅读 · 0 评论 -
CSS的相对定位详解
大家好,今天给大家分享一下CSS的相对定位看代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ margin: 10px; padding: 5px; font-s原创 2022-02-07 12:22:42 · 1406 阅读 · 0 评论 -
CSS display与浮动,一看就明白
大家好,今天给大家分享一下CSS display与浮动写源码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 100px; height: 100px;原创 2022-02-06 14:32:09 · 630 阅读 · 2 评论 -
CSS的圆角边框以及阴影
大家好,我们今天分享一下CSS的圆角边框以及阴影源码实例: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 100px; height: 100px;原创 2022-02-05 22:14:51 · 4409 阅读 · 0 评论 -
CSS内外边距和div居中
大家好,我们来分享CSS内外边距和div居中看源码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style>/* 外边距 :使元素居中*/ #box{ width: 300px; border: 1原创 2022-02-05 18:58:53 · 1196 阅读 · 0 评论 -
CSS盒子模型和边框的使用
大家好,今天给大家分享一下CSS背景图像总的来讲,CSS就三个块: 盒子模型 、 浮动 、 定位,其它的基本上都是小细节而已,但是这三部分,无论如何也要学的非常精通。盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。网页布局的实质,就是将很多的网页元素放到一个盒子里面,然后利用CSS摆放盒子的过程,就是网页布局。例如:以下这样:写一个原始登录页面:<!DOC原创 2022-02-05 17:01:46 · 616 阅读 · 0 评论 -
CSS背景图像
大家好,今天我们来分享一下CSS背景图像我们先写一下HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body></body></html>新建一个用于存放图像的文件夹images这是我们的一张图片:写css代原创 2022-02-04 22:25:17 · 840 阅读 · 0 评论 -
CSS列表样式(源码示例)
大家好,今天给大家分享一下CSS列表样式看源码:写HTML源码;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>列表样式</title></head><body> <h2 class="title">全部商品分类</h2> <ul>原创 2022-02-04 14:40:49 · 3468 阅读 · 0 评论 -
css超链接伪类详解
大家好,今天分享一下css超链接伪类详解写源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><a href="#"></a><img src="images/dq.png" alt=""></bo原创 2022-02-03 18:19:51 · 1173 阅读 · 0 评论 -
CSS字体样式调整详解
大家好,今天分享一下CSS字体样式调整我们对文本样式做以下的调整1.颜色2.文本对齐的方式3.首行缩进4.行高5.装饰写HTMl代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><h1>字体样式</h1>原创 2022-01-30 13:10:35 · 3721 阅读 · 0 评论 -
CSS属性选择器详解
大家好,给大家分享一下CSS的属性选择器写十个标签:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><p class="demo"> <a href="">1</a> <a href=""原创 2022-01-29 19:03:32 · 1887 阅读 · 0 评论 -
CSS结构伪类选择器
大家好,今天分享一下css的结构伪类选择器写个实例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> </style></head><body><p>p1</p><p>p2&原创 2022-01-28 18:32:17 · 138 阅读 · 0 评论 -
CSS层次选择器,一看就会了
大家好,今天给大家分享一下CSS层次选择器顾名思义,层次选择器就是有一定层级关系的选择器看这个图就可以了使用代码实现一下上面的层次关系:上源码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> p{ backgroun原创 2022-01-26 18:20:51 · 1220 阅读 · 0 评论 -
css三种基本选择器(重要)
大家好,今天我们来分享一下css三种基本选择器这是我们css当中的一大重点写一段HTML的初始源代码:1.标签选择器:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><h1> 相信我</h1><p>你很原创 2022-01-26 15:38:04 · 2853 阅读 · 0 评论 -
CSS的三种导入方式(源码实例)
大家好,今天我们来分享一下css的四种导入方式行内样式:上源码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><!--行内样式;在标签元素当中,编写一个style属性,编写样式即可--><h1 style="color:原创 2022-01-26 14:02:43 · 2706 阅读 · 0 评论 -
CSS的基本语法和第一个css程序
大家好,我们来分享一下CSS的基本语法和第一个css程序使用的开发工具:IDEA写一个单独的style.css 文件截图看源码:看它的效果:这就是css效果分开讲解index,html 源文件这是一个单纯的HTML源代码它的效果看他的结果,非黑即白加上css代码看结果这就是css代码的作用打开这个网页的源码,就可以看见我们自己写的red : 红色除了这样集中的写,我们还可以将HTML和css的代码分离 (分开写)新建文件在style.css 文件当中写在HTML原创 2022-01-26 00:05:59 · 280 阅读 · 0 评论 -
Css是什么,大白话告诉你
大家好,今天我们来分享一下CSS是什么。首先,我们要知道前端的基础三要素即: HTML+css+JavaScript结构+ 表现+ 交互CSS 用于控制网页的样式和布局。在这里我们分享css3如果你看过我关于HTML5的相关博客,你就会发现,光光使用负责位置基础结构的HTML写出的页面是非常不美观的,也没有颜色看这个百度边框它是有颜色的这就是css的功劳,正是因为有了css,原先比较单调的页面才会变得好看打开百度的首页敲击计算机的F12 这个键这里红色箭头所指的地方原创 2022-01-25 22:52:47 · 993 阅读 · 0 评论