2020/03/14 05-CSS

最新推荐文章于 2023-09-09 00:26:45 发布

48N6E

最新推荐文章于 2023-09-09 00:26:45 发布

阅读量346

点赞数

分类专栏： 59前后端分离博客项目(五)Django中间件

本文链接：https://blog.csdn.net/qq_42227818/article/details/104860995

版权

59前后端分离博客项目(五)Django中间件专栏收录该内容

5 篇文章 0 订阅

订阅专栏

布局的事情交给美工，那你只需要辅助即可，告诉你这块布局准备做什么，业务上有什么功能，多少行，做下交流，高度宽度，交流之后模你开发你的功能，美工自己做自己的，各自开发各自的，美工做好前端页面，你用django套用这个模版，或者做好所谓的模版，用js，后端纯数据，前后端完全分离，就靠ajax返回json互相通信。
模版可以卸载django中，所以需要懂一些CSS，如果做爬虫就也需要懂

css叫层叠样式表，是非常古老的技术，一般用css2和3,3 才用了模块化更新方式，如果用的浏览器不同，对css3的差异也比较大，基本上都支持css2，但是3可能就不好说了。
前端的兼容性都是和头疼的，html，css，所以要框架来磨平差异

层叠样式表实际上是控制html布局，html本身也是个层次结构，层叠样式表在控制的时候也用了层叠结构的思想

在这里插入图片描述
几乎所有标签都支持style属性，style就可以写样式了，color之类的

三种方式使用 css

在这里插入图片描述

要引入外部的css文件，写link 里面写rel href外部引用链接，可以是绝对，相对，可以是http，大多数是相对路径

基本语法，selector选择器，选择器的能力不亚于document.getelementid，能力狠强大

a就代表元素选择器，这么久代表所有的a标签都变成红色，有一条线传过去
在这里插入图片描述
color的写法

可以压缩，一般使用数值表述方式

rgb三原色来表示

第一个选择器，标签选择器

在这里插入图片描述

vscode打开文件夹

在这里插入图片描述
test现在有这么多东西

在这里插入图片描述
这就是要做ajax请求的

在这里插入图片描述
test就是毫无样式可言的

link链接外部的样式表，我们用页内样式表，给body标签一个样式

color是改前景色，就是字体颜色，这就是把所有文字颜色都改了，除了链接，控制后久由上往下传递，body标签往下子孙标签传递颜色，通过这种方式就可以知道这种样式可以向下
在这里插入图片描述
已经说明颜色是从不哪里来的，是从body继承下来的

在这里插入图片描述
要保存，这就是标签选择器，选择器在做jquery的时候要用，爬虫的时候也要用，样式是美工做的，最重要的还是选择器

** 代表所有html标签都管，影响跟body一样大所以基本不用*

在这里插入图片描述
id选择器用的时候特殊点

现在是div的颜色不用你管了，body是个全局设定，div就是在针对下面所有div标签的

如果只想管menu

现在只有这一块变了

第一个div就是menu，其他颜色都没变

这就叫id选择器
在这里插入图片描述

这就是div标签同时id叫menu，js中要求id是一个，写两个代表设计有问题，虽然网页不会报错，但是不建议这么做
在这里插入图片描述
p标签找这个menu就没有
就没有效果

在这里插入图片描述
css就是通过一些特殊的写法帮你找到你想要变样式的标签
这就是找到menu将颜色，宽度。里面关掉，margin外边距修改

在这里插入图片描述
现在进行一些修改，border-bottom边框底部，现在只控制下面的

这条线就出来了

外边框margin，顺序是顺时针，上右下左

现在就分开一段距离了，因为有边距，一般边距都是5-10PX像素，适当的留白
在这里插入图片描述
现在都是写死的，可以改成less，就可以用变了，之前把less转换成css

类选择器起作用就是class，这个标签有class，就是类选择器，类用.点号

在这里插入图片描述
修改下文本居中

在这里插入图片描述

在这里插入图片描述
id是尽量要唯一，class可以复用，center可以在很多上面用

在这里插入图片描述
这个div是inline，这个div叫块，要占够所有宽度，但是现在要求80%

这个menu是对外面一层的100%，但是对于body来说，实际跟center一样只有80%
div居中，margin:auto

外面的80%指的是div center

里面的是100%，现在网页布局，两边空出来，中间居中就是这么来的 在这里插入图片描述
类可以写多个

类多个之间用空格隔开，相当于有两个类，一个类叫main，一个类叫center

**这个意思相当于h1或者h2，颜色都是绿色
**

层次选择器，这个代表从div下找li，不管多少层都会找到，也就是div下所有子孙的后代中li全部受控制

在这里插入图片描述
只要li在div下面，不管多少层，li就要受影响

在这里插入图片描述

变颜色了

在这里插入图片描述
表单控制有两种方式，常用的是现在这种方式table，还有一种是div布局，ul li也可以

inline指的是一行，找到div下li的显示方式变成inline方式

变成一行了，菜单就是这么做的

加个链接

链接不受颜色影响

在这里插入图片描述 i
inline横着过去，每个li选个样式就可以做菜单

在这里插入图片描述
找div，切div class有center，然后去他下面找li

在下面的div加id

id是#号，div找一个id为form的，找它下面的li标签

