CSS
syyy9090
这个作者很懒,什么都没留下…
展开
-
Css--ps切图
图层切图:原创 2020-04-16 09:23:26 · 166 阅读 · 0 评论 -
CSS浮动
为什么需要定位:1.浮动可以让多个会稽盒子一行没有缝隙排列显示,经常用于横向排列盒子。2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中某个位置。定位组成:定位:将盒子定在某一个位置,所以定位也是在摆盒子,按照定位的方式移动盒子。定位 = 定位模式+边偏移定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。静态定位static(...原创 2020-04-07 22:29:12 · 181 阅读 · 0 评论 -
综合案例-学成在线
HTML代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>学成在线</title> <link rel="stylesheet" href="style.css"></head><...原创 2020-04-06 21:10:22 · 631 阅读 · 0 评论 -
CSS-浮动及清除浮动
一、传统网页布局的三种方式(简单说就是盒子如何进行排序顺序):普通流(标准流) 浮动 定位注意:实际开发中,一个页面基本都包含了这三种布局方式(移动端会有新的布局方式)1.标准流2.浮动为什么要浮动?什么是浮动?浮动特性加了浮动之后的元素,会具有很多特性,需要我们掌握的。.浮动元素会脱离标准流(脱标) .浮动的元素会一行内显示并且元素顶部对齐 .浮动...原创 2020-03-28 16:16:05 · 100 阅读 · 0 评论 -
CSS盒子阴影,文字阴影
盒子阴影h-shadow和v-shadow是必填的。rgba(0,0,0,0.3) 黑色 透明度为0.3<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>盒子阴影</title> <style> * ...原创 2020-03-27 17:09:23 · 165 阅读 · 0 评论 -
CSS--圆角边框
在CSS3中,新增了圆角边框样式,这样我们的盒子就可以变圆角了。border-radius属性用于设置元素的外边框圆角 语法 border-radius:length; (radius半径)圆形圆角矩形总结:...原创 2020-03-27 11:40:38 · 108 阅读 · 0 评论 -
案例---新闻列表
<!-- <!DOCTYPE html> 自己写的<html lang="en"><head> <meta charset="UTF-8"> <title>新闻列表</title> <style> * { margin: 0; padding: 0; } .box { widt...原创 2020-03-26 22:33:19 · 421 阅读 · 0 评论 -
CSS--ps的常见操作
因为网页美工大部分效果图都是利用PS来做的,所以以后我们大部分切图工作都是在PS 里面完成。原创 2020-03-26 16:11:21 · 185 阅读 · 0 评论 -
CSS外边距、外边距合并问题
外边距(margin)margin属性用于设置外边距,即控制盒子和盒子之间的距离。用法与padding一样。外边距的典型应用(外边距可以让块级盒子水平居中,但是必须满足两个条件:)1.盒子必须指定了宽度(width)2.盒子左右的外边距都设置为auto。.header{ width:960px; margin:0 auto;}常见的写法,一下三种都可以:marg...原创 2020-03-26 16:04:02 · 130 阅读 · 0 评论 -
CSS内边距padding
内边距(padding)padding属性用于设置内边距,即边框与内容之间的距离。内边距属性简写当我们给盒子指定padding值后,发生2件事:1.内容和边框有了距离,添加了内边距; 2.padding影响了盒子实际大小。 也就是说,如果盒子已经有了宽度和高度,此时再指定内边框,会撑大盒子。**注意**padding内边距可以撑开盒子,我们可以巧妙运用。 因为每...原创 2020-03-26 11:07:34 · 235 阅读 · 0 评论 -
CSS盒子简介及边框
页面布局要学习三大核心:盒子模型,浮动 和 定位。网页布局过程:1.先准备好相关的网页元素,网页元素基本都是盒子box 2.利用css设置好盒子样式,然后摆放到相应位置。(核心) 3.往盒子里面装内容CSS盒子模型本质上是一个盒子,封装周围的HTML元素,包括:边框、外边距、内边距、和实际内容。padding是边框和内容之间的距离margin是盒子与其他盒子之间的距离...原创 2020-03-25 21:37:01 · 162 阅读 · 0 评论 -
css三大特性
CSS三大特性:层叠性,继承性,优先级层叠性:样式冲突,遵循原则:就近原则,哪个样式离结构近,就执行哪个样式继承性:优先级:权重会叠加,但永远不会进位当同一个元素指定多个选择器,就会有优先级的产生。选择器相同,则执行层叠性 选择器不同,则根据选择器权重执行复合选择器会有权重叠加的问题如a:hover-------->0,0,1,1(a是元素选择器1...原创 2020-03-25 19:42:06 · 116 阅读 · 0 评论 -
css案例-五彩导航连
五彩导航栏:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>五彩导航栏</title> <style> .nav a { display: inline-block; text-decoratio...原创 2020-03-25 16:27:34 · 1112 阅读 · 0 评论 -
CSS背景
颜色背景 background-color:颜色值;(一般情况下默认值是transparent透明)背景图片**页面元素既可以添加背景颜色也可以添加背景图片,只 不过背景图片会压住背景颜色背景平铺background-repeat背景图片位置背景图像固定(背景附着)background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚...原创 2020-03-25 10:57:44 · 85 阅读 · 0 评论 -
CSS-元素显示模式
元素显示模式就是元素(标签)以什么方式进行显示,比如<div>自己占一行,比如一行可以放多个<span>。HTML元素一般分为块元素和行内元素两种类型。块元素:行内元素:行内块元素:元素显示模式转换:特殊情况下,需要进行元素模式的转换,简单理解一个模式的元素需要另外一种模式的特性,比如想要增加链接<a>的触发范围。转换为块...原创 2020-03-22 15:17:40 · 135 阅读 · 0 评论 -
css复合选择器
在CSS中,可以根据选择器类型把选择器分为基础选取器和复合选择器,复合器是建立在基础选择器的之上,对基本选择器进行组合形式。1.后代选择器(包含选择器)2.子选择器3.并集选择器注意约定的语法规范:并集选择器喜欢竖着写;一定注意最后一个选择器 不需要加逗号4.伪类选择器5.:focus伪类选择器<!DOCTYPE html>...原创 2020-03-22 10:03:51 · 136 阅读 · 0 评论 -
emmet语法
emmet语法如div{$}*5<div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div>如 .demol$*5<div class="demol1"></div>...原创 2020-03-21 17:48:19 · 88 阅读 · 0 评论 -
css综合案例
新闻页面注意:先搭建html框架,在写css(从宏观到微观)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>新闻案例</title> <style> .sub_title { te...原创 2020-03-20 16:40:47 · 214 阅读 · 0 评论 -
css文本属性
文本属性是指文本颜色,文本对齐方式,文本装饰,缩进,行间距等。原创 2020-03-19 15:11:43 · 158 阅读 · 0 评论 -
css字体属性
font-family 字体font-size 字体大小font-weigth 字体粗细 标题标签中的字体默认加粗 不加粗 font-weight:normal;等价于font-weight 加粗 font-weigth:bold;等价于 font-weight:700;(注意700后面不加单位)字体符合属性:font :font-style...原创 2020-03-19 14:26:02 · 126 阅读 · 0 评论 -
css基础选择器
1.标签选择器2.类选择器(class) 多类名使用: 可以把一些标签元素相同的样式(共同的部分),放到一个类里 各个类名中间空格隔开 3.ID选择器样式#定义,结构id调用,别人切勿使用(只能有一个id可以使用)区别:类选择器在修改样式中用的最多,id选择器一般用于页面唯一性的元素上,经常和javasc搭配使用4.通配符选择器通...原创 2020-03-19 10:34:40 · 159 阅读 · 0 评论 -
CSS代码风格
1.尽量用小写原创 2020-03-25 15:07:49 · 99 阅读 · 0 评论