【HTML】多列布局_html多选列表布局-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_64557527/article/details/125546276

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#father{
width: 100%;
zoom: 1;
overflow: hidden;
}
#father>div{
float: left;
margin-right: 20px;
}
#box1{
height: 450px;
width: 200px;
background-color: darkgrey;
}
.id{
text-align: center;

}
li{
list-style: none;
}
li a{
text-decoration: none;
color: black;
font-size: 22px;
}
#box2{
width: 800px;
height: 4500px;
}
.text {border-top: solid gray;}

.pn {float:left; margin:0 5px 5px 0;}
.t1{
font-size: 50px;
color: #fff;
}
.t2{
font-size: 5px;
color: white;
}
.st{
color: black;
text-decoration: none;
}
</style>
</head>
<body>
<div id="father">
<div id="box1">
<div class="id">
<p class="t1" style="line-height:1px">logo</p>
<p class="t2" style="line-height:1px">某某摄影专辑</p>
<br>
<br>
<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>
</div>
</div>
<div id="box2">
<img src="素材\QQ图片20220623115005.png">
<p >
当前位置:<a class="st" href="#">首页</a>><a class="st" href="#">关于我们</a>
</p>
<p class="text">
<img class="pn" src="素材\QQ图片20220623122424.jpg" align:left hspace="2" vspace="2" >
水墨(风格)摄影和传统的水墨画一样,现市面上出现的水墨摄影作品，按题材，可以分为风景和花鸟，对应国画中的山水画和花鸟画;按手法和意境，可以分为抽象和具象，对应国画中的写意和工笔。水墨风格的摄影照片虽然免不了使用Photoshop等软件的后期加工,但是这并不意味着可以任意扭曲原照片。全息摄影是指一种记录被摄物体反射波的振幅和位相等全部信息的新型摄影技术。普通摄影是记录物体面上的光强分布，它不能记录物体反射光的位相.信息，因而失去了立体感。全息摄影采用激光作为照明光源，并将光源发出的光分为两束，-束直接射向感光片,另一束经被摄物的反射后再射向感光片。人眼直接去看这种感光的底片,只能看到像指纹一样的干涉条纹，但如果用激光去照射它，人眼透过底片就能看到原来被拍摄物体完全相同的三维立体像。一张全息摄影图片即使只剩下一小部分，依然可以重现全部景物。全息摄影可应用于工业上进行无损探伤，超声全息，全息显微镜,全息摄影存储器，全息电影和电视等许多方面。
</p>
</div>
</div>
</body>
</html>