发表于: 2020-04-19 20:22:10
1 1352
今天的任务:
①优化任务4的代码并代码到服务器;
②完成任务5,其中的收获:
html一些特殊字符的写法:
> >大于号
< <小于号
& &引号
" "引号
® 已注册
© 版权
™ 商标
  半方大的空白
  全方大的的空白
不断行的空
③使图片自适应DIV垂直居中与水平居中,
主要是利用的table表格中:vertical-align:middle; 这个属性,
利用display:table; 将DIV模拟成table.
在img标签上套了一个span,可以利用display:table-cell;
将其模拟成类似表格的TD元素,这样vertical-align:middle;垂直居中起到效果。
css:
#tupian { width:500px; margin:0 auto; height:500px; display:table; border:1px #000000 solid;}
#tupian span { display:table-cell; vertical-align:middle; text-align:center;}
#tupian span img { max-width:100%; max-height:500px;}
html:
<div id="tupian">
<span><img src="img1.png></span>
</div>
④使用overflow隐藏图片超过部分;
⑤注意盒子包裹的范围,因为一根线包在盒子里导致整个盒子的内容无法居中。
⑥white-space: nowrap; flex布局不换行
letter-spacing: 字间距
⑦现在完成的页面效果:
明天的任务:
上传任务5的代码和成果网址,开始任务6.
评论