dedecms网站主页头部模板
时间 : 2023-12-30 23:26:03 声明： : 文章内容来自网络，不保证准确性，请自行甄别信息有效性
最佳答案
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>网站名称</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<header class="header">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">LOGO</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">关于我们</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
产品与服务
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">产品1</a>
<a class="dropdown-item" href="#">产品2</a>
<a class="dropdown-item" href="#">产品3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">新闻动态</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">联系我们</a>
</li>
</ul>
</div>
</nav>
</div>
</header>
<div class="banner">
<div class="container">
<h1>欢迎来到网站名称</h1>
<p>专注于提供高质量的产品与服务
<a href="#" class="btn btn-primary">了解更多</a>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
以上是一个基本的dedecms网站主页头部模板。在这个模板中，我们使用了HTML和Bootstrap框架来创建响应式的页面布局。在头部部分，我们包含了网站的LOGO和导航菜单。导航菜单中包含了首页、关于我们、产品与服务、新闻动态和联系我们等选项。下面的横幅部分用于展示网站的主要信息和一个“了解更多”的按钮。
你可以根据自己的需要进行修改和扩展，添加更多导航菜单选项和内容。同时，你需要引入自己的CSS和JavaScript文件来美化和添加功能。希望这个模板对你有所帮助！
其他答案
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DEDECMS 网站主页</title>
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
</head>
<body>
<header>
<nav>
<div class="container">
<div class="logo">
<a href="index.html"><img src="images/logo.png" alt="网站logo"></a>
</div>
<div class="menu">
<ul>
<li class="active"><a href="index.html">首页</a></li>
<li><a href="about.html">关于我们</a></li>
<li><a href="services.html">服务</a></li>
<li><a href="portfolio.html">作品</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</nav>
<div class="container">
<div class="hero">
<h1>Welcome to our website</h1>
<p>We provide professional web design services
<a href="services.html" class="btn btn-primary">了解更多</a>
</div>
</div>
</header>
<section class="features">
<div class="container">
<h2>Our Features</h2>
<div class="feature-item">
<img src="images/feature1.png" alt="Feature Image">
<h3>Responsive Design</h3>
<p>Our websites are fully responsive and compatible with all devices.
</div>
<div class="feature-item">
<img src="images/feature2.png" alt="Feature Image">
<h3>User Friendly</h3>
<p>We create intuitive user interfaces for an enhanced user experience.
</div>
<div class="feature-item">
<img src="images/feature3.png" alt="Feature Image">
<h3>SEO Optimization</h3>
<p>We optimize websites for search engines to improve visibility and rankings.
</div>
</div>
</section>
<section class="service-section">
<div class="container">
<h2>Our Services</h2>
<div class="service-item">
<img src="images/service1.png" alt="Service Image">
<h3>Web Design</h3>
<p>We create stunning and functional websites to meet your business needs.
</div>
<div class="service-item">
<img src="images/service2.png" alt="Service Image">
<h3>E-commerce</h3>
<p>We design and develop e-commerce websites to help sell your products online.
</div>
<div class="service-item">
<img src="images/service3.png" alt="Service Image">
<h3>Website Maintenance</h3>
<p>We offer website maintenance services to keep your website running smoothly.
</div>
</div>
</section>
<section class="portfolio-section">
<div class="container">
<h2>Our Portfolio</h2>
<div class="portfolio-item">
<img src="images/portfolio1.png" alt="Portfolio Image">
</div>
<div class="portfolio-item">
<img src="images/portfolio2.png" alt="Portfolio Image">
</div>
<div class="portfolio-item">
<img src="images/portfolio3.png" alt="Portfolio Image">
</div>
</div>
</section>
<footer>
<div class="container">
<div class="footer-logo">
<a href="index.html"><img src="images/logo.png" alt="网站logo"></a>
</div>
<div class="footer-menu">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="about.html">关于我们</a></li>
<li><a href="services.html">服务</a></li>
<li><a href="portfolio.html">作品</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</div>
<div class="footer-info">
<p>地址：XXX市XXX区XXX街道XXX号
<p>电话：123-456-7890
<p>Email：info@example.com
</div>
<div class="clearfix"></div>
<div class="copy-right">
<p>版权所有 © 2022 网站名称
</div>
</div>
</footer>
</body>
</html>
上一篇
dedecms 百度结构化数据
下一篇
宝塔面板看不到数据库列表
https/SSL证书广告优选IDC>>
推荐主题模板更多>>
推荐文章
