当前位置： 首页 > news >正文

【html】简单网页模板源码

news 2026/3/28 4:03:58

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

源码：

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

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

相关文章：

【html】简单网页模板源码

大家每一次在写网页的时候会不会因为布局而困扰今天就给大家带来一个我自己亲自编写的网页的基本的模板大家可以直接去利用&#xff0c;大家也可以利用自己的想法去做空间的美化和完善。 源码&#xff1a; html: <!DOCTYPE html> <html lang"zh"><…...

编程日记 2024/6/12 10:08:57

借助Historian Connector + TDengine，打造工业创新底座

在工业自动化的领域中&#xff0c;数据的采集、存储和分析是实现高效决策和操作的基石。AVEVA Historian (原 Wonderware Historian) 作为领先的工业实时数据库&#xff0c;专注于收集和存储高保真度的历史工艺数据。与此同时&#xff0c;TDengine 作为一款专为时序数据打造的高…...

编程日记 2024/6/12 10:07:56

51单片机-实机演示（LED点阵）

目录 前言: 一.线位置 二.扩展 三.总结 前言: 这是一篇关于51单片机实机LED点阵的插线图和代码说明.另外还有一篇我写的仿真的连接在这:http://t.csdnimg.cn/ZNLCl,欢迎大家的点赞,评论,关注. 一.线位置 接线实机图. 引脚位置注意: 1. *-* P00->RE8 P01->RE7 …...

编程日记 2024/6/12 10:06:54

STM32硬件接口I2C应用（基于MP6050）

目录 概述 1 STM32Cube控制配置I2C 1.1 I2C参数配置 1.2 使用STM32Cube产生工程 2 HAL库函数介绍 2.1 初始化函数 2.2 写数据函数 2.3 读数据函数 3 认识MP6050 3.1 MP6050功能介绍 3.2 加速计测量寄存器 ​编辑3.3 温度计量寄存器 3.4 陀螺仪测量寄存器 4 MP60…...

编程日记 2024/6/12 10:04:52

基于JSP的贝儿米幼儿教育管理系统

开头语&#xff1a; 你好呀&#xff0c;我是计算机学长猫哥&#xff01;如果您对本系统感兴趣或者有相关需求&#xff0c;文末可以找到我的联系方式。 开发语言&#xff1a; Java 数据库&#xff1a; MySQL 技术&#xff1a; JSP技术 工具&#xff1a; IDEA/Eclipse、…...

编程日记 2024/6/12 10:02:50

数字化与文化交融，树莓集团助力园区文化升级

树莓集团在产业园运营领域建设了特色空间布局&#xff0c;包括产业实训基地、产业办公中心、业务资源平台、产学研中心、数字资产空间、双创孵化空间、产业实验室和人才项目转化中心等八大板块&#xff0c;共同构建了一个全面而深入的产业支撑体系&#xff0c;为园区文化建设提…...

编程日记 2024/6/12 10:01:49

【原创课程】如何制作安装板

具体步骤如下： 第一步：新建页类型为“安装板布局图（交互式）”并修改页描述为“安装板布局图”。 第二步：新建安装板 第三步：设置图纸上符号元件的部件，双击符号，弹出常规设备窗口，点击部件进行选择 第四步：打开2D安装板导航器，将图纸中的设备拖拽到安装板上 第五步…...

编程日记 2024/6/12 10:00:47

简单聊聊【java.util.Stream】，更新中

