![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
站起一棵树
远方永在,你只需风雨兼程~
加油吧阿树!
笑的灿烂也要站的挺拔
展开
-
CSS圣杯布局与双飞翼布局
一.圣杯布局 有些时候我们需要随着浏览器的窗口缩小,侧边栏不会改变,主体内容自适应,就会用到圣杯布局。 基本的思想;将主体和侧边栏放在一个div下 给这个div设置时用padding留下侧边栏的模块。将主体部分设置宽度自适应。再用margin-left属性和relative属性定位侧边栏。 先来看看效果图: 具体操作如下: 1.先设置整体框架 <div id="container"> <header class="head">head</header> <转载 2020-09-02 15:12:57 · 135 阅读 · 0 评论 -
web前端基础CSS初识学习笔记(12)CSS盒模型,border与padding不会撑开盒模型的情况
border与padding不会撑开盒模型的情况 简单示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div:first-child { width: 200px; height: 200px; background-color: pink;原创 2020-07-14 15:29:49 · 233 阅读 · 0 评论 -
web前端基础CSS初识学习笔记(11)简单实例之插入图片与背景图片区分及用法
简单实例之插入图片与背景图片区分及用法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 300px; height: 100px; border: 1px solid pink; text-align: center; /原创 2020-07-12 22:16:11 · 459 阅读 · 0 评论 -
Web前端基础CSS初识学习笔记(10)简单实例认识 border-radius
圆角边框(sublime环境) <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> div { width: 200px; height: 200px; border: 1px solid red; } div:first-child { /* 结构伪类选择器 选亲兄弟 */ bo原创 2020-07-12 16:49:02 · 231 阅读 · 0 评论 -
Web 前端基础CSS初识学习笔记(9)颜色半透明与文字阴影
更好看的字颜色半透明文字阴影sublime快捷方式 颜色半透明 其中 r, g, b 分别代表颜色的三大主色 red, green, blue 。 它们取值为0~255,三种主色取值大小混合形成不同颜色。 文字阴影 <style> h1 { font-size: 50px; text-shadow: 7px 6px 4px rgba(0,0,0,0.5); /*水平和垂直位置必须写,后两个可以省略,采取默认值*/ } </style> sublim原创 2020-07-10 16:09:35 · 241 阅读 · 0 评论 -
Web前端基础CSS初识学习笔记(8)行高对齐和首行缩进间距
Important! 方便的文本设置line-heighttext-linetext-intentletter-spacingword-spacing line-height text-line text-intent letter-spacing word-spacing原创 2020-07-10 15:43:57 · 700 阅读 · 0 评论 -
Web前端基础CSS初识学习笔记(7) 善用选择器之超详细大合集
选择器:使界面更整洁标签选择器类选择器多类名选择器ID选择器ID选择器和类选择器的区别通配符选择器链接伪类选择器结构伪类选择器(CSS3)目标伪类选择器 标签选择器 类选择器 示例(sublime环境) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .orange{原创 2020-07-10 11:41:18 · 265 阅读 · 0 评论 -
Web前端基础CSS初识学习笔记(6)字体
初识CSS:网页的美容师CSS样式风格font-family:字体Unicode字体字体粗细字体综合设定Chrome调试工具综合示例 CSS样式风格 font-family:字体 Unicode字体 一般使用Unicode格式,保证兼容性 字体粗细 字体综合设定 写成一句时顺序不能变 Chrome调试工具 F12打开或者鼠标右键检查 综合示例 ...原创 2020-07-10 11:14:39 · 136 阅读 · 0 评论