布局的事情交给美工,那你只需要辅助即可,告诉你这块布局准备做什么,业务上有什么功能,多少行,做下交流,高度宽度,交流之后模你开发你的功能,美工自己做自己的,各自开发各自的,美工做好前端页面,你用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,爬虫找到所要的元素,提取里面的文字