html制作企业官网

最新推荐文章于 2026-05-04 06:04:22 发布

原创

最新推荐文章于 2026-05-04 06:04:22 发布 · 3.3k 阅读

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

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;</