这个博客分别展示了两个不同的页面设计。第一个是多列布局的网页设计，包含了一个左侧固定宽度的导航栏，中间的大图展示区域以及底部的文字介绍。第二个设计则是移动端的UI界面，包括一个视频播放器、点赞、评论和分享图标，以及底部的导航菜单。内容提到了全息摄影技术和一些电影信息。
<!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>多列布局</title>
<style>
#a {
width: 260px;
height: 630px;
background-color: rgb(94, 110, 126);
float: left;
}
#b {
width: 1130px;
height: 300px;
float: left;
margin-left: 10px;
margin-bottom: 10px;
}
#c {
width: 1130px;
height: 250px;
float: left;
margin-left: 10px;
}
#d {
width: 1130px;
height: 30px;
float: left;
}
#e {
font-size: 100px;
text-align: center;
margin: 0;
padding: 0;
color: white;
}
#f {
text-align: center;
margin: 0;
padding: 0;
color: white;
margin-top: 10px;
margin-bottom: 100px;
}
#g {
margin-left: 100px;
font-weight: bold;
}
#h {
margin: 0;
padding: 0;
margin-left: 20px;
font-weight: bold;
}
#i {
width: 1130px;
height: 300px;
}
#j {
width: 1130px;
color: #000;
size: 2px;
float: left;
margin-left: 10px;
}
#k {
float: left;
width: 270px;
height: 180px;
}
#l {
position: relative;
left: 10px;
line-height: 30px;
}
li{
margin: 50px;
list-style: none;
}
li a{
font-size: 15px;
text-decoration: none;color: black;
}
</style>
</head>
<body>
<div id="a">
<p id="e">logo</p>
<p id="f">某某摄影</p>
<ul>
<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>
</div>
<div id="b">
<img src="./imgs/banner.jpg" id="i">
</div>
<div id="d"><b id="h">当前位置：首页>关于我们</b></div>
<hr id="j">
<div id="c">
<img src="./imgs/01.jpg" id="k">
<a
id="l">水墨（风格）摄影和传统的水墨画一样，现市面上出现的水墨摄影作品，按题材，可以分为风景和花鸟，对应国画中的山水画和花鸟画；按手法和意境，可以分为抽象和具象，对应国画中的写意和工笔。水墨风格的摄影照片虽然免不了使用Photoshop等软件的后期加工，但是这并不意味着可以任意扭曲原照片。全息摄影是指一种记录被摄物体反射波的振幅和位相等全部信息的新型摄影技术。普通摄影是记录物体面上的光强分布，它不能记录物体反射光的位相信息，因而失去了立体感。全息摄影采用激光作为照明光源，并将光源发出的光分为两束，一束直接射向感光片，另一束经被摄物的反射后再射向感光片。人眼直接去看这种感光的底片，只能看到像指纹一样的干涉条纹，但如果用激光去照射它，人眼透过底片就能看到原来被拍摄物体完全相同的三维立体像。一张全息摄影图片即使只剩下一小部分，依然可以重现全部景物。全息摄影可应用于工业上进行无损探伤，超声全息，全息显微镜，息摄影存储器,全息电影和电视等许多方面。</a>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh">
<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>
<link rel="stylesheet" href=".//douyin/iconfont.css">
<style>
body{
background-color: black;
}
#font{
font-size: 10px;
color: white;
padding-left: 180px;
}
.font_1{
font-size: 10px;
color: white;
}
.font_2{
font-size: 15px;
color: white;
margin-top: -375px;
}
.font_3{
font-size: 15px;
color: white;
}
.font_4{
font-size: 15px;
color: white;
}
.font_5{
font-size: 15px;
color: white;
margin-bottom: 230px;
}
.box1{
width: 400px;
height: 400px;
}
i{
color: white;
}
.box2{
margin-top: 1000px;
}
img{
width: 30px;
}
li{
margin: 20px;
list-style: none;
float: left;
}
li a{
font-size: 15px;
text-decoration: none;color: white;
}
</style>
</head>
<body style="padding-left: 700px;">
<div id="font" >关注 | 推荐 | 附近</div>
<div >
<video class="box1" src="./video/1.mp4" controls ></video>
</div>
<i class="iconfont icon-star" ></i> <br>
<i class="iconfont icon-comment"></i><br>
<i class="iconfont icon-share"></i>
<div class="font_1">
@淘气的猫
<br><br>《古惑仔》是最佳拍档电影公司出品的香港黑帮题材系列电影，正传电影由刘伟强执导，
<br>郑伊健、陈小春等主演
<br>@烟台融媒创作的原创原声-烟台传媒<br>
<br><br></br>
<x></x>
</div>
</div>
<ul >
<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>
</body>
</html>
934
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
