Web—CSS初级
学习总结和笔记
Kong_十六
慢慢来,才是快。
展开
-
CSS——转换小案例
CSS中的转换:transform位移 transform:translate(x,y);水平方向x和垂直方向y,值为数字或者百分比 transform:translateX(num);水平方向 transform:translateY(num);垂直方向转换中位移最大的优点:不影响其他盒子的位置里面的百分...原创 2020-02-26 22:10:40 · 208 阅读 · 0 评论 -
CSS3——meta视口标签
今天看了一点,关于移动端开发的知识,就是简单的了解了一点。关于移动端的开发,我的理解就是手机客户端嘛,手机的话相对于PC端的话会比较简单一点,因为PC端需要兼容不同的浏览器,考虑的比较多一些,但是移动端的话相对简单点,不需要兼容五大浏览器。移动端开发主要是处理webkit内核的视口布局视口:就是在画页面时,设置的页面的宽度 页面在不同的移...原创 2020-02-25 21:12:06 · 2353 阅读 · 0 评论 -
品优购项目学习总结(一)
网站的ico图标这个图标就是主页面上面的小图标,与页面的title一起显示的。图标的引用<!--图标--><linkrel="shortcuticon"href="bitbug_favicon.ico"/>href:值为图标的路径注意:图标最好要放在项目的根目录下,防止出错图标的制作链接——比特虫在线制作这...原创 2020-02-17 14:47:35 · 1174 阅读 · 0 评论 -
网站优化的三大标签!!!
SEO是由英文Search Engine Optimization缩写而来, 中文意译为“搜索引擎优化”!常见的搜索引擎,像百度,谷歌,搜狗等等...........SEO是指通过对网站进行站内优化、网站结构调整、网站内容建设、网站代码优化等)和站外优化,从而提高网站的关键词排名以及公司产品的曝光度。 简单的说就是,把产品做好,搜索引擎就会介绍客户来。 emmmmmmm.........原创 2020-02-14 21:43:05 · 344 阅读 · 0 评论 -
HTML+CSS实战---------一个电商类的小型项目:品优购(一)
模仿做的一个小型网站,仅限于前端页面的构建。资源实在哔哩哔哩上面找的,若是侵权了请联系我,立刻删除。原创 2020-02-14 22:00:04 · 1951 阅读 · 1 评论 -
纯CSS制作二级导航
主要思路:默认显示一级导航,二级导航隐藏。当鼠标滑过一级导航时二级导航显示。主要方法有两种:a. 一开始设置二级导航display为none、鼠标滑过一级导航时,二级导航displayb. 给二级导航设置绝对定位,left:-1000px,鼠标滑过一级标题时再设置为left:0.在这里我只实现了第一种方法。就这样自己还搞了半天,中间出出现了一些有关选择器的问题。...原创 2020-02-08 20:46:24 · 666 阅读 · 0 评论 -
CSS3 flex实现等分布局的小案例
就是模仿了一下移动端的淘宝页面上的一小部分的导航栏哼哼哼 主要是我还得自己切图 然后做,着实有一点点的开心哈哈哈哈哈代码走起:个人还是比较喜欢把样式表单独放。html部分:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>flex做等分布...原创 2020-02-04 17:10:04 · 1032 阅读 · 0 评论 -
新版flex布局新增属性
相对于旧版的flex'布局而言,新版的flex布局新增了很多旧版没有的属性,进而可以实现旧版flex实现不了的布局。其实,严格来说,在旧版flex中,没有侧轴的概念,项目在容器中不会自己换行,即项目不会按照侧轴的方向进行堆砌,但是在新版的flex布局中,可以对侧轴进行更好的控制。容器新增属性flex-wrap:控制容器但是单行/列,多行/列,并且控制侧轴的方向,项目按照侧轴的方向进行堆...原创 2020-02-04 15:24:33 · 330 阅读 · 0 评论 -
flex布局
flex布局也叫弹性布局flex布局有旧版和新版之分,旧版的flex适合移动端开发,新版flex比旧版使用更多学习flex布局得明白三个问题和一个规则1,什么是容器?2,什么是项目?3,什么是主轴和侧轴?4,项目永远在主轴的正方向上排列。旧版flex布局容器布局方向-webkit-box-orient:控制主轴为哪一根(x或y) horizonta...原创 2020-02-03 21:55:16 · 171 阅读 · 1 评论 -
CSS中的过渡与动画
一些简单的动画效果,是可以用纯CSS做出来的。所谓动画,我认为就是交互嘛,让页面不是那么死板。过渡就是让动画的效果不是那么的突兀,显得自然一些。简单写一些过渡和动画的API。过渡transition-duration: 过渡的属性transition-property:过渡的时间transition-timing-function: 过渡的形式 (贝塞尔曲线 搜一...原创 2020-02-03 20:59:50 · 362 阅读 · 0 评论 -
自定义单选按钮
使用表单伪类制作自定义单选按钮lable标签的作用是:点击文字时也会选中按钮。其实也可以包裹着链接与图片,当点击图片时也会点击链接。换句话说就是文字与链接绑在一起、文字与按钮绑在一起。这样用户体验会好一点,不用必须点中按钮才会选中。<!DOCTYPE html><html> <head> <meta charset="utf-8"&...原创 2020-02-02 21:23:47 · 466 阅读 · 0 评论 -
结构性伪类----:not的使用
结构性伪类中的:not(选择器)在使用时牵扯到的问题。典型的问题:在需求中,每个列表项都需要添加一个效果,除了(选择器)的列表项。这个伪类选择器解决的是:在满足要求中的所有元素中剔除一个不需要满足这个要求的元素可能我的表述不是特别的清楚明了,举个相似的例子就明白了(捂脸捂脸)制作项目栏最后一项不要分割线<!DOCTYPE html><html>...原创 2020-02-02 20:26:32 · 386 阅读 · 0 评论 -
纯CSS制作选项卡----:target的重要性
:target是链接伪类的一种:target表示一个特殊的元素 它的id是URL的片段标识符换句话说就是 有id属性的元素,同时id的属性值是URL的标识符举个例子:做一个简单的选项卡 原理是一样的,回头还可以做一个漂亮一点的<!DOCTYPE html><html> <head> <meta charset="utf-8"&...原创 2020-02-01 11:55:16 · 207 阅读 · 0 评论 -
CSS中的BFC和清除浮动的方法
BFC:Box Formatting Context(块级格式上下文)的缩写。通俗来讲,就是管理块级元素的。一个块级元素开启BFC后,可以管理块内的所有元素的排版布局,但是不能管理自己本身BFC的布局规则a.内部的Box会在垂直方向,一个接一个的放置(块级元素独占一行)b.BFC的区域不会与float box重叠------两列布局:左边固定右边自适应(可以开启BFC)c...原创 2020-01-31 21:31:04 · 277 阅读 · 0 评论 -
选择器的小练笔
这个是用代码实现选择器 与选择器总结这一篇文章衔接<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>CSS选择器</title> <style type="text/css"> *{ margin: 0...原创 2020-01-31 20:44:04 · 155 阅读 · 0 评论 -
CSS3—选择器总结
在开始学习的时候,只是简单的了解了一下 id和类选择器,同样这两个选择器个人用的也是最多的。因为前期嘛,主要是学习,不考虑负担和CSS代码冗余的问题,多半会看着元素就像用类选择器和id选择器。再往后学习的时候,会遇到稍微复杂一点的练习就会用到其他一些更好的选择器来实现。所以就想着,把CSS中的所有的选择器都总结总结,也方便后期自己复习看嘛。早起的第二天、打卡!!!!!基本选...原创 2020-01-31 09:57:52 · 182 阅读 · 0 评论 -
CSS3—新增UI样式
放假回家的第一篇博客。坚持更新哦。文本新增样式1.opacityopacity属性是css新增的属性,主要是用来设置元素的不透明度的。属性值为0-1之间,0是不透明度为0、1是不透明度为1,数值越大越不透明。举个例子:设置一个黑色背景颜色,设置opacity为0.5,即为半透明的黑色。div{ width: 400px; height: 400px; backg...原创 2020-01-14 21:58:14 · 818 阅读 · 0 评论 -
双飞翼布局
双飞翼布局与圣杯布局的区别就在于中间栏自适应的处理不同。圣杯布局对中间栏的处理是直接使用中间部分的padding或者是margin值来显示中间的内容,而双飞翼则是在中间栏中再添加一个容器main的div,让内容在main中显示。<!DOCTYPE html><html><head> <meta charset="utf-8">...原创 2019-12-23 15:05:48 · 104 阅读 · 0 评论 -
CSS—圣杯布局
这几天看了一些简单的布局,刚开始看的时候,里面一些代码不要明白是什么意思,找找资料看看书问题一般就能解决了。也可能自己理解不是很深入吧,所以又深入看一看书多理解理解那些常用属性。圣杯布局就是我遇到问题的一个方面,所以我要把我遇到的问题写下来,供大家参考了啊。重点内容:margin的负值应用圣杯布局圣杯其实吧,就是网页中间内容部分的三列布局。一般有以下几点1. 头...原创 2019-12-04 15:50:18 · 209 阅读 · 0 评论 -
CSS中的定位和浮动
CSS中的定位position:relative、absolute、flxed定位有三种分类:相对定位、绝对定位、固定定位相对定位:就是目标定位元素相对自己原来位置的变化,设置相对定位后,元素所占据的空间并没有发生任何改变,只是相对于原来位置发生的位移的变化,其次它仍然还在标准流当中。绝对定位:设置绝对定位的元素,它的定位基准点永远是元素自己的父亲,如果没有父级元素,那就是以bod...原创 2019-11-22 17:11:41 · 242 阅读 · 0 评论 -
CSS基础
接上一篇文章:https://blog.csdn.net/qq_42383764/article/details/103055162对于刚学前端的小白来说,通常的基础学习路线应该就是HTML、CSS、JS。解释的通俗一点,HTML就是人的骨架,而CSS就是这个人拥有了血肉,JS就是让这个人可以活动了,能吃能睡的这种。基于这种理解,现在来分享下我自己学习的CSS,只是看了CSS,对于CSS3和H...原创 2019-11-22 09:08:30 · 181 阅读 · 1 评论