用html做完整网页效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
* {
box-sizing: border-box;
}
body{
margin: 0;
font-family: Arial;
padding: 10px;
background: #f1f1f1;
}
.clearfix {
overflow: auto;
}
.shadow_box{
box-shadow: 0px 3px 10px 1px #888888;
}
.up-leader {
background-color: #333;
list-style-type: none;
text-align: center;
position:sticky;
margin: 0;
padding: 0;
border-radius: 10px;
}
.up-leader li:not(.dropdown) {
display: inline-block;
font-size: 20px;
padding: 20px;
}
.up-leader li a, .dropbtn{
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.up-leader li.dropdown{
display: inline-block;
font-size: 20px;
padding: 20px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
div.dropdown-content a {
color:#000000;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display:block;
}
div.sticky{
position: sticky;
top: 0;
background:azure;
text-align: center;
}
.img1{
float:left;
clear:both;
position:static;
display: flex;
justify-content: center;
opacity: 0.8;
overflow: auto;
}
.side-leader ul{
list-style-type: 0;
margin-top: 10px;
padding: 0;
width: 7%;
height: 170%;
background-color:#333 ;
box-shadow: 0px 0px 1px 0px #888888;
position:absolute;
overflow: auto;
border-radius: 25px;
float: left;
z-index: 4;
}
.side-leader ul li a{
display: block;
color:white;
padding: 8px 16px;
text-decoration: none;
font-family:"黑体";
}
li:hover{
background-color: #555;
color: white;
}
.leftcolumn{
float: left;
width: 8%;
}
.midcolumn {
float: left;
width: 50%;
}
.rightcolumn {
float: left;
width: 42%;
background-color: #f1f1f1;
padding-left: 20px;
}
.avercolumn{
float: left;
width: 50%;
background-color: #f1f1f1;
}
.aver_column{
float: left;
width: 49%;
background-color: #f1f1f1;
margin-left: 1%;
}
.aver2column{
float: left;
width: 68%;
background-color: #f1f1f1;
}
.aver3column{
margin-left: 2%;
width: 27%;
background-color: #f1f1f1;
padding-left: 20px;
box-shadow:2px 2px 10px 0px #888888 ;
display: inline-block;
}
.fakeimg1 {
width: 852px;
background: url(img/6.jpg);
box-shadow:1px 3px 15px 1px #888888 ;
padding: 20px;
}
.fakeimg2{
background: url(img/5.jpg);
box-shadow:1px 3px 15px 1px #888888 ;
}
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.footer {
margin: 20%;
text-align: center;
background: white;
}
</style>
<title>XR官网</title>
</head>
<body>
<div class=" clearfix shadow_box">
<a href="#1">
<img class="img1" src="img/下载.jpg" width=1920px height=900px>
</a>
</div>
<div class="sticky" >
<a name="1" >
<ul class="up-leader" >
<li><a href="https://blog.csdn.net/XRTONY?spm=1000.2115.3001.5343" >Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="https://blog.csdn.net/XRTONY?spm=1000.2115.3001.5343">Contact</a></li>
<li class="dropdown">
<a class="dropbtn" href="index.html">Our World</a>
<div class="dropdown-content">
<a href="https://blog.csdn.net/XRTONY?spm=1000.2115.3001.5343">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
</a>
</div>
<div class=" side-leader ">
<ul >
<li><a href="https://blog.csdn.net/XRTONY?spm=1000.2115.3001.5343">核心科技</a></li>
<li><a href="index.html">党政板块</a></li>
<li><a href="index.html">经营情况</a></li>
<li><a href="index.html">未来发展</a></li>
<li><a href="index.html">联系我们</a></li>
</ul>
</div>
<div style="">
<div class="leftcolumn">
<p></p>
</div>
<div class="midcolumn">
<div class="card">
<h2>星锐科技</h2>
<h5>科技造就未来</h5>
<div class="fakeimg1" style="height:300px;"></div>
</div>
<div class="avercolumn card">
<h2>星锐科技</h2>
<h5>科技造就未来</h5>
<div class="fakeimg2" style="height:300px;"></div>
</div>
<div class="aver_column card">
<h2>星锐科技</h2>
<h5>科技造就未来</h5>
<div class="fakeimg2" style="height:300px;"></div>
</div>
<div class="card" style="float: left;width: 100%; margin-top: 1%;height: 100%;margin-right: 1%;">
<video width=100% height=100% controls="controls" >
<source src="/i/movie.ogg" type="video/ogg" />
<source src="img/Europa Universalis IV 2021-03-02 10-03-59_Trim.mp4" type="video/mp4" />
<source src="/i/movie.webm" type="video/webm" />
<object data="/i/movie.mp4" width="320" height="240">
<embed width=100% height=100% src="img/Europa Universalis IV 2021-03-02 10-03-59_Trim.mp4" />
</object>
</video>
</div>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>星锐科技</h2>
<h5>科技造就未来</h5>
<div class="fakeimg2" style="height:300px;"></div>
</div>
<div class="aver2column card">
<h2>星锐科技</h2>
<h5>科技造就未来</h5>
<div class="fakeimg2" style="height:300px;"></div>
</div>
<div class="aver2column card" style="">
<img src="img/u=1814211770,2732480941&fm=26&gp=0.jpg "style="height:100%;widows: 100%;"/>
</div>
<div class="aver3column card" style="height: 1000px; ">
<h2>星锐科技</h2>
<h5>科技造就未来</h5>
<div class="fakeimg2" style="height:300px;"></div>
</div>
</div>
</div>
<div style="padding-bottom: 1000px;">
<p>
</p>
</div>
</div>
</body>
</html>