html制作企业官网

最新推荐文章于 2024-06-16 23:55:38 发布

い风花の雪栎

最新推荐文章于 2024-06-16 23:55:38 发布

阅读量3.1k

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/XRTONY/article/details/115151607

版权

HTML 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

本文档提供了一个HTML代码示例，展示了如何创建一个带有固定顶部导航栏、侧边栏和主要内容区域的企业官网布局。代码中包含了样式设计，如阴影效果、浮动元素、固定定位以及响应式设计等元素，适合前端开发者参考学习。

摘要由CSDN通过智能技术生成

html制作企业官网

文章目录

html制作企业官网

在这里插入图片描述

效果图显示。

在这里插入图片描述

首先给出代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style>
			* {
			  box-sizing: border-box;
			}
			
			body{
				margin: 0;
			}
			.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:#AAAAAA ;
				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: 7%;
				
			}
			.midcolumn {   
			  float: left;
			  width: 68%;
			}
			
			/* 右列 */
			.rightcolumn {
			  float: left;
			  width: 25%;
			  background-color: #f1f1f1;
			  padding-left: 20px;
			}
			
			/* 伪图像 */
			.fakeimg {
			  background-color: #aaa;
			  width: 100%;
			  padding: 20px;
			}
			
			/* 为文章添加卡片效果 */
			.card {
			  background-color: white;
			  padding: 20px;
			  margin-top: 20px;
			}
			/* 清除列之后的浮动 */
			.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="#home">Home</a></li>
			  <li><a href="#news">News</a></li>
			  <li><a href="#contact">Contact</a></li>
			  <li class="dropdown">
			  	<a class="dropbtn" href="index.html">Our World</a>
			  	 <div class="dropdown-content">
			        <a href="#">Link 1</a>
			      	<a href="#">Link 2</a>
			      	<a href="#">Link 3</a>
			    </div>
			  </li>
			</ul>
			<div class=" side-leader ">
			<ul >
				<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>
				<li><a href="index.html">联系我们</a></li>
			</ul>
		  </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>

就展示到这里。

い风花の雪栎

关注

1
点赞
踩
24

收藏

觉得还不错? 一键收藏
打赏
0
评论
html制作企业官网

html制作企业官网文章目录html制作企业官网效果图显示。首先给出代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <style> * { box-sizing: border-box; } body{ margin: 0; } .clearfix { overflow: auto;
复制链接

扫一扫