前端web常用的基础案例

 html案例:

<!DOCTYPE html>
<html>
<head><title>My Website</title>
</head>
<body><header><h1>Welcome to My Website</h1><nav><ul><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Services</a></li><li><a href="#">Contact</a></li></ul></nav></header><main><section><h2>About Me</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel enim ante. Nullam eget nibh nec mauris consectetur eleifend. Aenean suscipit enim et turpis elementum, et auctor neque faucibus. Maecenas tristique, dolor in consectetur luctus, leo risus rhoncus libero, sed mollis dolor orci a purus.</p></section><section><h2>My Services</h2><ul><li>Web Design</li><li>Graphic Design</li><li>SEO</li><li>Social Media Marketing</li></ul></section></main><footer><p>&copy; 2021 My Website. All rights reserved.</p></footer>
</body>
</html>

未渲染效果:

css案例:

<!DOCTYPE html>
<html>
<head><title>My Website</title><style>body {font-family: Arial, sans-serif;background-color: #f0f0f0;}header {background-color: #333;color: #fff;padding: 20px;text-align: center;}nav ul {list-style: none;margin: 0;padding: 0;display: flex;justify-content: center;}nav li {margin: 0 10px;}nav a {color: #fff;text-decoration: none;font-weight: bold;}main section {background-color: #fff;padding: 20px;margin: 20px;box-shadow: 0px 3px 6px #00000029;}main h2 {color: #333;font-size: 24px;margin-bottom: 10px;}main ul {list-style: none;margin: 0;padding: 0;}main li {padding: 10px;border-bottom: 1px solid #ccc;}footer {background-color: #333;color: #fff;padding: 10px;text-align: center;position: absolute;bottom: 0;width: 100%;}</style>
</head>
<body><header><h1>Welcome to My Website</h1><nav><ul><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Services</a></li><li><a href="#">Contact</a></li></ul></nav></header><main><section><h2>About Me</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel enim ante. Nullam eget nibh nec mauris consectetur eleifend. Aenean suscipit enim et turpis elementum, et auctor neque faucibus. Maecenas tristique, dolor in consectetur luctus, leo risus rhoncus libero, sed mollis dolor orci a purus.</p></section><section><h2>My Services</h2><ul><li>Web Design</li><li>Graphic Design</li><li>SEO</li><li>Social Media Marketing</li></ul></section></main><footer><p>&copy; 2021 My Website. All rights reserved.</p></footer>
</body>
</html>

 效果:

<!DOCTYPE html>
<html>
<head><title>My Website</title><style>body {font-family: Arial, sans-serif;background-color: #f0f0f0;}header {background-color: #333;color: #fff;padding: 20px;text-align: center;}nav ul {list-style: none;margin: 0;padding: 0;display: flex;justify-content: center;}nav li {margin: 0 10px;}nav a {color: #fff;text-decoration: none;font-weight: bold;}main section {background-color: #fff;padding: 20px;margin: 20px;box-shadow: 0px 3px 6px #00000029;}main h2 {color: #333;font-size: 24px;margin-bottom: 10px;}main ul {list-style: none;margin: 0;padding: 0;}main li {padding: 10px;border-bottom: 1px solid #ccc;}footer {background-color: #333;color: #fff;padding: 10px;text-align: center;position: absolute;bottom: 0;width: 100%;}</style><script>window.onload = function() {var links = document.getElementsByTagName("a");for (var i = 0; i < links.length; i++) {links[i].addEventListener("click", function(event) {event.preventDefault();alert("You clicked a link!");});}}</script>
</head>
<body><header><h1>Welcome to My Website</h1><nav><ul><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Services</a></li><li><a href="#">Contact</a></li></ul></nav></header><main><section><h2>About Me</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel enim ante. Nullam eget nibh nec mauris consectetur eleifend. Aenean suscipit enim et turpis elementum, et auctor neque faucibus. Maecenas tristique, dolor in consectetur luctus, leo risus rhoncus libero, sed mollis dolor orci a purus.</p></section><section><h2>My Services</h2><ul><li>Web Design</li><li>Graphic Design</li><li>SEO</li><li>Social Media Marketing</li></ul></section></main><footer><p>&copy; 2021 My Website. All rights reserved.</p></footer>
</body>
</html>

 加上js

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

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

相关文章

阿里云效自动构建python自动测试脚本

之前一直用的是jenkins自动构建自动化脚本&#xff0c;因为现在的公司统一在阿里云效的流水线上做代码的管理&#xff0c;构建&#xff0c;要求自动化测试也在上面自动构建&#xff0c;故而学习了一下。为自己做一个记录&#xff0c;也给有需要的朋友做一个参考。 1. 新建流水…

Mysql备份恢复、与日志管理

Mysql日志管理、备份与恢复 一、Mysql日志管理1.1、日志分类1.1.1、错误日志1.1.2 、通用查询日志1.1.3、 二进制日志1.1.4 、慢查询日志1.1.5 、配置日志 1.2、日志的查询 二、备份与恢复2.1、 数据备份的必要性2.2 、造成数据丢失的原因2.3、 数据库备份的分类2.3.1、 物理备…

python 正则表达式

一、特殊字符-需要转义 eg&#xff1a;转义符&#xff1a; 待匹配的字符串&#xff1a;lr的值&#xff0c;及下图中字符串lr[和字符串&#xff0c;之间的数据 正则写法&#xff1a; learning_rate re.findall(".*lr\[(.*?), *", content) 处理结果&#xff1a;…

OpenCV实现模板匹配和霍夫线检测,霍夫圆检测

一&#xff0c;模板匹配 1.1代码实现 import cv2 as cv import numpy as np import matplotlib.pyplot as plt from pylab import mplmpl.rcParams[font.sans-serif] [SimHei]#图像和模板的读取 img cv.imread("cat.png") template cv.imread(r"E:\All_in\o…

Learn Prompt- Midjourney Prompt:Prompt 提示语

基础结构​ 一个基本的提示可以简单到一个单词、短语或表情符号。非常短的提示将在很大程度上依赖于 Midjourney 的默认样式。 完整 prompt&#xff1a;可以包括一个或多个图像链接、多个文本短语或单词&#xff0c;以及一个或多个后缀参数 Image Prompts: 可以将图像 URL 添加…

github代码提交过程详细介绍

1、下载github上面的代码 &#xff08;1&#xff09;在github网站上&#xff0c;找到想要下载的代码仓库界面&#xff0c;点击Code选项就可以看到仓库的git下载地址&#xff1b; &#xff08;2&#xff09;使用命令下载&#xff1a;git clone 地址&#xff1b; 2、配置本地git…

中国制造让苹果跪服,将再增加一家中国高科技供应商

日前产业链人士指出由于京东方的OLED面板有力地制衡韩国面板厂商三星和LGD&#xff0c;促使他们降价&#xff0c;而且技术也不错&#xff0c;因此正计划再引入一家中国OLED面板厂商&#xff0c;以进一步促进OLED面板的竞争。 早期苹果的OLED面板完全由三星供应&#xff0c;由此…

什么是AI问答机器人?它的应用场景有哪些?

近年来&#xff0c;由于技术的进步和对个性化客户体验的需求不断增长&#xff0c;AI问答机器人也是获得了巨大的关注。AI问答机器人&#xff0c;也被称为AI聊天机器人&#xff0c;是一种旨在模拟人类对话并通过基于文本或语音的界面与用户交互的计算机程序。其能够自动执行各种…

Java-day17(反射)

Reflection(反射) 动态语言的关键 允许程序在执行期借助于Reflection API取得任何类的内部信息&#xff0c;并能直接操作任意对象的内部属性及方法提供的功能: 在运行时判断任意一个对象所属类 在运行时构造任意一个类的对象 在运行时判断任意一个类所具有的成员变量和方法 在…

分享从零开始学习网络设备配置--任务3.7 使用动态路由RIPv2实现网络连通

任务描述 某公司随着规模的不断扩大&#xff0c;路由器的数量开始有所增加。网络管理员发现原有的静态路由已经不适合现在的公司&#xff0c;实施动态路由RIPv2协议配置&#xff0c;实现网络中所有主机之间互相通信。 在路由器较多的网络环境中&#xff0c;手工配置静态路由…

回归预测 | MATLAB实现基于RF-Adaboost随机森林结合AdaBoost多输入单输出回归预测

回归预测 | MATLAB实现基于RF-Adaboost随机森林结合AdaBoost多输入单输出回归预测 目录 回归预测 | MATLAB实现基于RF-Adaboost随机森林结合AdaBoost多输入单输出回归预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 1.MATLAB实现基于RF-Adaboost随机森林结合…

云安全之访问控制介绍

访问控制技术背景 信息系统自身的复杂性、网络的广泛可接入性等因素&#xff0c;系统面临日益增多的安全威胁&#xff0c;安全问题日益突出&#xff0c;其中一个重要的问题是如何有效地保护系统的资源不被窃取和破坏。 访问控制技术内容包括访问控制策略、访问控制模型、访问…

力扣26:删除有序数组中的重复项

26. 删除有序数组中的重复项 - 力扣&#xff08;LeetCode&#xff09; 题目&#xff1a; 给你一个 非严格递增排列 的数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使每个元素 只出现一次 &#xff0c;返回删除后数组的新长度。元素的 相对顺序 应该保持 …

混合Rollup:探秘 Metis、Fraxchain、Aztec、Miden和Ola

1. 引言 混合Rollup为新的以太坊L2扩容方案&#xff0c;其分为2大类&#xff1a; 将乐观与ZK技术结合的混合Rollup同时支持公开智能合约 和 私人智能合约 的混合Rollup 本文将重点关注Metis、Fraxchain、Aztec、Miden和Ola这五大项目。 2. 何为混合Rollup&#xff1f; 混合…

el-table实现穿梭功能

第一种 <template><el-row :gutter"20"><el-col :span"10"><!-- 搜索 --><div class"search-bg"><YcSearchInput title"手机号" v-model"search.phone" /><div class"search-s…

Spring面试题21:说一说Spring的@Required注解和@Qualifier注解

该文章专注于面试,面试只要回答关键点即可,不需要对框架有非常深入的回答,如果你想应付面试,是足够了,抓住关键点 面试官:说一说Spring的@Required注解 @Required ,用于标记在注入的属性上。它表示被注解的属性在配置 Bean 的时候是必需的,如果没有正确配置,则会抛出…

C# OpenCvSharp 基于直线检测的文本图像倾斜校正

效果 项目 代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using OpenCvSharp;namespace OpenCvSharp_基于直线检测的文…

一文了解亚马逊云科技适用于 Amazon Lightsail 的托管数据库

Amazon Lightsail 是亚马逊云科技提供的一种易上手使用、月度价格经济实惠&#xff0c;并包括了计算实例、容器、存储、数据库的虚拟专用服务器。在创建时可以进行业务蓝图选择&#xff0c;可选择包含多种操作系统&#xff08;Linux/Windows 等&#xff09;或操作系统加上典型应…

深入剖析Redis系列- Redis数据结构之哈希

1.11.5哈希类型(hash) Redis的hash 是一个string类型的key和value的映射表&#xff0c;这里的value是一系列的键值对&#xff0c;hash特别适合用于存储对象。 哈希类型的数据操作总的思想是通过key和field操作value&#xff0c;key是数据标识&#xff0c;field是域&#xff0c;…

“全景江西·南昌专场”数字技术应用场景发布会 | 万广明市长莅临拓世集团展位,一览AIGC科技魅力

随着数字技术的迅猛发展&#xff0c;传统产业正在发生深刻的变革&#xff0c;新兴产业蓬勃兴起。但要想实现数字经济超常规发展&#xff0c;就要在数字产业化上培育新优势&#xff0c;大力实施数字经济核心产业提速行动&#xff0c;加快推进“一核三基地”建设。在这个数字经济…