web前端一般由html,css,javascript等搭成
上了学校开的前端设计课后想写一些自己关于前端html,css设计的一些体验和自己走过的坑。一定是要积累沉淀啊。
个人认为web前端的写时最好时先把内容排好再安排标签样式，先有主体再有外表
响应式web：
刚开始写html用position绝对定位某个标签，虽然把网页铺排看起来还是很正常，但是一把窗口调小一定元素就会东跑西跑，十分不美观。关于这一点是因为前面标签的挤压。
不美观怎么办，那我们需要在不同的视口下有不同的样式(๑•̀ㅂ•́)و✧。
媒体查询结构
@media only screen and (这里放条件语句，比如说min-width:400px) {
.....}
这个查询语言也很好记，就是说在screen宽度在多少的时候我们要显示什么样的css，这样做的话就可在一个css文件里放不同显屏时的不同样式了
多个外联式css文件
<link rel="stylesheet" href="css文件" media="only screen and (min-width:400px)">
这里的media用于判断什么时候用啥css文件
div
对于一段内容来说他可能需要一个地方来安放他，这就可以时我们的div来做这个事。它像一个盒子一样吞吐标签，很大程度上能解决标签的位置等问题
居中的奇淫技巧
老实说居中问题在刚开始时常让我头秃。
body居中
整体的内容居中而不用class怎么搞，不如来设置body的最大宽度
body{
max-width: 1200px;
margin:auto;
}
div中文本图片居中
text-align:center ; //表示水平居中
vertical-align: middle; //表示垂直居中
绝对位置居中
position:absolute;
left: ; right:; //左右百分比自行根据网页设置
浮动
浮动的设置能让网页内容更加直观，视觉效果更好。比如让一个图片被文字环绕，若单纯设置绝对位置，很有可能出现图被文字挤到下一行的情况。但用浮动（对图片）配上最大宽度（对文本使用）会让一切很和谐，比如说这个例子
float
然而浮动往往会影响下一个标签，这并非吾等所愿意看见的。
clear:all; //清除上一个标签的浮动效果
max-width
这个语句时用来限制我们标签的宽度的，画地为牢，让标签里的东东能够安分的呆在那里面。
讲真，用max-width来让两个标签里的内容能够并排到一起十分的方便
