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来让两个标签里的内容能够并排到一起十分的方便

本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:http://www.dengtar.com/16651.html