2021-07-02

最新推荐文章于 2021-11-10 17:26:45 发布

Qxue2021

最新推荐文章于 2021-11-10 17:26:45 发布

阅读量55

点赞数

分类专栏：暑期实训

本文链接：https://blog.csdn.net/qq_44540109/article/details/118421422

版权

暑期实训专栏收录该内容

14 篇文章 0 订阅

订阅专栏

暑期实训第一周进度报告

第一周主要还是对于HTML和css的学习，真正做出来的东西倒没多少，只是做了个登录界面和医生信息展示界面，界面之间的跳转还是通过超链接实现的，算不得完全实现。
外加学到了HTML里class等的应用，说真的，学到了这个之后，真的是方便太多了，一开始，我并没有完全理解class是怎么一回事，觉得class的属性值必须从已有的里面选，这个想法可算是害苦了我，死活都找不着想要的属性值，根本写不下去！后来搞清楚了class就像是c++里的class基本是一个道理，他是一个类，可以自己声明的一个类，目的方便我们区分不同类里面的同名的元素的。id也是差不多一样的道理，只不过在css里面一个用.xxx，一个用#xxx。
还有就是学到了css里面的position、margin系列、border、background系列、color、font系列、text系列等基础知识。
position属性可以取值absolute（生成绝对定位的元素，相对于static定位以外的第一个元素进行定位。通过left、right、top、bottom属性进行定位），fixed（生成绝对定位的元素，相对于浏览器窗口进行定位。定位方式与absolute相同），relative（生成相对定位的元素，相对于正常位置进行定位。如"left：20"会向元素的左边位置添加20px），static（默认值），inherit（从父元素继承position的值），background属性指的是元素背景设置，可以更改颜色、加背景图片（url(picture))等，color则是字体颜色。例如：

<html>
  <head>
    <style type="text/css">
     h2{
     position:absolute;
     left:100px;
     top:50px;
     width:130px;
     height:35px;
     background: red;
     color:yellow;
     }
    </style>
  </head>
  <body>
    <h2>POSITION</h2>
  </body>
</html>

运行结果：
在这里插入图片描述

margin系列，我比较偏好margin-top、margin-left、margin-bottom、margin-right，我不是很喜欢直接用一个margin，要居中的时候除外，margin-方向可以精准的定位到想要的地方，而只用一个margin的话新手（我）很容易出错，是以我用margin-方向比较多，例如：

<html>
  <head>
    <style type="text/css">
     img{
     margin-top: 40px;
     margin-left:50px;
     }
    </style>
  </head>
  <body>
    <img src="images/bg.jpg" >
  </body>
</html>

运行结果：
在这里插入图片描述

border属性是指的边框。应用最多的就是border：像素值 solid 颜色；border-radius：像素值。一个负责颜色和边框粗细，一个负责变成圆框。例如：

<html>
  <head>
    <style type="text/css">
    .a{
       font-size:30px;
       font-family: Georgia, 'Times New Roman', Times, serif;
       text-align: center;
       width:20%;
       height: 10%;
       border: 3px solid black;
      }
     .b{
       font-weight:300;
       font-size: 35px;
       font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
       color: lavenderblush;
       background: orangered;
       text-align: center;
       width:20%;  
       height: 10%;
       border: 3px solid blue;
       border-radius: 20px;
      }
    </style>
  </head>
  <body>
    <p class="a">BORDER</p>
    <p class="b">CIRCLE</p>
  </body>
</html>

运行结果：
在这里插入图片描述

font系列东西也很多。font-size字体尺寸、font-family字体系列、font-smoothing对字体进行抗锯齿渲染、font-style字体样式、font-variant字体异体、font-weight字体粗细、font-height字体行高。在上面的代码里也有所展示，这里就不再赘述了。
以后要继续加油！要继续学习HTML和css，而且争取也把js学会！
加油！

Qxue2021

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-07-02

暑期实训第一周进度报告第一周主要还是对于HTML和css的学习，真正做出来的东西倒没多少，只是做了个登录界面和医生信息展示界面，界面之间的跳转还是通过超链接实现的，算不得完全实现。外加学到了HTML里class等的应用，说真的，学到了这个之后，真的是方便太多了，一开始，我并没有完全理解class是怎么一回事，觉得class的属性值必须从已有的里面选，这个想法可算是害苦了我，死活都找不着想要的属性值，根本写不下去！后来搞清楚了class就像是c++里的class基本是一个道理，他是一个类，可以自己
复制链接

扫一扫