多列布局和单列布局的练习

最新推荐文章于 2022-08-20 20:26:02 发布

还未迟暮

最新推荐文章于 2022-08-20 20:26:02 发布

阅读量209

点赞数

文章标签： html css javascript

本文链接：https://blog.csdn.net/m0_63122857/article/details/121784032

版权

今天是单列布局和多列布局的简单练习多的不说上代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="div.css">
</head>
<body>
    <hr color="#000">
    <div class="a1">头部</div>
    <div class="a2">主体</div>
    <div class="a3">底部</div>
</body>
</html>

这是单列布局的代码然后下面是多列布局的代码

 <link rel="stylesheet" href="css/table.css">
</head>
<body>
  <div class="a1">
    <p class="z1">logo</p>
    <p class="z2">某某摄影专辑</p>
    <p class="z3">网站首页</p>
    <p class="z3">咨询中心</p>
    <p class="z3">产品展示</p>
    <p class="z3">关于我们</p>
    <p class="z3">联系我们</p>
  </div>
  <div class="a2"><img src="images/banner.jpg" width="1130px" height="300px"></div>
  <div class="a4"><b class="z4">当前位置：首页>关于我们</b></div>
  <hr width="1130px" color="#000" size="2px" style="float: left;margin-left: 10px;">
  <div class="a3">
    <img src="images/01.jpg" class="t1" align="left" width="300px" height="150px">
    <a style="font-size: 19px;">水墨（风格）摄影和传统的水墨画一样，现市面上出现的水墨摄影作品，按题材，可以分为风景和花鸟，对应国画中的山水画和花鸟画；按手法和意境，可以分为抽象和具象，对应国画中的写意和工笔。水墨风格的摄影照片虽然免不了使用Photoshop等软件的后期加工，但是这并不意味着可以任意扭曲原照片。全息摄影是指一种记录被摄物体反射波的振幅和位相等全部信息的新型摄影技术。普通摄影是记录物体面上的光强分布，它不能记录物体反射光的位相信息，因而失去了立体感。全息摄影采用激光作为照明光源，并将光源发出的光分为两束，一束直接射向感光片，另一束经被摄物的反射后再射向感光片。人眼直接去看这种感光的底片，只能看到像指纹一样的干涉条纹，但如果用激光去照射它，人眼透过底片就能看到原来被拍摄物体完全相同的三维立体像。一张全息摄影图片即使只剩下一小部分，依然可以重现全部景物。全息摄影可应用于工业上进行无损探伤，超声全息，全息显微镜，息摄影存储器,全息电影和电视等许多方面。</a>
  </div>
</body>

这是多列布局需要用到的样式定义

.a1{
    width: 360px;
    height: 600px;
    background-color: lightskyblue;
    float: left;
}
.a2{
    width: 1130px;
    height: 300px;
    float: left;
    margin-left: 10px;
    margin-bottom: 10px;
}
.a3{
    width: 1130px;
    height: 250px;
    float: left;
    margin-left: 10px;
}
.a4{
    width: 1130px;
    height: 30px;
    float: left;
}
.z1{
    font-size: 100px;
    text-align: center;
    margin: 0;
    padding: 0;
    color: white;
}
.z2{
    text-align: center;
    margin: 0;
    padding: 0;
    color: white;
    margin-top: 10px;
    margin-bottom: 100px;
}
.z3{
    margin-left: 120px;
    font-weight: bold;
}
.z4{
    margin: 0;
    padding: 0;
    margin-left: 20px;
    font-weight: bold;
}

最终的成品就是首页的样子

还未迟暮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多列布局和单列布局的练习

今天是单列布局和多列布局的简单练习多的不说上代码<html lang="en"><head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="div.css"></head><body> <hr color="#000"> <div class="a1"&g
复制链接

扫一扫