发表于: 2020-04-04 22:00:47

4 1384


今天完成的事情

  • 任务 3 基本完成了。今天对介绍页的布局进一步优化改进,排列的更整齐些了,和效果展示的差不多。不过 PC 端的图片文字看着比较小,移动端就挺合适的。
  • CSS3 @media 查询,可以针对不同的媒体类型定义不同的样式。好像不是自适应的,所以在任务里我没用这个。我是觉得窗口尺寸过大时,可以用这个加大自己的文字、图片。
  • 在云服务器上配置 nginx。把任务 3 的页面文件通过 Xftp 直接给拉进服务器里了。这个是服务器上的:魔镜介绍页(差不多一个月后过期~)。

明天计划的事情

  • 开始做任务 4。
  • 有其他功课要写,可能速度要变慢了~

遇到的问题

  • 一开始,2 圆图和下边的字我是用四个不同的 div 来分别装的,不过缩放过程中老是上下对不准。后来去看了一些师兄的日报,原来可以在一个 div 里存一个 <img> 和一个 <p></p>,这样圆图和字看起来就规整多了。
  • 两圆图的 height 不一样,造成他们相对应的字符的下部对不齐。然后把 height 都改成 45 px,width 设成 auto。高度都一样了,终于对齐了~。
  • 服务器端 nginx 的 80 端口无法访问,改成 7777 了~。

收获

  • div 是块级元素,它的内容自动地开始一个新行;p 标签就像段落一样,也会自动换行。所以在一个 div 里存一个 img 和 一个 p 时,p 会换行。

  • 个人想法:div 会换行,与布局的上下结构相关;而有 float 属性的 div 就与左右结构有关。

  • window 上不能直接 cd F:\CSS\task3,因为 \t 是转义字符了,需要用 F:\CSS\\task3 才能正常切换。

  • em 继承父级元素的字体大小;而 rem 相对于 HTML 根元素,修改根元素就能调整页面所有字体的大小,还能保持各字体间的相对大小。能够适配于分辨率差别比较挺大的设备。

  • text-align 能让 div 里的元素居中。

  • 发现下边的服务器上打开端口的命令很好用:



返回列表 返回列表
评论

    分享到