HTML网页布局与样式设计-CSDN博客

本文链接：https://blog.csdn.net/XRTONY/article/details/115166082
在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;
			}
			
			.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: relative;
				margin: 5px;
				padding: 5px;
				display: flex;
				justify-content: center;
				opacity: 0.8;
				overflow: auto;
				
			}
			
			.side-leader ul{
				list-style-type: 0;
				margin: 0;
				padding: 0;
				width: 7%;
				height: 100%;
				background-color:white ;
				box-shadow: 0px 0px 1px 0px #888888;
				position:fixed;
				overflow: auto;
				border-radius: 25px;
				
				
				
			}
			
			.side-leader ul li a{
				display: block;
				color:#000;
				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: 25%;
			  background-color: #f1f1f1;
			  padding-left: 20px;
			}
			
			/* 伪图像 */
			.fakeimg {
			  /*background-color: #aaa;*/
			  width: 852px;
			  background: url(img/6.jpg);
			  box-shadow:1px 3px 15px 1px #888888 ;
			  
			 
			  padding: 20px;
			}
			
			/* 为文章添加卡片效果 */
			.card {
			  background-color: white;
			  padding: 20px;
			  margin-top: 20px;
			  /*box-shadow: 0px 0px 1px 0px #888888;*/
			}
			/* 清除列之后的浮动 */
			.row:after {
			  content: "";
			  display: table;
			  clear: both;
			}
			
			/* 页脚 */
			.footer {
			  padding: 20px;
			  text-align: center;
			  background: #ddd;
			  margin-top: 20px;
			}
		</style>
		<title>XR官网</title>
	</head>
	
	
	<body>
		
		<div class=" clearfix shadow_box">
			<img class="img1"   src="img/4.png"   width=100px height=100px/>
			
		</div>
		<div class="sticky  ">
			<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>
			<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>
		<div class="">
			<div class="leftcolumn">
				<p></p>
			</div>
			<div class="midcolumn">
				<div class="card">
					<h2>星锐科技</h2>
					<h5>科技造就未来</h5>
					<div class="fakeimg" style="height:300px;"></div>
				</div>
			</div>
			
		</div>
		
		<!--<div class="row">
		  
		  <div class="leftcolumn">
		  	<p></p>
		  	
		  </div>
		  <div class="midcolumn">
		    <div class="card">
		      <h2>TITLE HEADING</h2>
		      <h5>Title description, Dec 7, 2017</h5>
		      <div class="fakeimg" style="height:200px;">Image</div>
		      <p>Some text..</p>
		      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
		    </div>
		    <div class="card">
		      <h2>TITLE HEADING</h2>
		      <h5>Title description, Sep 2, 2017</h5>
		      <div class="fakeimg" style="height:200px;">Image</div>
		      <p>Some text..</p>
		      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
		    </div>
		  </div>
		  <div class="rightcolumn">
		    <div class="card">
		      <h2>About Me</h2>
		      <div class="fakeimg" style="height:100px;">Image</div>
		      <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
		    </div>
		    <div class="card">
		      <h3>Popular Post</h3>
		      <div class="fakeimg"><p>Image</p></div>
		      <div class="fakeimg"><p>Image</p></div>
		      <div class="fakeimg"><p>Image</p></div>
		    </div>
		    <div class="card">
		      <h3>Follow Me</h3>
		      <p>Some text..</p>
		    </div>
		  </div>
		</div>
		
		<div class="footer">
		  <h2>Footer</h2>
		</div>-->

		
	</body>
</html>