手搓前端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.rhkb.cn/news/375307.html

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

相关文章

Linux系统密码重置

实验环境&#xff1a; Centos 7.9 背景&#xff1a; 找回root用户密码 1、首先&#xff0c;启动Linux系统进入开机界面&#xff0c;在界面中快速点击‘e’进入编辑界面&#xff0c;如图&#xff1a; 2、进入编辑界面会后往下翻找到“Linux16”内容所在的行数&#xff0c;在&q…

暑假第一次作业

第一步&#xff1a;给R1,R2,R3,R4配IP [R1-GigabitEthernet0/0/0]ip address 192.168.1.1 24 [R1-Serial4/0/0]ip address 15.0.0.1 24 [R2-GigabitEthernet0/0/0]ip address 192.168.2.1 24 [R2-Serial4/0/0]ip address 25.0.0.1 24 [R3-GigabitEthernet0/0/0]ip address 192.…

基于复旦微V7 690T FPGA +ARM/海光X86+AI的全国产化数据采集人工智能平台

国产化FPGA&#xff1a;JFM7VX690T80主机接口&#xff1a;PCIe Gen3 x88Gbps/lane光纤通道&#xff1a;前面板4路SFP光纤&#xff0c;后面板1路QSFP光纤2组独立的DDR3 SDRAM 缓存&#xff0c;工作时钟频率800MHz2个FMC接口扩展&#xff1a;每个支持16路GTH&#xff0c;线速率10…

【React Native优质开源项目】

&#x1f308;个人主页: 程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…

智能汽车网络安全笔记

汽车五大域 动力底盘、车身控制、智能座舱、智能网联和高级辅助驾驶五大域 国外汽车安全法规标准 汽车网络安全管理体系&#xff08;CSMS&#xff09; CSMS指的是管理汽车的网络威胁和风险&#xff0c;并保护车辆免受网络攻击的组织过程和管理系统 安全验证和安全测试 8…

一键运行 ComfyUI SD3!大规模医学 VQA 评测数据集上线,涉及超 20 个人体器官和部位

为了进一步推进 AI4S 的普适化&#xff0c;HyperAI超神经策划了「Meet AI4S」系列直播栏目。第一期直播将于 7 月 17 日 19:00 准时上线&#xff01; 我们邀请到了浙江大学遥感与地理信息系统博士生丁佳乐&#xff0c;他的分享主题为「神经网络为房价的空间异质性提供新解释」&…

C++——类和对象(上)

