qq音乐界面总结



各种标签属性代表的意义

一、网页布局

1.盒子模型div容器

  • padding: 内边距(上,右,下,左px)

  • margin: 外边距 (同上)
    写在css中的“*{}”表示整个页面中的所有元素,这个时候可以设置 网页没有边框,代码如下:

    如图,网页

    浏览器位置居中

    left:50%;
    transform:translateX(-50%);
    margin-top:50%;
    margin-bottom:50%;
    

2.flex布局

ps:一定要在flex布局下才有用! flex布局默认按照行排列

display:flex(开启flex布局)(父元素)
flex-direction: column(默认按照行,可以自己设置按照列)
flex:1   flex:2    flex:1(数据可改,子元素)

 1.justify-content:(改主轴)
  ①flex-end   右
  ②center   中
  ③space-between    两端
  ④space-evenly   平分空间   
  ⑤space-around    周围都有空
 2.align-items:(改交叉轴)
  ①center
  ②flex-end等等

在你想要设置成flex布局的总的大的div里设置display:flex,然后,那个的div和其包括的各种小的div都可以设置属于flex布局的样式。


 css布局(定位)
 是通过position实现的: 
 static,relative,absolute,fixed,sticky.
 float:left(左浮动)
其中,position:sticky属性,需要再加一 
个top:0

PS:起初并不明白flex布局的意思,后来知道,如果给css中的盒子模型不设置flex(弹性布局),那这个盒子模型是按照它传统的布局方式来布局的,而如果给相应的盒子设置了弹性布局则可以使它有flex属性,才会按弹性盒子布局,但需要注意的是flex自己的标签,诸如justify-content这样的标签需要盒子开启flex布局才有用,如果不写display:flex,那么这些标签将不起任何作用。
另外,float在启用flex布局时将不起作用,至于float:left则为使得新的div紧贴底面父元素div的左边,不会位移。


二、有关hover(它是伪类!!)

我觉得需要注意的地方一共有两点, 做的时候明白了一些东西,如下↓

①如果想设置对于某一个div的hover,那就在":hover "前面加上 “. (div名称)”, 
不然就成了给所有div都加上了hover。
②四个伪类的顺序一定不可以变。不然可 
能显示不出来
  • : link→链接点击前的样式
  • : visited→链接浏览过后的样式
  • : hover→鼠标悬浮在链接上的样式
  • : active→鼠标点击链接时的样式

还可以设置下划线,用text-decoration设置下划线颜色或者none.如下图↓


链接,div变色

还有一个相关的标签:cursor:pointer,如下图↓


小手

三、一些属性

  • text-indent: 文字缩进的样式,可以不用空格

  • font-size: ~px; 字体大小

  • text-align: center 文字在盒子里居中

  • font-weight: 粗体程度

  • border-radius: 圆角属性(使图片变圆形设置>=50%,圆角~px即可)

  • text-shadow: 文字阴影(水平阴影 ,垂直阴影,模糊的距离)

  • box-shadow: 盒子阴影

  • background-image:linear-gradient(渐变方向,color1,color2);

  • line-height: 行高

  • over-flow:hidden 一般给父元素加,防止溢出来,属性本身表示如果内容超出了给定值,超出部分将会被隐藏。

overflow-y: scroll; y轴的滚动轴,如何设置滚动轴样式呢?


补充

觉得在布局时有两个地方比较容易出错,框出来的部分:


这里是多个div的嵌套,其中需要注意必须设置margin-bottom,看起来像是悬浮起来的效果
这里为使美观,设置这些div→float:left.

还有,右边的那些div可以设置line-height行高。

心得体会

对一些属性标签不太熟练,在做的过程中犯了好多基本错误,觉得难点在于要想好应该怎么布局后再下手,明白所做的东西盒子之间的嵌套关系,比如是哪个大的盒子中有哪些小盒子,是否对div设置flex布局,设置后需要什么属性(靠左/右边/居中),也要计算一些大小防止变形(指超出大的盒子或者其他和希望值不符的样式),就是把一个总的框架搭好,再进行盒子的背景,设置字体大小,阴影,盒子圆角属性等等美化。

①PS:如果要使用一些标签属性的话,一定得在display:flex的flex布局下才有用,不然没用!!!!!
②css的盒子模型,所有东西都是由一个又一个div嵌套而形成的,注意要先设置一个大的div,然后再把里面的东西分成一块一块小的div,再可以设置z-index值把几部分页面叠起来,才把想要显示的内容放在最上层。不然显示不出来。
z-index的值,为负1的话,就是置于底层,为99的话,就是最上层。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,546评论 6 507
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,224评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,911评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,737评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,753评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,598评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,338评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,249评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,696评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,888评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,013评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,731评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,348评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,929评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,048评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,203评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,960评论 2 355

推荐阅读更多精彩内容

  • 本文转发自github, 原文地址 前端开发知识点: 作为一名前端工程师,无论工作年头长短都应该掌握的知识点: 此...
    XDUZ阅读 614评论 0 8
  • 1. 设置一张大的背景,颜色不要过亮 2. 设置一个白色的div,设置一点点阴影,提升立体感 3. 放置大标题,两...
    大破男阅读 1,029评论 0 0
  • 前沿 小编在这几年的前端开发过程中,经历了由js,jquery到vue,由操作dom到数据驱动页面,由只写pc网站...
    郝艳峰Vip阅读 15,402评论 1 52
  • $HTML, HTTP,web综合问题 1、前端需要注意哪些SEO 3、HTTP的几种请求方法用途 4、从浏览器地...
    peng凯阅读 772评论 0 1
  • 久违的晴天,家长会。 家长大会开好到教室时,离放学已经没多少时间了。班主任说已经安排了三个家长分享经验。 放学铃声...
    飘雪儿5阅读 7,523评论 16 22