public class Main {public static void main(String[] args) {List<Integer> numbers Arrays.asList(1, 2, 3, 4, 5, 6); // 原始容器&#xff1a;java.util.Arrays.ArrayList#ArrayList// 创建一个 Stream&#xff0c;过滤出偶数&#xff0c;并打印它们numbers.str…...

编程日记 2024/6/12 9:58:45

GIS之arcgis系列07：conda环境下安装arcpy环境

首先将python27环境下的“Desktop10.8.pth”拷贝到anaconda环境下。 路径如下&#xff08;仅参考&#xff09;&#xff1a; C:\Python27\ArcGIS10.8\Lib\site-packages\Desktop10.8.pth D:\Anaconda\Lib\site-packages 在anaconda prompt中穿创建一个新环境 conda create -…...

编程日记 2024/6/12 9:57:44

容器运行nslookup提示bash: nslookup: command not found【笔记】

在容器中提示bash: nslookup: command not found&#xff0c;表示容器中没有安装nslookup命令。 可以通过以下命令安装nslookup&#xff1a; 对于基于Debian/Ubuntu的容器&#xff0c;使用以下命令&#xff1a; apt-get update apt-get install -y dnsutils对于基于CentOS/R…...

编程日记 2024/6/12 9:56:43

解析 Spring 框架中的三种 BeanName 生成策略

在 Spring 框架中&#xff0c;定义 Bean 时不一定需要指定名称&#xff0c;Spring 会智能生成默认名称。本文将介绍 Spring 的三种 BeanName 生成器&#xff0c;包括在 XML 配置、Java 注解和组件扫描中使用的情况&#xff0c;并解释它们如何自动创建和管理 Bean 名称。 1. Be…...

编程日记 2024/6/12 9:54:40

细说ARM MCU的串口接收数据的实现过程

目录 一、硬件及工程 1、硬件 2、软件目的 3、创建.ioc工程 二、 代码修改 1、串口初始化函数MX_USART2_UART_Init() &#xff08;1&#xff09;MX_USART2_UART_Init()串口参数初始化函数 &#xff08;2&#xff09;HAL_UART_MspInit()串口功能模块初始化函数 2、串口…...

编程日记 2024/6/12 9:51:37

000-基于sklearn的机器学习入门：工作环境搭建与配置

本专栏将介绍基于Scikit-learn(简称sklearn)的机器学习入门知识。包括但不一定限于&#xff0c;机器学习基本知识、sklearn库简介&#xff0c;基于Sklearn库的机器学习实践。 这是本专栏的第000篇&#xff0c;将介绍如何安装和配置sklearn环境&#xff0c;不仅包括Sklearn库的…...

编程日记 2024/6/12 9:50:35

就业班 第四阶段（k8s） 2401--6.5 day3 Yaml语法解析+钩子函数

Yaml语法解析 今天学的都是在pod里面操作的 格式 这个文件要创建的资源对象是什么 kind: Pod 这个资源对象所在的api版本是什么 apiVersion: v1 元数据 metadata: 对这个pod中的镜像的描述 spec&#xff1a; 字典无序 同一级可以调换顺序 &#xff1a;比如kind和apiVersion …...

编程日记 2024/6/12 9:49:34

电脑开机出现英文字母，如何解决这个常见问题？

电脑开机时出现英文字母的情况通常意味着系统在启动过程中遇到了问题。这些英文字母可能是错误信息、系统提示或BIOS设置问题。通过理解这些信息并采取适当的措施&#xff0c;您可以解决大多数启动问题。本文将介绍三种解决电脑开机出现英文字母问题的方法&#xff0c;帮助您恢…...

编程日记 2024/6/12 9:48:33

一张试卷

目录 问题 1: 1.时间 题目描述1 输入1 输出1 样例输入1 样例输出1 提示1 代码1 问题 2: 超酷的电话号码 题目描述2 输入2 输出2 样例输入2 样例输出2 提示2 代码2 问题 3:3.爸爸的数学题 题目描述3 输入3 输出3 样例输入3 样例输出3 提示3 代码3 问题 4: 4. 营养膳食 题目描述4…...

编程日记 2024/6/12 9:47:32

记一次 .NET某游戏币自助机后端 内存暴涨分析

一&#xff1a;背景 1. 讲故事 前些天有位朋友找到我&#xff0c;说他们的程序内存会偶发性暴涨&#xff0c;自己分析了下是非托管内存问题&#xff0c;让我帮忙看下怎么回事&#xff1f;哈哈&#xff0c;看到这个dump我还是非常有兴趣的&#xff0c;居然还有这种游戏币自助机…...

编程日记 2024/6/12 9:46:31

计算机考研｜哪些985/211院校不歧视双非二本生？

说句残酷的话&#xff0c;能对某一专业做出贡献&#xff0c;那么你的水平肯定是很高的。如果普通学生&#xff0c;普通本科的话可能很难做到这一点。这也是现在考研风气比较强的原因&#xff0c;一部分专业能力不突出的学生来选择深造3年。 对于基础较差想要考计算机研究生的同…...

编程日记 2024/6/12 9:45:30

Spring Boot：简化 Java 应用开发的艺术

Spring Boot 是一种用于快速开发、运行和管理 Java 应用程序的开源框架。它简化了基于 Spring 的应用程序的配置和部署&#xff0c;使得开发者能够更加专注于业务逻辑的实现。本文将介绍 Spring Boot 的核心特性、优势以及如何在项目中使用 Spring Boot。 一、核心特性 自动配…...

编程日记 2024/6/12 9:44:29

elasticsearch安装与使用(2)-基于term匹配的简单搜索引擎搭建

把一篇pdf论文解析后&#xff0c;放入es数据库中&#xff0c;建立倒排索引表&#xff0c;并实现简单搜索。 1、pdf论文解析(英文) 安装pdf解析包 pip install pdfminer.sixdef extract_text_from_pdf(filename, page_numbersNone, min_line_length1):从pdf文件中提取文字:pa…...

编程日记 2024/6/12 9:43:28

避坑指南：Ollama部署DeepSeek-R1时，如何安全地开放API端口给内网其他服务调用？

深度解析&#xff1a;Ollama部署DeepSeek-R1时内网API安全开放实战 当你在一台Linux服务器上成功部署了Ollama和DeepSeek-R1模型后&#xff0c;下一步自然是想让内网中的其他服务也能调用这个强大的AI能力。但直接开放端口就像把家门钥匙插在锁上——方便但危险。本文将带你深入…...

编程新知 2026/3/28 2:53:11

Win11Debloat实战指南：3步彻底清理Windows 11系统臃肿

Win11Debloat实战指南&#xff1a;3步彻底清理Windows 11系统臃肿 【免费下载链接】Win11Debloat 一个简单的PowerShell脚本&#xff0c;用于从Windows中移除预装的无用软件&#xff0c;禁用遥测&#xff0c;从Windows搜索中移除Bing&#xff0c;以及执行各种其他更改以简化和改…...

编程新知 2026/3/28 2:43:06

避坑指南：.NET MAUI页面跳转最常见的5个坑点及解决方案（2023最新版）

.NET MAUI页面导航避坑实战&#xff1a;5个高频问题与工业级解决方案 刚接触.NET MAUI的开发者常会在页面跳转环节踩坑——传参莫名丢失、导航堆栈突然崩溃、模态窗口关闭失效...这些问题往往消耗大量调试时间。本文将结合GitHub高星issue和StackOverflow热帖&#xff0c;拆解5…...

编程新知 2026/3/28 2:39:05

岗亭厂家直销：揭秘源头工厂如何帮你省下30%采购成本

在2026年1月的今天&#xff0c;户外岗亭作为城市管理、社区安防及商业服务的关键节点&#xff0c;其市场需求持续增长。然而&#xff0c;行业在快速发展的同时&#xff0c;也暴露出一些亟待解决的技术与成本挑战。从技术层面看&#xff0c;传统岗亭产品普遍面临结构稳定性不足、…...

编程新知 2026/3/28 1:52:04

2026年必看：专业婚恋软件推荐，找到真爱不迷路

在当今快节奏的社会中&#xff0c;越来越多的高知青年面临着交友难、脱单难的问题。传统的社交方式往往难以满足他们对高质量伴侣的需求&#xff0c;而专业的婚恋软件则成为他们寻找真爱的重要途径。本文将重点推荐一款备受好评的婚恋软件——即恋App&#xff0c;并结合具体数据…...

编程新知 2026/3/28 1:48:04

语音播报实时

目录 GPT-SoVITS&#xff08;强烈推荐&#xff09; Fish Speech-1.5 GPT-SoVITS&#xff08;强烈推荐&#xff09; RVC-Boss/GPT-SoVITS: 1 min voice data can also be used to train a good TTS model! (few shot voice cloning) Fish Speech-1.5 追求极致流畅的实时对话&a…...

编程新知 2026/3/28 1:19:39

PLCopen运动控制功能块实战：从单轴控制到多轴联动的5个经典案例解析

PLCopen运动控制功能块实战&#xff1a;从单轴控制到多轴联动的5个经典案例解析 在工业自动化领域&#xff0c;精确的运动控制是实现高效生产的关键。无论是简单的传送带定位&#xff0c;还是复杂的多轴协同作业&#xff0c;PLCopen规范提供的标准化功能块都能为工程师提供强大…...

编程新知 2026/3/28 0:03:11

MacOS开发环境配置：OpenClaw+GLM-4.7-Flash联调指南

MacOS开发环境配置&#xff1a;OpenClawGLM-4.7-Flash联调指南 1. 为什么选择这个组合&#xff1f; 去年我在做一个自动化文档处理项目时&#xff0c;发现市面上的AI工具要么隐私性不足&#xff0c;要么灵活性太差。直到偶然接触到OpenClaw这个开源框架&#xff0c;才找到了理…...

编程新知 2026/3/27 21:19:48

告别SIFT/ORB！用LoFTR+Transformer搞定低纹理场景的图片匹配（附Python实战代码）

低纹理场景图像匹配实战&#xff1a;LoFTR与Transformer的革新应用 在计算机视觉领域&#xff0c;图像特征匹配一直是三维重建、视觉定位等任务的基础环节。传统方法如SIFT、ORB依赖于特征检测器提取关键点&#xff0c;但在低纹理、重复图案或运动模糊场景中表现往往不尽如人意…...

编程新知 2026/3/27 21:05:44

遗传算法 TWVRP 运筹优化调度 混合整数规划 带时间窗多车的物流配送路径优化 贵有贵的道理...

遗传算法 TWVRP 运筹优化调度 混合整数规划 带时间窗多车的物流配送路径优化 贵有贵的道理&#xff0c;代码质量高&#xff0c;有中文注释 只有修改表格中数据即可生成想要的配送路径上周点奶茶发现骑手绕了远路还差点超时&#xff0c;突然就想起之前折腾过的带时间窗多车配送路…...

编程新知 2026/3/27 20:37:37