【html】简单网页模板源码

大家每一次在写网页的时候会不会因为布局而困扰今天就给大家带来一个我自己亲自编写的网页的基本的模板大家可以直接去利用,大家也可以利用自己的想法去做空间的美化和完善。

源码:

html:

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/default-style.css"></head><body><div class="container"><header>XXX官网</header><nav><ul><li><a href="#">导航项</a></li><li><a href="#">导航项</a></li><li><a href="#">导航项</a></li><li><a href="#">导航项</a></li><li><a href="#">导航项</a></li><li><a href="#">导航项</a></li></ul></nav><main><!-- <div class="sidebar">左侧边栏</div> --><!-- 使用时开启 --><div class="content">网页主体</div><!-- <div class="sidebar">右侧边栏</div> --><!-- 使用时开启 --></main><footer>版权信息</footer></div></body>
</html>

css:

* {margin: 0;padding: 0;
}body {margin: 0;padding: 0;font-family: Arial, sans-serif;
}.container {width: 100%;display: flex;flex-direction: column;height: 100vh;
}header {background-color: #000;color: #fff;padding: 10px;text-align: center;
}main {display: flex;flex: 1;
}.sidebar {flex: 1;background-color: #f5f5f5;padding: 20px;}.content {flex: 3;padding: 20px;
}footer {background-color: #000;color: #fff;text-align: center;padding: 10px;
}ul {max-width: 1000px;display: flex;margin: auto;display: flex;justify-content: center;
}ul li {margin-left: 50px;list-style-type: none;list-style-position: inside;height: 40px;line-height: 40px;
}ul li a {text-decoration: none;
}

代码中的左右侧边栏可根据需要打开 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/26287.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

flask基础3-蓝图-cookie-钩函数-flask上下文-异常处理

目录 一&#xff1a;蓝图 1.蓝图介绍 2.使用步骤 3.蓝图中的静态资源和模板 二.cookie和session 1.cookie 2.flask中操作cookie 3.session 4.session操作步骤 三.请求钩子 四.flask上下文 1.介绍 2.请求上下文&#xff1a; 3.应用上下文 3.g对象 五&#xff1a;…

【Linux】进程控制2——进程等待(waitwaitpid)

1. 进程等待必要性 我们知道&#xff0c;子进程退出&#xff0c;父进程如果不管不顾&#xff0c;就可能造成"僵尸进程”的问题&#xff0c;进而造成内存泄漏。另外&#xff0c;进程一旦变成僵尸状态&#xff0c;那就刀枪不入&#xff0c;“杀人不眨眼”的kill -9 也无能为…

香港户口需要什么条件?有学历要求吗?最新香港落户途径详解!

香港户口需要什么条件&#xff1f;有学历要求吗&#xff1f;最新香港落户途径详解&#xff01; 由于香港放开“落户”窗口&#xff0c;想去香港发展或者想拿香港身份的朋友都想抓住这个机会赶紧申请。 只是&#xff0c;香港户口办理是有条件的&#xff0c;而且有学历要求&…

2024年上海高考作文题目(ChatGPT版)

一、2024年6月7日上海高考作文题目 生活中&#xff0c;人们常用认可度判别事物&#xff0c;区分高下。请写一篇文章&#xff0c;谈谈你对“认可度”的认识和思考。 要求&#xff1a;&#xff08;1&#xff09;自拟题目&#xff1b;&#xff08;2&#xff09;不少于800字。 二、…

Judging LLM-as-a-Judge with MT-Bench and Chatbot Arena阅读笔记

使用 MT-Bench 和 Chatbot Arena 评估 LLM 作为评审的效果 Lianmin Zheng1∗ Wei-Lin Chiang1∗ Ying Sheng4∗ Siyuan Zhuang1 Zhanghao Wu1 Yonghao Zhuang3 Zi Lin2 Zhuohan Li1 Dacheng Li13 Eric P. Xing35 Hao Zhang12 Joseph E. Gonzalez1 Ion Stoica1 1 UC Berkele…

VScode中连接并使用docker容器

前提条件&#xff1a; 1.在windows下安装Docker Desktop(方法可见下面的教程) Docker Desktop 安装使用教程-CSDN博客 2.在vscode安装3个必备的插件 3.先在ubuntu中把docker构建然后运行 4.打开vscode&#xff0c;按下图顺序操作 调试好之后上传到git上&#xff0c;然后后面…

《人人都是产品经理》笔记1:什么是产品?怎么入行?

《人人都是产品经理》笔记1&#xff1a;什么是产品&#xff1f;怎么入行&#xff1f; 产品是什么&#xff1f;产品经理、产品管理&#xff1f;真的想做产品经理吗&#xff1f;全书结构示意图 从写这篇文章开始&#xff0c;是个人第二次对该书进行阅读&#xff0c;在此进行个人的…

[Python学习篇] Python输入

关键字 input 语法&#xff1a;input("提示信息") 特点 当程序执行到input&#xff0c;等待用户输入&#xff0c;输入完成之后才能继续向下执行。input接收用户输入后&#xff0c;一般存储到变量中&#xff0c;方便使用。input会把接收到的任意用户输入的数据都当做…

