手搓前端day1

断断续续的学了些前端,今天开始写写代码,就当是记录一下自己前端的成长过程

效果:

写了点css,实现了简单的前端页面的跳转

文件目录

代码如下:

styles.css

body{margin: 0;padding: 0;}header{background-color: black;color: white;/* display: flex; */margin: 0;padding: 0;}section{background-color: white;color: black;/* display: flex; */margin: 0;padding: 30px;display: flex;/* flex-direction: row; */}div{background-color: rgb(87, 86, 86);color: white;margin: auto;width: 100px;}footer{background-color: black;color: white;padding: 20px;}li{/* background: rgb(122, 117, 117); *//* margin: 0; */padding: 0;/* display: inline-block; *//* margin: 0 20px 0 0; */margin-right: 20px;}ul{list-style-type: none;margin: 0;padding: 0;display: flex;flex-direction: row;}

index.html 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>skl练习</title><link rel="stylesheet" href="styles.css"></head><body><header><nav><ul><li><a href="index.html">Now</a></li><li><a href="Trommer.html">Trommer</a></li><li><a href="Fiture.html">Fiture</a></li></ul></nav><h1>skl练习</h1></header><section><div>a</div><div>b</div><div>c</div>
</section>
<section>section2</section>
<footer>footer</footer></body>
</html>

Trommer.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>skl练习</title><link rel="stylesheet" href="styles.css">
</head><body><header><nav><ul><li><a href="index.html">Now</a></li><li><a href="Trommer.html">Trommer</a></li><li><a href="Fiture.html">Fiture</a></li></ul></nav><h1>Trommer Page</h1></header><section><div>a</div><div>b</div><div>c</div>
</section>
<section>section2</section>
<footer>footer</footer></body>
</html>

Fiture.html 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>skl练习</title>
<link rel="stylesheet" href="styles.css">
</head><body ><header><nav><ul><li><a href="index.html">Now</a></li><li><a href="Trommer.html">Trommer</a></li><li><a href="Fiture.html">Fiture</a></li></ul></nav><h1>Fiture </h1></header><section><div>a</div><div>b</div><div>c</div>
</section>
<section>section2</section>
<footer>footer</footer></body>
</html>

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

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

相关文章

系统服务综合作业

首先配置自动挂载 服务器的/rhce 自动挂载在客服端的/nfs/rhce 首先在服务器进行配置 dnf install nfs-utils -y [rootlocalhost ~]# vim /etc/exports [rootlocalhost ~]# firewall-cmd --permanent --add-servicenfs success [rootlocalhost ~]# firewall-cmd --permanen…

常见的嵌入式软件体系结构

本文介绍常见的嵌入式软件体系结构。 在嵌入式开发过程中&#xff0c;尤其是MCU为主控的项目开发中&#xff0c;实时性是需要考虑的重要因素&#xff0c;本文介绍常见的2种嵌入式软件体系结构&#xff0c;并对其优缺点作简要分析&#xff0c;另外&#xff0c;还对它们的软件层…

食物链之带权并查集解法

直接看题&#xff1a;https://www.acwing.com/problem/content/description/242/ 下面就是代码的实现了&#xff0c;因为自己与自己肯定是同类我们初始化为0. 下面是AC代码&#xff1a; #include<bits/stdc.h> using namespace std; int n,k; int fk,x,y; int fa[10001…

【Python实战因果推断】29_倾向分9

目录 Outcome Is Easy to Model Generalized Propensity Score for Continuous Treatment Outcome Is Easy to Model 在下一个简单而又能说明问题的例子中&#xff0c;复杂性在于 而不是 。注意 中的非线性&#xff0c;而结果函数是简单的线性。在这里&#xff0c;真正的 A…

【操作系统】进程管理——调度算法(个人笔记)

学习日期&#xff1a;2024.7.4 内容摘要&#xff1a;各种调度算法的思想、规则、优缺点介绍 为什么要有调度算法&#xff1f; 调度算法就好比一群人在银行办理业务&#xff0c;准备办理业务的人就是进程/作业&#xff0c;银行窗口的工作人员就是CPU&#xff0c;进程往往是比C…

xcode配置swift使用自定义主题颜色或者使用RGB或者HEX颜色

要想在xcode中使用自定义颜色或者配置主题色&#xff0c;需要在Assets中配置&#xff0c;打开Assets文件&#xff0c;然后点击添加Color Set&#xff1a; 输入颜色的名称&#xff0c;然后选中这个颜色&#xff0c;会出现两个颜色&#xff1a; Any Appearance表示亮色模式下使用…

评估测试用例有效性 5个方面

评估测试用例的有效性是确保软件测试活动能够达到预期目标的关键步骤&#xff0c;有助于测试团队优化测试计划&#xff0c;提高测试效率&#xff0c;减少返工&#xff0c;节省成本。如果缺乏对测试用例的有效性评估&#xff0c;可能会导致测试用例无法覆盖关键功能点&#xff0…

