发表于： 2017-03-30 20:27:29
1 598
今日所做：
1.继续做任务8的第三个页面，完成了具体div内部元素的设置以及整体的布局，和响应式的设计
2.学习了媒体查询的使用方法，媒体查询有两种设置方法，一种是在css样式列表中，用
@media screen and （max-width）来设置屏幕宽度在小于max-width时的页面布局；
还有一种方法是在<head></head>标签使用<link rel="stylesheet" type="text/css" media="screen" href="style.css">;
与设置；两种方法都可以实现，但是前者更好，因为把媒体查询功能直接写在css样式表中可以减少http的访问次数。
3.对于小于屏幕某个宽度值时布局的设定：@media screen and （max-width：mmm）；
对于大于屏幕某个宽度值时布局的设定@media screen and （min-width：mmm）；
4.媒体查询功能除了根据宽度的改变来调整布局，还有很多其他的判断种类，例如浏览设备是横屏还是竖屏，
浏览设备可视窗口的高度与宽度比等等。
明日计划：
1.学习如何做一个响应式的导航栏
2.使用媒体查询功能对之前的页面进行修改
遇到的问题：
给内部div进行布局的时候总是出现各种问题，子元素边框超出父元素范围，文本太长不自动换行等等，后来通过询问师姐以及查询资料，解决了
部分问题。
今日收获：
使用栅格系统布局，然后给内部某个div设置边框的时候，发现有些边框超出了主体div的范围，后来
又详细地看了下栅格系统的设置原理，container首先设置一个左右的padding值，然后row再设置一个
左右的负值margin，其数值和container的padding值一样，都是15px，这样row的宽度就和container
一样了，它们的边框是在一起的；而col又有一个左右为15px的padding值，这样的话，如果设置列嵌套
，那么嵌套的列只要遵循先建立row，再建立col的原则，在子col中输入文本和在父col中输入文本的起始
点时一样的，但是注意此时它们的边框不是围绕着文本本身的，而是左右含有15pxpadding的row元素或
者container元素；这样根据这个事实去给内部div设置边框就不会出问题了。
返回列表
评论