老杨说运维 | 基于数据驱动的智观能力建设(文末附现场视频)

本期回顾来自擎创科技创始人兼CEO杨辰的现场演讲 青城山脚下的滔滔江水奔涌而过&#xff0c;承载着擎创一往无前的势头&#xff0c;共同去向未来。2024年6月&#xff0c;双态IT成都用户大会擎创科技“数智化可观测赋能双态运维”专场迎来了完满的收尾。 “没有2200年前李冰率众…

Java集合自测题

文章目录 一、说说 List , Set , Map 三者的区别&#xff1f;二、List , Set , Map 在 Java 中分别由哪些对应的实现类&#xff1f;底层的数据结构&#xff1f;三、有哪些集合是线程不安全的&#xff1f;怎么解决呢&#xff1f;四、HashMap 查询&#xff0c;删除的时间复杂度五…

word怎么单页横向设置(页码不连续版)

打开word&#xff0c;将光标放在第一页的最后位置。 然后点击布局下的分隔符&#xff0c;选择下一页。 将光标放在第二页的开头&#xff0c;点击布局下的纸张方向&#xff0c;选择横向即可。 效果展示。 PS&#xff1a;如果那一页夹在两页中间&#xff0c;那么在…

Python发送Outlook邮件的步骤流程有哪些?

Python发送Outlook邮件的技巧&#xff1f;如何使用Python发信&#xff1f; 在Python中使用SMTP协议发送邮件到Outlook邮箱是一项常见的任务。AokSend将介绍如何通过Python编程语言实现这一过程&#xff0c;从准备工作到实际发送邮件的具体步骤。 Python发送Outlook邮件&#…

构建汛期智慧水利新生态:EasyCVR视频汇聚监控综合管理方案解析

一、项目背景与目标 随着我国水利事业的不断发展&#xff0c;水利设施的管理与维护工作愈发重要。随着夏季汛期的到来&#xff0c;水利管理工作面临着巨大的挑战。为确保水利设施的安全运行&#xff0c;及时应对可能出现的汛情&#xff0c;建设一套高效、智能的视频监控可视化…

wms海外仓系统排名分析:哪个才更适合中小海外仓

对中小型海外仓来说&#xff0c;想在竞争激烈的市场下生存&#xff0c;关键就在于是否能改变自己落后的仓储管理模式&#xff0c;提升客户满意度和业务流畅度。 wms海外仓系统作为这一领域的关键工具&#xff0c;可以说在很大程度上决定了海外仓的业务标准化程度发展。不过现在…

MFC为什么说文档在数据的保存和给用户提供数据之间划分了清晰的界限?

MFC MFC&#xff08;Microsoft Foundation Classes&#xff09;是微软为Windows应用程序开发提供的一套C类库&#xff0c;它在设计上强调了"文档-视图"&#xff08;Document-View&#xff09;架构。这种架构将文档&#xff08;Document&#xff09;与用户界面&#…

六西格玛培训都培训哪些内容 ?

天行健六西格玛培训的内容通常涵盖多个方面&#xff0c;旨在帮助学员全面理解和应用六西格玛管理方法。以下是详细的培训内容概述&#xff1a; 一、六西格玛基础知识 引入六西格玛的概念、原理和历史&#xff0c;包括DMAIC&#xff08;定义、测量、分析、改进、控制&#xff0…

辗转相除法求最大公约数

辗转相除法求最大公约数 两个整数的最大公约数是能够同时整除它们的最大的正整数。辗转相除法基于如下原理&#xff1a;两个整数的最大公约数等于其中较小的数和两数相除余数的最大公约数。 点我跳转参考链接 算法实现&#xff1a; int gcd(int a, int b) {return b 0 ? a …

新需求:实现一个自动运维部署工具

如何构建一个高效、可靠的自动运维部署工具&#xff0c;以下是具体的需求情况&#xff0c;希望有朋友可以指点一下&#xff0c;有报酬的哦&#xff01; 一、项目描述 本项目旨在构建一个端到端的自动化运维部署解决方案&#xff0c;整合SpringBoot后端服务、Vue3前端应用、Do…

方法分享 |公网IP怎么指定非433端口实现https访问

公网IP可以通过指定非443端口实现HTTPS访问。在网络配置中&#xff0c;虽然HTTPS协议默认使用443端口&#xff0c;但没有规定不能在其他端口上实施HTTPS服务。使用非标准端口进行HTTPS通信需要正确配置服务器和SSL证书&#xff0c;并确保客户端能够连接到指定的端口。下面说明如…

本地生活服务电商平台小程序源码系统 含完整的安装代码包+搭建教程

系统概述 本地生活服务电商平台小程序源码系统&#xff0c;是一款集成了商品展示、在线交易、服务预约、优惠券发放、会员管理、订单处理、即时通讯等多种功能于一体的综合性解决方案。它旨在为本地商家提供一个高效、便捷的线上经营平台&#xff0c;同时为消费者带来流畅的使…