SpringCloud代码实战

项目结构 实例实现功能:实现通过id查询用户的订单信息 OrderCommon&#xff1a;公共的一些模块类型&#xff0c;此处为一个user对象 Eureka-Service:配置Eureka的启动类&#xff0c;服务端 Order-Service:提供查询功能的服务端 Order-Client:查询的客户端 OrderCommon代码…

智汇园区:为园区企业注入前沿技术与人才活力

在日新月异的时代浪潮中&#xff0c;树莓集团深知人才是企业发展的核心驱动力&#xff0c;更是推动产业升级与创新的关键要素。因此&#xff0c;我们致力于构建全方位的人才引进与培养体系&#xff0c;为园区企业输送源源不断的前沿技术与人才支持。 【人才引进&#xff1a;汇聚…

私活必备框架!终于找到一个前后端都有的后台管理系统了~

大家好&#xff0c;我是「程序视点」爱分享的小二哥~ 今天介绍一个新的Vue后台管理框架&#xff0c;相比其他后台功能丰富管理系统&#xff0c;这个后台管理系统可以用干净简洁来形容——Nova-admin Nova-admin Nova-admin 是一个基于Vue3、Vite5等最新技术的后台管理平台。用…

Selenium 中的 JUnit 注解

JUnit 是一个基于 Java 的开源框架&#xff0c;可帮助测试人员执行单元测试。JUnit 主要用于测试应用程序的每个单元或组件&#xff0c;例如类和方法。它有助于编写和运行可重复的自动化测试&#xff0c;以确保项目代码按预期运行。还可以使用 JUnit 执行 Selenium 自动化测试用…

【ESP32】打造全网最强esp-idf基础教程——16.SmartConfig一键配网

SmartConfig一键配网 一、SmartConfig知识扫盲 在讲STA课程的时候&#xff0c;我们用的是代码里面固定的SSID和密码去连接热点&#xff0c;但实际应用中不可能这么弄&#xff0c;我们得有办法把家里的WiFi SSID和密码输入到设备里面去&#xff0c;对于带屏带输入设备还…

视频共享交换平台LntonCVS视频监控平台智慧加油站安全管理方案

加油站作为危化品行业的一部分&#xff0c;日常的加油和卸油作业安全至关重要。目前国内加油站的管理主要依赖于人为管控、监控摄像头和人工巡检&#xff0c;这些方法存在效率低下和反应滞后的问题。为了有效应对安全风险&#xff0c;急需引入人工智能、物联网和大数据技术&…

UE5 本地化多语言方案

导入插件&#xff1a; https://www.unrealengine.com/marketplace/zh-CN/product/07e1d9bd9ced444c9b2a7e232161f74d​www.unrealengine.com/marketplace/zh-CN/product/07e1d9bd9ced444c9b2a7e232161f74d 打开测试关卡 打开插件下图目录&#xff0c;csv文件可以添加多个&…

网络编程:各协议头(数据报格式)

一、mac头 二、ip头 protocol——tcp/udp &#xff08;7&#xff09;TTL——生存时间 三、tcp头 四、udp头

校园外卖系统带万字文档在线外卖管理系统java项目java课程设计java毕业设计

文章目录 校园外卖系统一、项目演示二、项目介绍三、万字项目文档四、部分功能截图五、部分代码展示六、底部获取项目源码带万字文档&#xff08;9.9&#xffe5;带走&#xff09; 校园外卖系统 一、项目演示 校园外卖服务系统 二、项目介绍 语言&#xff1a;java 数据库&…

【fastadmin 开发实战】select 级联选择

先看实现的效果 1、表单页面实现级联选择 2、级联选项后台可以编辑添加 前端代码&#xff08;编辑窗口&#xff09;&#xff1a; <div class"form-group"><label class"control-label col-xs-12 col-sm-2">{:__(渠道归属)}:</label><…

力扣 双指针基础

class Solution {public void moveZeroes(int[] nums) {int l 0;//慢指针但先走for (int r 0; r < nums.length; r) {//快指针&#xff0c;遍历次数if (nums[r] 0) continue;//l比r先到&#xff0c;在此处定住l&#xff0c;r继续移动int t nums[l];nums[l] nums[r];num…

防火墙基础实验配置

一&#xff0c;实验拓扑 二&#xff0c;实验需求&#xff1a; 1.DMZ区内的服务器&#xff0c;办公区仅能在办公时间内&#xff08;9&#xff1a;00 - 18&#xff1a;00&#xff09;可以访问&#xff0c;生产区的设备全天可以访问 2.生产区不允许访问互联网&#xff0c;办公区…

外贸展示型网站设计

清洁能源风能设备wordpress外贸公司模板 风能设备wordpress外贸公司模板&#xff0c;做新能源网通设备的公司网站模板。 https://www.jianzhanpress.com/?p3606 钢材wordpress外贸公司模板 金属钢材wordpress外贸公司模板&#xff0c;做金属成品贸易公司的企业网站模板。 …