上面就不受影响了

这样就又回来了

用这种方式就可以进行选择器的选择

在这里插入图片描述
这是后代子孙

这是任意层次

子选择器，前面元素和后面元素找到之后应该具有父子关系，最后控制的层级样式表是最后的标签上

大于号表示，id=menu的div下的子里面有没有li，子是ul，孙才是li
在这里插入图片描述
现在就没关系了

这个意思是，div，id=menu下的子ul 下有没有li

这样就可以

除非是你就想控制子一级的，要用>号，否则大多数情况是都会控制所有子孙

在这里插入图片描述
id为menu的div下子孙有ul，ul下子有li

先找到div下的p标签

这个叫相邻兄弟

符合条件的只有这个，两个p标签必须相邻，第一个p不能被控制，所以只有第二个才能被控制

p标签就变了
试试加一个p标签，会不会改变
在这里插入图片描述
变了，因为是以第一个为基础找后面的

这是最重要的使用方式，也就是子孙都受控制，如果影响太大，就在找父的时候把范围缩小

在这里插入图片描述 这些都是常见的，还有伪类，最常用的是锚点的伪类

锚点的伪类，就是a的伪类，有4种。
link是未访问的时候的样子
visited ，一个链接点击过了就变色了
hover 鼠标挪上去的时候
active 点一下的时候，松手就是visited访问过了。
一般现在都是链接的颜色和访问的颜色都死统一的，鼠标上去的时候提醒别人现在放在哪里
在这里插入图片描述

在这里插入图片描述
点过之后是绿，放上去蓝

在这里插入图片描述
鼠标放上去变蓝

把这两个去掉

现在已经变成激活的了

visited一般和link一样，大多数网站都这么做

在这里插入图片描述

在这里插入图片描述
鼠标挪上去才是蓝色的

在这里插入图片描述

现在控制a标签，不管你点不点都一样，大多数都这么用，只控制一个移动鼠标的颜色

可以配合着用， a标签，class=red，如果是visited的话颜色就变化

伪元素，是假元素，本身并不存在

找到homepage，在之前加一个内容，也就是在a标签前塞一个东西进去
在这里插入图片描述
导航栏的小图片就可以通过样式加进去，可以用less来定义变量，一下子改全部改了

在这里插入图片描述
这里就写了一个before，元素是样式表动态加的

还有属性选择器，E代表element元素有没有attr属性，有这个属性就把样式的内容填进来，具有某属性的全部可以这么做

在这里插入图片描述
所有有id属性的元素

在这里插入图片描述
有些颜色变调了

全是有id的受控制了

在这里插入图片描述
这个用的很少

所有带class属性的

现在就做了变化了

在这里插入图片描述
img里面有alt属性=magedu-logo，对它进行处理，修改高度，宽度不管，会等比例缩小

会控制图表大小

在这里插入图片描述
上面是拥有就行，下面是等值的

在这里插入图片描述
波浪线代表，这要其中有一个属性是value

也就是现在alt属性有这个值的

看一下这个元素

这样就没起作用

在这里插入图片描述
加波浪线就是有一个值即可

在这里插入图片描述
这样就变了

class带有多值就可以用波浪线来控制了

在这里插入图片描述

在这里插入图片描述
又回去了
官方的意思是改成减号-，连字符的意思

在这里插入图片描述
也就是连字符之前的前缀匹配

在这里插入图片描述
必须要一个整体，虽然是前缀匹配，但是要求连字符之前的完全匹配

一般用波浪线

在这里插入图片描述
body刚才做了，子子孙孙都继承，个别有自己的属性，其他都受影响

font可以调字体大小，颜色，还有family，什么字体

斜体，加粗

字体大小是用的比较多的

还有表格

表格可以加一个border
在这里插入图片描述
table是一个大框子
一个table里面是tr，td，每个小框子属于td

加一个td

在这里插入图片描述
但是比较丑，所以中间效果要去掉

这个意思是向内塌缩

在这里插入图片描述
再设计下td，padding内边距，也是顺时针，4个方向都是20px就写一个即可

在这里插入图片描述
要适当留白

在这里插入图片描述
看到这里是20了

如果不想四周都是20
在这里插入图片描述
第一个控制的上下,第二个控制的是左右

在这里插入图片描述
写三个试试，指的是上，左右，下

margin也是这么设置的，2个是上下左右，3个是，上，左右,下

在这里插入图片描述
border是对所有边框的控制，下面是bottom，上边是top

margin和padding的写法，auto是浏览器计算，刚才写居中的div试过

往下学就需要美工注意的了，我们注意用css的选择器，用jquery，爬虫找到所要的元素，提取里面的文字

在这里插入图片描述

48N6E

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020/03/14 05-CSS

布局的事情交给美工，那你只需要辅助即可，告诉你这块布局准备做什么，业务上有什么功能，多少行，做下交流，高度宽度，交流之后模你开发你的功能，美工自己做自己的，各自开发各自的，美工做好前端页面，你用django套用这个模版，或者做好所谓的模版，用js，后端纯数据，前后端完全分离，就靠ajax返回json互相通信。模版可以卸载django中，所以需要懂一些CSS，如果做爬虫就也需要懂css叫层叠样式...
复制链接

扫一扫

专栏目录