发表于: 2018-08-13 20:30:31

1 700


今天完成的事情

任务七第三个页面基本完成,第二个页面稍作修改


明天的计划

研究下页面如何跳转,预习下任务八


遇到的问题

1.卧底胜利四个字定不到图片里面

2.下面的透明效果开始做的有问题

3.学习效率不高,还没摸索到怎么去学,任务卡住了就不知道该干什么


收获

1.CSS三栏布局两侧定宽中间自适应------float(一定注意html书写顺序,左内容-右内容-中间内容),左右内容定固定宽高,左侧左浮动,右侧右浮动,中间设置margin值,将两侧的布局留出来。
   /<div class="content">
   /<div class="a">我在左边</div>
  /<div class="b">我在右边</div>
  /<div class="c">我在中间</div>
  /</div>
css样式.a{
float: left;
width: 100px;
height: 100px;
background-color: blue;
}
.b{
float: right;
width: 100px;
height: 100px;
background-color: green;
}
.c{
/*margin: 0 50px;*/
background-color: red;
}
2.CSS三栏布局两侧定宽中间自适应-------position(html书写顺序,左内容-中内容-右间内容)
父级元素设相对定位,左右设固定宽高绝对定位,左右侧调整上下左右距父级元素位置定位,
中间设置margin值,将两侧的布局留出来
3.三栏布局,两边定宽,中间自适应-----用flex(html书写顺序,左内容-中内容-右间内容)
父级元素设置display: flex;左右侧设置flex的值,中间设置 flex-grow。
基本定义: flex-grow属性,一个数字,定义项目的放大比例,默认为0.即如果存在剩余空间,也不放大。
flex-shrink属性,一个数字,定义了项目的缩小比例,默认为1.即如果空间不足,该项目将缩小.
flex-basis属性,合法值:"auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字,定义了在分配多余空间之前,项目占据的主轴空间。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)
做法:父级元素设置display:fixe,
<div class="content">
<div class="a">我在左边</div>
<div class="b">我在中间</div>
<div class="c">我在右边</div>
</div>
cssy样式.content{
width:80%;
margin:0 auto;
display: flex;
}
.a{
flex: 0 1 300px;
height: 300px;
background-color: blue;
}
.c{
flex: 0 1 300px;
height: 300px;
background-color: green;
}
.b{
flex-grow: 1;
height: 300px;
background-color: red;
}
4.响应式布局的要求下,能自动调整尺寸的元素能够做到高宽自适应,如img,通过{width:50%;height:auto;}实现图片高度跟随宽度比例调整.
5.vh与vw,大概明白是随着浏览器窗口变化而变化。   vw相对于视口的宽度。视口被均分为100单位的vw
                                                                               vh相对于视口的高度。视口被均分为100单位的vh
<style>
p {
font-size: 5vw;
}
</style>
</head>
<body>
<p>相对于viewport宽度大小的文字</p>
</body>
</html>



返回列表 返回列表
评论

    分享到