发表于: 2018-09-05 09:09:42

1 709


昨天写的日报忘了提交,和今天的一起提交。


今天完成的事情:


任务8第一个页面做完,基本没有问题,玩了flex游戏,对flex有更深刻的印象,第一个页面实现自适应各种屏幕。第2个页面做了导航栏。


明天计划的事情:


做第2个页面,争取做完。


遇到的问题:


今天遇到了图片太宽,把边框挤掉,我给它套了一个div,然后给了一个高,但是屏幕变小时,点击图片hover效果时,就不行了吧边框直接挤掉了,因为图片本身宽度,大于系统分配给他的宽度。

我用限制它宽度的方法解决了这个问题。

.img-photograph img{
   max-width: 200px;
}
.photograph:hover{
   border: 1px solid #919091;
}
.box-circle{
   display: inline-block;
   width: 8px;
   height: 8px;
   border-radius: 4px;
   margin-right: 3px;
   background-color: black;

限制一下图片的宽度就完美解决问题,还有上面的图片切下来很正常,但是引用上去就变形了,找了很长时间,才发现原因,因为我用到的框架,它给图片加的有东西,我给了图片

.content-box{
   text-align: center;
   margin-top: 50px;
}
.img-box{
   height: 64px;
}

加上固定宽度,就解决了问题,

.box-circle{
   display: inline-block;
   width: 8px;
   height: 8px;
   border-radius: 4px;
   margin-right: 3px;
   background-color: black;
}
.friendship-link{
text-align: center;
   margin-bottom: 10px;
}

做了一个小圆点放在字旁边,与字体垂直居中,并且一行、

div class="row">
   <div class=" col-md-3  col-sm-6 detailed-introduction ">
       <div class="friendship-link">
       <div class="box-circle">

今天用的最多的就是框架,用

container 

套着所有元素,就可以让元素垂直居中并且自动分配距离,row就是col-md-3就是一行里面的元素,可以分配大小


  • “行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。
  • 通过“行(row)”在水平方向创建一组“列(column)”。
  • 你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。
  • 类似 .row 和 .col-xs-4 这种预定义的类,可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
  • 通过为“列(column)”设置 padding 属性,从而创建列与列之间的间隔(gutter)。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding。
  • 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
  • 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个 .col-xs-4 来创建。
  • 如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。
  • 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何 .col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何 .col-lg-*不存在, 也影响大屏幕设备。


还有就是换行       可以使用强制换行符号<br />换行。如果在一个文章里可以在文章需要换行的地方加入<br />即可实现自动换行         可以使用<p.>标签来实现大换行。如果在一个文章里需要分段换行形式,可以使用<p>标签来实现换行       可以使用CSS设置宽度自动换行。我们可以在一个div里,添加一个div并加入css样式,对加入的div设置对应的css宽度即可实现自行换行。


收获:

做完第一个页面,对栅格系统有更好的认识,换行有了新了解。


今天完成的事情:9月5日



做完了第2个页面,还差一个动画效果,基本完成,任务8第2个页面,我引用了第一个页面的头部和尾部,今天学会了gird布局


明天计划的事情:


做完任务8准备小课堂。


遇到的问题:


布局的问题,写那个人物介绍我一开始准备,用flex加上使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行(row)所包含的列(column)的个数不能超过12(其实,没有要求你必须占满12列)。


<div class="row">   <div class="col-sm-9">     Level 1: .col-sm-9     <div class="row">       <div class="col-xs-8 col-sm-6">         Level 2: .col-xs-8 .col-sm-6       </div>       <div class="col-xs-4 col-sm-6">         Level 2: .col-xs-4 .col-sm-6       </div>     </div>   </div> </div>

一个个的往里面套div解决这个问题,师兄给我说了gird布局,我找了gird布局然后开始用,


    收获


还知道了flexbox布局


使用 display: grid 将容器元素定义为一个 grid(网格) 布局,使用 grid-template-columns 和 grid-template-rows 设置 列 和 行 的尺寸大小,然后通过 grid-column 和 grid-row 将其子元素放入这个 grid(网格) 中。与 flexbox 类似,网格项(grid items)的源顺序无关紧要。你的 CSS 可以以任何顺序放置它们,这使得使用 媒体查询(media queries)重新排列网格变得非常容易。定义整个页面的布局,然后完全重新排列布局以适应不同的屏幕宽度,

  • 伸缩容器:一个设有“display:flex”或“display:inline-flex”的元素
  • 伸缩项目:伸缩容器的子元素
  • 主轴、主轴方向:用户代理沿着一个伸缩容器的主轴配置伸缩项目,主轴是主轴方向的延伸。
  • 主轴起点、主轴终点:伸缩项目的配置从容器的主轴起点边开始,往主轴终点边结束。
  • 主轴长度、主轴长度属性:伸缩项目的在主轴方向的宽度或高度就是项目的主轴长度,伸缩项目的主轴长度属性是width或height属性,由哪一个对着主轴方向决定。
  • 侧轴、侧轴方向:与主轴垂直的轴称作侧轴,是侧轴方向的延伸。
  • 侧轴起点、侧轴终点:填满项目的伸缩行的配置从容器的侧轴起点边开始,往侧轴终点边结束。
  • 侧轴长度、侧轴长度属性:伸缩项目的在侧轴方向的宽度或高度就是项目的侧轴长度,伸缩项目的侧轴长度属性是「width」或「height」属性,由哪一个对着侧轴方向决定。
  • 我的gird布局,1我用的是俩排的布局,解决了这个问题
.wrapper {
   display: grid;
   grid-template-columns: 42% 0 58% 0 0 0 0;
   grid-template-rows: auto 0 auto 0 auto;
   color: #c6c6c6;
   margin-bottom: 30px;
}



返回列表 返回列表
评论

    分享到