静态页面练习-01

最新推荐文章于 2024-05-29 11:06:38 发布

七彩猫猫虫

最新推荐文章于 2024-05-29 11:06:38 发布

阅读量297

点赞数

分类专栏：自己动手丰衣足食

本文链接：https://blog.csdn.net/SDAW_1/article/details/104169979

版权

自己动手丰衣足食专栏收录该内容

14 篇文章 0 订阅

订阅专栏

成品图

在这里插入图片描述

html文件

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="01.css">
</head>
<body>
    <header>
      <div class="headerpc" >
        <img src="./src/logo.jpg" width="100%" height="100%">
      </div>

        <ul class="tabber">
          <li><a href="#">首页</a></li>
          <li><a href="#">简介</a></li>
          <li><a href="#">相册</a></li>
          <li><a href="#">活动</a></li>
          <li><a href="#">爱好</a></li>
          <li><a href="#">留言</a></li>
        </ul>

    </header>
    <div class="bp">
      <img src="./src/全家福.jpg" width="100%" height="100%">
    </div>

    <nav>
      <p><span>公告：</span>我的个人网站开通啦，欢迎光临！</p>
    </nav>
    <main class="main1">
      <article>
        <div class="s1">
        <h2>站长介绍</h2>
        <p>intrduce</p>
        </div>
        <div class="s2">
          <img src="src/wukong.png">
          <p>孙悟空，本名卡卡罗特，日本漫画及改编动画《龙珠》系列的主角，是来自贝吉塔行星的赛亚人。小时候以“下级战士”的身份被送到地球。被武道家孙悟饭收养并取名为“孙悟空”。小时候失控变成大猩猩踩死悟饭后独自生活在深山。有一天结识少女布玛，从而踏上收集龙珠的大冒险。
            在冒险中，悟空遇到了不少来自地球或宇宙的朋友及敌人，于是为保卫地球，更为追求强大而刻苦修行，不断与强敌战斗，成为拯救地球乃至全宇宙的英雄</p>
        </div>
      </article>

      <aside>
        <div class="s1">
          <h2>站长相册</h2>
          <p>Photo</p>
        </div>
        <div class="s2">
          <div>
          <img src="./src/超一.jpg" width="100%" height="100%">
          </div>
          <div>
          <img src="./src/超二.jpg" width="100%" height="100%">
        </div>
          <div>
          <img src="./src/超三.jpg" width="100%" height="100%">
        </div>
        </div>
      </aside>
    </main>
    <footer>
      <p>Copyright 02020,版权所有<a href="https://blog.csdn.net/SDAW_1"> https://blog.csdn.net/SDAW_1</a></p>
    </footer>
</body>
</html>

css文件

*{
  margin:0;
  padding: 0;
  list-style: none;
}

header{
  height:77px;
}

.headerpc{
  position: absolute;
  left:447px;
  width:200px;
  height: 65px;
}

.tabber {
position: absolute;
  left:1010px;
}

.tabber li {
  float: left;
  width: 60px;
  margin-top: 28px;
  padding-left: 29px;
  border-left: black dashed 1px;
}
.tabber li:first-child{
  border:none;
}

.bp{
margin:0 auto;
  width:1600px;
  height:482px;
}
nav {
  height: 55px;
  text-align: center;
  line-height: 55px;
}
nav span{
  font-weight:bold;
}

main{
  width:1071px;
  height:245px;
  border:dashed 1px;
  margin:0 auto;
  padding:0 13px;
  display:flex;
}

.s1{
  display:flex;
  margin:20px 0 20px 13px;
}
.main1 h2{
  font-size:19px;
  border-right: solid 1px black;
  padding-right:15px;
}
.main1 p{
  font-size:19px;
  color:red;
}

.s2{
  margin-left: 13px;
  display:flex;
}
.s2 p{
  width: 254px;
  height:160px;
  font-size: 10px;
  color:orangered;
}

.s2 div{
  width:163px;
  height: 155px;
  margin-right: 10px;
}

footer{
  height: 55px;
  line-height: 55px;
  text-align: center;
   background-color: grey;
}

body{
  background-image: url(src/7.jpg);

}

经验教训：

1、伸缩布局：display:flex很重要

2、margin:0 auto 是使自身在浏览器居中，需要配合宽度使用

text-align:center 是使标签的内容居中

七彩猫猫虫

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
静态页面练习-01

成品图html文件<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0...
复制链接

扫一扫

专栏目录