![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端基础学习笔记-CSS
文章平均质量分 57
BBBMouse
入门大白
展开
-
前端基础学习笔记 hover border-radius
hover鼠标移入元素时 伪类style:div{ width:200px; height:200px; background-color:pink;}鼠标移入效果:div:hover{ background-color:red; border:1px solid blue}p{ display:none;//一开始消失 wi...原创 2018-11-15 22:00:43 · 412 阅读 · 0 评论 -
前端基础学习笔记 弹性盒子模型
基本弹性盒模型演示div{ display:flex; width:600px; border:1px solid red;}p{ height:200px; border:1px solid blue;}任何元素都可以设置display:flex;因为所有元素意义上都是盒子display:inline-flex和flex的区别 是f...原创 2018-12-13 21:08:26 · 319 阅读 · 0 评论 -
前端基础学习笔记 背景 渐变 倒影 遮罩
背景首先分享一个css利用渐变实现的图案源代码网站:https://leaverou.github.io/css3patterns/background-size: X Y;改变背景图片的大小具体的值px 百分比 相对于元素框 cover 保持宽高比不变,等比例放大缩小,图片四条边轴都铺满盒子 contain 同上,上面的区别是水平或者垂直方向其中一个占满盒子就停下来多背...原创 2018-12-13 01:05:40 · 326 阅读 · 0 评论 -
CSS3实现3d、过渡、变化案例
一开始盒子状态: 过渡过程:最终形式: 大盒子旋转180deg,小盒子跟着大盒子旋转然后展开。代码实现 body模块:<body> <div class="stage"> <div class="face1 face">前</div> <div class="face2 face&qu原创 2018-12-12 21:08:16 · 569 阅读 · 0 评论 -
前端基础学习笔记 过渡、动画和变换
过渡 transition让属性变化成为一个持续一段时间的过程,而不是立即生效的可能的属性:执行变换的属性: transition-property, 变换延续的时间: transition-duration, 过渡延迟的时间:transition-delay在延续时间段,变换的速率变化 transition-timing-function, linear:...原创 2018-12-05 21:14:27 · 239 阅读 · 0 评论 -
前端基础学习笔记 表单
定义定义了一个区域,可以和用户交互的区域,也可以用来向web服务器提交信息,一般用来做登陆注册搜索的功能。form表单的属性:action :一个处理这个form信息的程序所在的URL 规定向何处发送表单 (接受数据的地址) method :提交表单的方式post: 表单数据会包含在表单体内然后发送给服务器. 这种只是相对get方式安全一些,但是其实一点也不安全!更安全的别想着靠个...原创 2018-12-02 23:23:56 · 181 阅读 · 0 评论 -
前端基础学习笔记 定位
相对定位CSS position属性用于指定一个元素在文档中的定位方式。top , right , bottom 和 left 属性则决定了该元素的最终位置。如下:未定位前的位置在定位后的位置左面50px。.box1{ position:relative;/*relative = 相对的意思*/ left:50px;}特性不使元素脱离文档流 文档流...原创 2018-11-27 11:23:18 · 1931 阅读 · 4 评论 -
前端基础学习笔记 表格
表格在 CSS 创建之前, HTML <table> 元素常常被用于布局页面。 这种用法在 HTML 4之后不被推荐使用,并且 <table>元素 不应该 被用于此目的。<table> <tr> <td>姓名</td> <td>性别</td&g原创 2018-12-04 14:51:16 · 3653 阅读 · 1 评论 -
前端基础学习笔记 选择器(高级)
组合选择器的优先级比较优先级时,保证精准控制到了元素 比较id选择器,如果id多,那优先级高 id选择器一样多时,比较class选择器,class多的则优先级高 class如果相等,比较标签选择器,标签选择器多则优先级高 伪类选择器,如hover,优先级相当于类名class伪类选择器 用于向某些选择器添加特殊的效果。锚伪类 : 在支持 CSS 的浏览器中,链接的不同状态都可...原创 2018-11-29 20:52:39 · 175 阅读 · 0 评论 -
前端基础学习笔记 鼠标样式cursor与盒阴影box-shadow
鼠标样式属性div{ cursor:default;}如上代码可设置鼠标划入div盒子时的鼠标样式,鼠标样式有以下属性值:default 箭头 pointer 小手 wait 等待 text 文本 move 可移动 auto 浏览器根据情况来给引入外部鼠标样式,为了防止用户找不到指定路径文件,所以需要在路径之后设置一个备胎。div{...原创 2018-11-26 00:50:06 · 592 阅读 · 0 评论 -
前端基础学习笔记 浮动 清除浮动 怪异盒模型
文档流文档流为元素没有改变特性时原本所要排列的位置和规则:文档流为最底层块级 独占一行等在最底层排列,依次往下排列。给上浮动之后,会把元素堆积起来,不占文档流的位置。浮动 可以让元素脱离文档流。浮动元素浮动元素在文档流内不占位置,后面的文档流元素,就会占住浮动元素原来的位置。但是文字不会藏在浮动元素下面,因为一开始浮动元素出来的目的是为了做出图文环绕的效果。浮动对文字的影响:文字会环...原创 2018-11-17 22:21:30 · 194 阅读 · 0 评论 -
前端基础学习笔记 图片、元素、行内块的居中对齐
图片对齐首先看文本居中方式:上下居中:给文字一个line-height,最好和文字盒子大小相同。左右居中:给文字一个text-align:center;考虑到文字与图片对齐用到基线对齐,所以图片在盒子里居中的方式为:text-align和line-height放在父级元素里,在img标签里放与行内元素基线对齐。div{ width:200px; h...原创 2018-11-24 11:54:41 · 500 阅读 · 0 评论 -
前端基础学习笔记 字体文本样式和特殊符号
字体样式字体颜色 color字体风格 font-familyspan{font-family:'微软雅黑','宋体';}引入外部字体@font-face{font-family:"名称";src:url(' ');}字体大小 font-sizediv{/*具体的值*/font-size:50px;/*百分比 相当于父容器的字体百分比调整 浏览器默...原创 2018-11-24 10:55:53 · 678 阅读 · 0 评论 -
前端基础学习笔记 样式初始化 元素类型
样式初始化就是把默认样式中的margin和padding取消、改变列表list-style、text-decoration文本装饰、图片边框<body> <style> *{margin:0;padding:0} ul,ol{list-style:none;} a{text-decoration:none;}...原创 2018-11-19 20:33:24 · 232 阅读 · 0 评论 -
前端基础学习笔记 盒模型
边框线borderborder 边框:元素边框的样式单样式:border-width 大小 border-style 样式 border-color 颜色复合样式:大小 类型 颜色border :width style color边框类型 : border-stylesolid 实线 dashed 虚线 (有兼容问题) dotted 点线 (有兼容问题) doub...原创 2018-11-23 18:33:35 · 174 阅读 · 0 评论 -
前端基础学习笔记 企业命名规范及CSS书写顺序
网页内容类标题: title摘要: summary箭头: arrow商标: label网站标志: logo转角/圆角: corner横幅广告: banner子菜单: subMenu搜索: search搜索框: searchBox登录: login登录条:loginbar工具条: toolbar下拉: drop标签页: tab当前的: current列表: lis...转载 2018-11-23 16:35:23 · 210 阅读 · 0 评论 -
前端基础学习笔记 CSS选择器
选择器标签选择器通过标签名字选择id选择器通过id名字选择标签,id名唯一。命名规则:1、见名知意,看到名字就知道这个标签的一个作用。2、不能用拼音,不要用中文,也不能数字开头,也不要用特殊符号。3、建议英文小写开头。4、-符号连词 _(不建议使用_)searchBar驼峰命名,也不建议使用。5、不允许命名带有广告等英文的单词,例如ad,adv,adver,...原创 2018-11-23 16:32:52 · 161 阅读 · 0 评论 -
前端实战:只用CSS写出爱奇艺官网
写在前面经过两个月对HTML和CSS的学习,终于迎来了最后一个项目实战,拿爱奇艺官网练手。先说一下个人心得,一开始自己对于前端学习一片茫然,但是借鉴了各位大神的文章和速成之路,我觉得编程这条路是一口气吃不成胖子的。凭借着每周两篇的csdn博客,自己也在逐渐积累,发现现在写代码的能力提高很快,不仅是前端,还有其他语言,必须有强大的基础功底和内力,才能修炼更花哨的招式。对于学习语言的过程不要恐惧,...原创 2018-12-26 21:08:50 · 5454 阅读 · 5 评论