南京定制网站,安徽国贸网站建设,网站建设步骤图,网页设计与制作教程html文章目录 html与csshtml、css与排版响应式与自适应布局自适应布局响应式布局 css规则class、id、以及默认的标签名的优先级 css书写位置flex整体逻辑 bootstrap资源 html与css
html负责网页功能#xff0c;css负责网页美化#xff1b;浏览器本身有一套默认的css样式#xf… 文章目录 html与csshtml、css与排版响应式与自适应布局自适应布局响应式布局 css规则class、id、以及默认的标签名的优先级 css书写位置flex整体逻辑 bootstrap资源 html与css
html负责网页功能css负责网页美化浏览器本身有一套默认的css样式所以有的元素会表现的不一样
html、css与排版
这里说一下对排版的个人理解 首先整体上不论是以前的块级元素、行级元素还是现在的元素类别一个元素他都会区分为换行以及不换行的而这个换行与不换行本质上由css决定html的元素有些换行有些不换行究其原理就是css的不同默认设置。 而当不换行的时候css就根据盒子模型不断对元素放置外层元素要完全包含内层元素。因此整体上的表现就是一个个的元素分层次的嵌套一个又一个的元素最终嵌套了最基本的元素。
响应式与自适应布局
自适应布局
分别为不同的屏幕分辨率定义布局即创建多个静态布局每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部页面元素位置发生改变但在每个静态布局中页面元素不随窗口大小的调整发生变化。
响应式布局
响应式布局是网页的布局针对屏幕大小的尺寸而进行响应通过检测视口分辨率针对不同客户端在客户端做代码处理来展现不同的布局和内容只需要开发一套界面即可适用于所有尺寸及终端。
css规则
styleh1, h2 {color: red;background-color: lightblue;text-align: center;}h3 {color: yellow;background-color: lightblue;text-align: center;}
/styleh1标题1/h1
h2标题2/h2
h3标题3/h3p classclass_p1p2/p
pp3/pcss规则 选择器 声明块 选择器 用来选中元素定义选中元素的范围 元素选择器选中对应标签的元素 h1 {color: red;background-color: lightblue;text-align: center;
}h1标题1/h1id选择器选中对应id的元素 #id_p1 {color: red;
}p idid_p1p1/p类选择器选中对应的类型 .class_p1 {color: lightblue;
}p classclass_p1p2/p声明块 用来定义选择器的属性出现在大括号中声明块中包含多种属性每个属性表达了一种样式规则。
class、id、以及默认的标签名的优先级
style.test {background: red;color: red;}#testID{background: blue;}.test2 {background: violet;}.test {background: yellow;}div{background: turquoise;border: 1px black solid;}
/stylediv classtest test2 idtestID此时相同类型的css定义如class如果有重复的那么后面的属性会覆盖前面的属性(如background)而后面没有的属性并不会影响前面存在的属性(如color);而不同类型的css定义他们的优先级为标签名 class类型 id类型同样的如果一个标签同时引用了三种那么他们的会按照这个优先级顺序覆盖相同的属性而优先级低存在的属性但是优先级高的不存在的属性则会保留;如果class或者id引用了多个类型那么会按照对应style定义的先后顺序生效而不是引用顺序如这里的classtest test2最终生效的是test2的background因为他定义在test之前。
css书写位置 内部样式表 即直接将style.../style写在head.../head中 style.../style也可以写在body.../body中但是由于浏览器是从html文件从上到下进行数据读取渲染过程中在遇到style.../style时会根据样式表重新进行渲染可能造成闪烁问题因此一般放在head部分保证浏览器一开始就能读取到样式表。 内联样式表、元素样式表 即直接在元素位置加style属性h1 stylecolor: red; background: blue;/h1 外部样式表 将样式书写到独立的css文件中然后使用link进行引用 link relstylesheet hrefcss/base.css推荐使用外部样式表理由如下
外部样式表可以解决多页面样式重复问题和c头文件差不多把重复性的都提取出来成一个外部样式表文件有利于浏览器缓存提升浏览器响应速度。有利于代码分离更容易阅读和维护。
flex
Flexible – 灵活的 flex – Flexible Box – 弹性布局用来为盒状模型提供最大的灵活性。
整体逻辑
整体逻辑就是一个container然后内部容纳多个item而属性方面有两个层次一个是container的层次用于描述整体排版一个是item的层次用于描述container存在剩余空间的时候每个item的放大缩小策略以及一个排版布局的属性。
整体上针对的更多的是主轴方面而垂直轴的布局主要由容器负责管理。
当所有的项目都以 flex-basis 的值进行排列后仍有剩余空间那么这时候 flex-grow 就会发挥作用了。 如果所有项目的 flex-grow 属性都为 1则它们将等分剩余空间。(如果有的话) 如果一个项目的 flex-grow 属性为 2其他项目都为 1则前者占据的剩余空间将比其他项多一倍。 当然如果当所有项目以 flex-basis 的值排列完后发现空间不够了且 flex-wrapnowrap 时此时 flex-grow 则不起作用了这时候就需要接下来的这个属性 flex-shrink如果空间不足该项目将缩小负值对该属性无效。
bootstrap
一个css库可以用来美化界面
资源
中文文档 http://bs4.vx.link/
资源链接 https://www.bootstrapcdn.com/
