太空独角兽

web前端设计学习体验

作者:太空独角兽发布于: 2018-03-20

上了学校开的前端设计课后想写一些自己关于前端html,css设计的一些体验和自己走过的坑。一定是要积累沉淀啊。
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来做这个事。它像一个盒子一样吞吐标签，很大程度上能解决标签的位置等问题
关于这里不得不说一句，父元素最好要有宽高，好放置子元素

老实说居中问题在刚开始时常让我头秃。
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来让两个标签里的内容能够并排到一起十分的方便

不知不觉已经学习HTML，css有两个月多了。越往下学习，好的习惯真的很重要

对把各种标签混在一起说NO，拥抱简介明了的分类。

比如说常用的ul，li标签就像爸爸和儿子的关系一样，一个爸爸可以有很多儿子，但一个儿子不能有很多爸爸，不然你的样式就会像狗血剧演的一样让你到后面越来越揪心。

万万没有想到我还可以这样操作。

对可加性的内容，一定不要定死了。以下都是不错的写法（以高度为示例）

max-height：；
min-height：；  //限制最大，最小的高度，让其可以有伸缩空间
height：100%；  //针对于一个容器里高度的限制条件或许百分比是个不错的选择呢

直接对标签进行样式设置，不如直接给他一个class.

有时候你会发现在一个div中你已经给定一个标签的样式

.example a{
    color:green; 
 }

但是有个性的你并不想要每一个a标签都被绿，但是直接进行css添加不OK。有一种解决办法是直接在HTML里直接对不被绿的a标签进行style设置，但是这样写不利于管理和更改。那么不如直接给需要绿的a的标签给定css类

  #css部分
  .a_green{
      color:green; 
  }
  #HTML部分
  <a class="a_green">...</a>

千万不要懒！

人生苦短，不要浪费时间在反复修改上。最好从一开始就对写法有个清晰的认识和选择。