当青训营遇上码上掘金

754 阅读1分钟

名片介绍

名片介绍主体有自我介绍,照片,详细介绍。名片采用html,css进行制作,主要分为三部分,背景设置,文字内容,照片显示。

一:背景设置

  设置body为linear-gradient渐变色,设置渐变方向和渐变颜色。在body中设置form,设置宽度为650px,高度为700px,并用background设置背景图片,设置为不平铺,并整体设置为居中显示。       

二:文字内容

  该部分采用div进行书写,设置h1标签为题目;姓名,年龄等采用p标签进行书写,并将p标签用div设定class为introduce。在style进行选择器设置,设置h1,用font设置字体为宋体,text-align设为居中;introduce设置第一行缩进为1.5em;设置行高为0.5;上边距为-28%。将具体介绍放入p标签中,并设置class为introduction,并在style中设置同样的缩进,行高,上边距。

三:照片显示

  设置img导入程序员照片,并通过img内的style设置大小,并在alt设置图片未显示时的内容文字。

四:其他设计

  用button定义一个按钮为“点赞”,在用js进行点赞数量增加实现点赞计数增加;将图片背景设置为圆角,在css里设置border-radio进行设置;将基本信息用竖线进行装饰,凸显重要内容。