自学html第四天

小老虎的小小白

已于 2024-09-02 16:27:23 修改

阅读量154

点赞数 1

分类专栏： html 文章标签： html 前端

于 2024-09-02 16:27:00 首次发布

本文链接：https://blog.csdn.net/qq_42404495/article/details/141822952

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

学习记录

今天比较犯懒，就插入了顶部图片，先做这种，后期厉害了在学习如何把整个背景设置好（整个背景也包括了顶部背景，图片加颜色填充），然后在不同位置直接设置元素（比如直接插入字就行），现在顶部内容（包括我家小黄都在一张图片里，字没有单独设置）

代码

1.html

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>小狗专属网站</title>
  <link rel="stylesheet" href="1.css" >
 </head>
 <body>
 <div class="head" >
   <img src="top.jpg" alt="顶部"/>

 </div>
 <div class="medium">


 </div>
 <div class="bottom">


 </div>

 </body>
</html>

1.css

*{margin: 0;padding: 0;}//去掉边缘缝隙，整体布局
.head{
  height: 462px;
  width: 1920px;
}

.medium{
    height: 2104px;
    width: 1920px;
}
.bottom{
    height: 379px;
    width: 1920px;
}