文章目录 一、类的定义1.类定义格式2.访问限定符3.类域 二、实例化1.实例化概念2.对象⼤⼩ 三、 this指针 一、类的定义 1.类定义格式 与定义结构体类似 class ST {//成员变量int val;//成员函数void print(){cout << val << endl;}};class为定义类的关键字&…

【深度学习基础】环境搭建 linux系统下安装pytorch

目录 一、anaconda 安装二、创建pytorch1. 创建pytorch环境&#xff1a;2. 激活环境3. 下载安装pytorch包4. 检查是否安装成功 一、anaconda 安装 具体的安装说明可以参考我的另外一篇文章【环境搭建】Linux报错bash: conda: command not found… 二、创建pytorch 1. 创建py…

(8)揭示Python编程精髓:深潜继承与多态的奇幻之旅

目录 1. 命名空间与作用域1.1 命名空间概述1.2 作用域1.2.1 局部作用域1.2.2 全局作用域1.2.3 修改全局变量1.2.4 嵌套作用域 2. 继承3. 多态&#xff08;Polymorphism&#xff09; 1. 命名空间与作用域 1.1 命名空间概述 命名空间是一个从名字到对象的映射&#xff0c;它在P…

Data-Juicer:阿里巴巴荣誉出品的大模型数据清洗框架

Diffusion Models专栏文章汇总:入门与实战 前言:如何优雅地进行大规模数据清洗是一门艺术,特别对于大模型,数据的质量是决定模型成功最关键的因素之一。阿里巴巴最近开源了一项专门针对大语言模型和视频生成大模型的数据清洗框架,值得关注! 目录 主要特点 数据处理 分…

通过 tomcat 让手机访问到电脑写的 html 网页

之前实现的 html 小项目只能在自己的电脑上展示&#xff0c;如果要在其他电脑或者在手机上就看不到网页了 想要在手机上访问自己写的网页&#xff0c;我们可以借助 tomcat 首先我们可以从官网下载 tomcat 官网链接&#xff1a;apache官网 我们拉到最底部&#xff0c;找到 a…

【观成科技】Websocket协议代理隧道加密流量分析与检测

Websocket协议代理隧道加密流量简介 攻防场景下&#xff0c;Websocket协议常被用于代理隧道的搭建&#xff0c;攻击者企图通过Websocket协议来绕过网络限制&#xff0c;搭建一个低延迟、双向实时数据传输的隧道。当前&#xff0c;主流的支持Websocket通信代理的工具有&#xf…

详细谈谈负载均衡的startupProbe探针、livenessProbe探针、readnessProbe探针如何使用以及使用差异化

文章目录 startupProbe探针startupProbe说明示例配置参数解释 使用场景说明实例——要求&#xff1a; 容器在8秒内完成启动&#xff0c;否则杀死对应容器工作流程说明timeoutSeconds: 和 periodSeconds: 参数顺序说明 livenessProbe探针livenessProbe说明示例配置参数解释 使用…

centos9+mysql8.0下mycat1.6部署

#创作灵感# 整理一下mysql代理技术&#xff0c;这个当时是和mysql集群部署一个项目的&#xff0c;一并整理出来供参考。 1、环境准备 此处使用的为M-M-SS双主双从结构集群&#xff0c;集群部署方法放在我的上一篇文章中 防火墙可以使用firewall-cmd放行&#xff0c;演示环境…

Linux /etc/profile 详解

概述 Linux是一个多用户的操作系统。每个用户登录系统后&#xff0c;都会有一个专用的运行环境。通常每个用户默认的环境都是相同的&#xff0c;这个默认环境实际上就是一组环境变量的定义。用户可以对自己的运行环境进行定制&#xff0c;其方法就是修改相应的系统环境变量&…

化繁为简!新一代 Anybus 网关为何简单易用?

为什么易用性很重要&#xff1f; 产品的易用性一直至关重要&#xff0c;它直接影响用户满意度和市场接受度。近年来&#xff0c;随着自动化设备数量的迅速增长&#xff0c;自动化工程师的工作量大幅增加&#xff0c;使得用户对易用性的要求日益提高。 自动化工程师面临的主要…

BGP第二日

上图为今日所用拓扑 &#xff0c;其中R1和R4&#xff0c;R3和R5为EBGP邻居&#xff0c;R1和R3为IBGP邻居&#xff0c;AS200区域做OSPF动态路由 一.BGP建立邻居的六种状态 1.idle 空闲状态&#xff1a;建立邻居最初的状态 2.Connect 连接状态&#xff1a;在…

解决GPT-4o耗电难题!DeepMind新算法训练效率提升13倍,能耗降低10倍!

目录 01 有更好的解决方案吗&#xff1f; 02 从“超级batch”中筛选数据 03 技术介绍 04 实验结果 生成可学习batch 谷歌DeepMind推出的新算法JEST&#xff0c;将LLM训练的迭代次数减少了13倍&#xff0c;计算量降低了10倍&#xff0c;有望重塑AI未来。GPT-4o早已成为耗能…

linux 0.11 中的重要的全局变量

通过对全局变量的了解&#xff0c;也有助于了解整个代码的逻辑。就跟学习类一样&#xff0c;了解类有哪些成员变量&#xff0c;也有助于了解类的成员函数的功能。 &#xff08;1&#xff09;内存初始化相关 static u_char mem_map [ PAGING_PAGES ] { 0 , } .本数组对 1M 以外…

数据结构 —— BellmanFord算法

数据结构 —— BellmanFord算法 BellmanFord算法检测负权值环BellmanFord和Dijkstra思想上的区别Dijkstra算法的思想Bellman-Ford算法的思想思想上的对比 我们今天来看一个算法BellmanFord算法&#xff0c;我们之前的Dijkstra算法只能用来解决正权图的单源最短路径问题。 Bell…