2021.01.29index+style+reset

最新推荐文章于 2023-01-03 19:06:22 发布

at呆呆酱

最新推荐文章于 2023-01-03 19:06:22 发布

阅读量99

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/m0_54087529/article/details/113532002

版权

笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>千锋互联-中国IT职业教育良心品牌</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/reset.css">
</head>
<body>
    <!-- 语义化 头部区域 -->
    <div id="head">
        <div class="head-con">
            <h1><img src="images/qf_logo.jpg" alt=""></h1>
        </div>
    </div>
    <!--banner轮播图区域  -->
    <div id="banner"></div>
    <!-- 项目区域 -->
   <div id="item">
       <div class="item-con"></div>
   </div>
   <!-- 新闻区域 -->
   <div id="news">
       <div class="news-con"></div>
   </div>
   <!-- 导航区域 -->
   <div id="nav">
       <div class="nav-con"></div>
   </div>
   <!-- 底部版权部分 -->
   <div id="bottom"></div>
</body>
</html>

@charset "utf-8"; /* 对当前css文件里面的中文注释的翻译 */
#head{
    width: 100%;
    height: 62px;
    background-color: green;
}
.head-con{
    width: 1004px;
    height: 62px;
    background-color: aquamarine;
    /* 版心居中 */
    margin: 0 auto;
}
/* banner区域 */
#banner{
    width: 100%;
    height:420px;
    background-color:blue;
}
/* 项目区域 */
#item{
    widows: 100%;
    height:350px;
    background-color:aqua;
}
.item-con{
    width:1004px;
    height:350px;
    background-color:blueviolet;
    margin:0 auto;
}
/* 新闻区域 */
#news{
    width:100%;
    height:310;
    background-color:bisque;
}
.news-con{
    width:1004px;
    height:310px;
    background-color:cornflowerblue;
    margin:0 auto;
}
/* 导航区域 */
#nav{
    width:100%;
    height:214px;
    background-color:darkgreen;
}
.nav-con{
    width:1004px;
    height:214px;
    background-color:darkorange;
    margin:0 auto;
}
/* 底部版权部分 */
#bottom{
    width:100%;
    height:45px;
    background-color:black
}

/* 网页有默认的样式、一些常见的标签也有默认的样式 */
*{
    margin: 0;padding: 0;
}

at呆呆酱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021.01.29index+style+reset

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>千锋互联-中国IT职业教育
复制链接

扫一扫