HTML+CSS

Author Avatar
Euan 10月 21, 2019
  • 在其它设备中阅读本文章

HTML+CSS

一、实验目的

  • 掌握HTML5和CSS3的使用
  • 能够通过网站的UI界面，使用HTML5和CSS3实现相应的功能

二、实验环境

  • Safari
  • vscode

三、实验内容

  1. 根据课堂内容，对HTML5和CSS3中的内容进行掌握（见HTML+CSS的PPT和样例文件夹中的内容）

老师上课说过不写，我当然不写，之前也有接触过前端，所以觉得标签语言也不难，还是多练习才能学会。

  1. 根据欧莱雅网站首页UI和提供的素材，使用HTML5+CSS3实现网站首页。（请将源代码复制到此处）

uMoHaT.png

出现乱码很正常，毕竟都是练习项目。一种是改变浏览器的编码格式，一种是在代码里设置编码格式。

看到html里面的uft-8，把相应浏览器改成utf-8就可以修复

uMobIU.png

uMoIrq.png

看了题目，需求就是把图片排序成两行排列，每行分成三列等距排列。看了下底部的css，发现就是我们要做的结构，先把底部footerleft的css注释

再把middle和right注释掉。由此可以判断也是根绝相对位置进行排序的

完成要求一，更改代码，应为默认为上下排序，所以直接把css中关于produect全部注释即可，代码简单，所以通过要求二代码注释product即可得到要求一代码。

uMohxs.png

uMTZQA.png

uMo5Mn.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!--PRODUCT-->
<div class="product">
    <div class="product_son">
        <a href="#"><img src="images/youthcode.png"/></a>
    </div>
    <div class="product_son">
        <a href="#"><img src="images/shine.png"/></a>
    </div>
    <div class="product_son">
        <a href="#"><img src="images/pure.png"/></a>
    </div>
    <div class="product_son">
        <a href="#"><img src="images/brandnew.png"/></a>
    </div>
    <div class="product_son">
        <a href="#"><img src="images/brand.png"/></a>
    </div>
    <div class="product_son">
        <a href="#"><img src="images/beauty.png"/></a>
    </div>
    <div class="product_son">
      <a href="#"><img src="images/loreal.png"/></a>
    </div>
</div>
1
2
3
/*产品系列展示*/
.product{height:955px; width:4000; margin-top:10px;}
.product_son{width:952px;height:440px;margin-top:10px;}

完成要求二，由于上下需要分出间隙，所以三个结构没有类似的地方所分为三个子div，然后up和down中中三个图片的排列规则一样，所以6张图片用三个相同的css，通过设置内左边距，外左边距，外顶边距和内顶边距，并设置图片的位置大小，实现该功能。

uMooq0.png

uMo7ZV.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!--PRODUCT-->
<div class="product">
    <div class="product_up">
      <div class="product_left">
          <a href="#"><img src="images/youthcode.png" height="130" width="280"/></a>
      </div>
      <div class="product_left">
          <a href="#"><img src="images/shine.png" height="130" width="280"/></a>
      </div>
      <div class="product_left">
          <a href="#"><img src="images/pure.png" height="130" width="280"/></a>
      </div>
    </div>
    <div class="product_down">
      <div class="product_left">
          <a href="#"><img src="images/brandnew.png" height="130" width="280"/></a>
      </div>
      <div class="product_left">
          <a href="#"><img src="images/brand.png" height="130" width="280"/></a>
      </div>
      <div class="product_left">
          <a href="#"><img src="images/beauty.png" height="130" width="280"/></a>
      </div>
    </div>
    <div class="product_bottom">
      <a href="#"><img src="images/loreal.png" width="870" height="350"/></a>
    </div>
</div>
1
2
3
4
5
6
7
8
/*产品系列展示*/
.product{height:700px; width:952px; margin-top:25px;}
.product_up{width:952px;height:140px; padding-left:36px;padding-top:25px;}
.product_left {width:300px;height:138px;float: left;}
.product_middle {width:300px;height:138px;padding-left:5;float:left;}
.product_right {width:300px;height:138px;padding-left:5; float: right;}
.product_down{width:952px;height:140px;padding-left:36px;margin-top: 15px;}
.product_bottom{width:952px;height:280px;margin-top: 5px;padding-left:5px;}

四、实验心得

  • margin和padding分别为外边距和内边距的区别
  • 明白了调参程序员的痛苦
  • css看起来跟xml差不多，类似的pading和margin在安卓也有相同名称的参数

本文使用 CC BY-NC-SA 3.0 中国大陆 协议许可
具体请参见 知识共享协议
本文链接：https://zyhang8.github.io/2019/10/21/javaweb-exp1/