前端入门:HTML+CSS

引言:

前端三大件:HTML、CSS、JS,每一个部分都很重要,我听过比较形象的比喻就是HTML(HYPER TEXT MARKUP LANGUAGE)相当于骨架,而CSS就是装饰渲染,JS则是动作功能实现。

之前的文章我已经讲过HTML,这篇文章我将讲解HTML和CSS的案例。

网页开发:

我开发出来的网页如图所示:比较简单。

很显然,很像一个读小说的网站。当然如果有好的审美,可以自己添加代码,进行修饰。

开发之前啊,我选用的软件是:Visual Studio CODE,这个软件在前端开发中十分常用,且提供了很大的便利。

当然也可以用记事本开发,记得把后缀名改成.html

还有我的CSS使用的是内部样式表

写在head标签下。

正文:

开发这个网页,主要是因为近期看了明史,也就是明朝那些事儿,我觉得很有意思,加上正好要写html和css的综合案例,就在本篇写了一下。

用到的标签有 

<h1></h1>

   <img src="lyf.jpg" class="god">

    <p>    </p>

就是这三个标签,构成了HTML的主体架构。

而CSS则是设置了以下形式。

font-size: 16px;

            line-height: 32px;

            font-family: "Microsoft Yahei";

            text-align: left;

            text-indent:2em;

         text-decoration: none;

            color: #888888

        width:66px

具体代码见:https://download.csdn.net/download/mingangel/89780399icon-default.png?t=O83Ahttps://download.csdn.net/download/mingangel/89780399

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

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

相关文章

Qt 模型视图(三):视图类QAbstractItemView

文章目录 Qt 模型视图(三):视图类QAbstractItemView1.基本概念1.1.使用现有视图1.2.使用模型1.3.使用模型的多个视图1.4.在视图之间共享选择 Qt 模型视图(三):视图类QAbstractItemView ​ 模型/视图结构是一种将数据存储和界面展示分离的编程方法。模型存储数据&#xff0c;视…

Unity3D入门(一) : 第一个Unity3D项目,实现矩形自动旋转,并导出到Android运行

1. Unity3D介绍 Unity3D是虚拟现实行业中&#xff0c;使用率较高的一款软件。 它有着强大的功能&#xff0c;是让玩家轻松创建三维视频游戏、建筑可视化、实时三维动画等互动内容的多平台、综合型 虚拟现实开发工具。是一个全面整合的专业引擎。 2. Unity安装 官网 : Unity…

感知笔记4:YOLO 3D 物体定位

如何在 ROS 中使用 YOLO 如何在 2D 中检测人和大象如何在 3D 中检测人和大象 有许多可用的深度学习库。您可能听说过&#xff1a;Keras、TensorFlow 和 Darknet。 在这里我们将使用 Darknet&#xff0c;因为它实现了 YOLOv3&#xff0c;这是一个对象检测模型。它非常快&…

【AI大语言模型】提示词工程基础及进阶

【AI大语言模型】提示词工程基础及进阶 什么是提示词&#xff08;Prompt&#xff09; 提示词&#xff08;Prompt&#xff09;是与人工智能对话时用来引导或触发生成某种输出的指令。 它相当于你在与 AI 进行互动时所提出的问题或任务说明。提示词可以是简短的指令、一个问题…

YOLOv8改进,YOLOv8替换主干网络为VanillaNet( CVPR 2023 华为提出的全新轻量化架构),大幅度涨点

改进前训练结果: 改进后训练结果: 摘要 基础模型的核心理念是“更多即不同”,这一理念在计算机视觉和自然语言处理领域取得了惊人的成功。然而,变压器模型的优化挑战和固有复杂性呼唤一种向简化转变的范式。在本研究中,引入了VanillaNet,一种拥抱设计优雅的神经网络架构…

VSCode好用的插件推荐

1. Chinese 将vscode翻译成简体中文 如果安装了依然是英文&#xff0c;请参考如下方法&#xff1a; ctrlshfitp 2. ESLint 自动检查规范 3. Prettier - Code formatter 可以自动调整代码的缩进、换行和空格&#xff0c;确保代码风格统一。通过配置&#xff0c;Prettier可…

掌握Android开发新趋势:Jetpack与现代架构技术全解析

随着Android开发技术的不断进步&#xff0c;Jetpack和现代架构技术已成为构建高效、可维护应用的关键。本文将为您介绍一套全面的学习资料&#xff0c;包括大纲、PDF文档、源代码以及学习视频&#xff0c;帮助您深入理解Jetpack核心库、架构组件以及现代开发工具。 内容&#…

python贪吃蛇游戏项目源码【免费】

使用Pygame库实现的贪吃蛇游戏。Pygame是一个用于创建视频游戏的Python模块集合&#xff0c;它提供了图形和声音库&#xff0c;使游戏开发变得容易。 初始化设置 屏幕大小 (SCREEN_WIDTH, SCREEN_HEIGHT): 定义了游戏窗口的宽度和高度。方格大小 (SIZE): 定义了游戏中每个小方…

简单水印通过python去除

简单水印通过python去除 先看效果&#xff0c;如果效果不是你需要的就可以不用浪费时间。 注意&#xff1a;这种主要还是对应的文字在水印上方的情况&#xff0c;同时最好不要有渐变水印否则可能最后输出的图片的水印还会有所残留&#xff0c;不过还是学习使用&#xff0c;相信…

救生圈检测系统源码分享

救生圈检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Computer Visio…

基于协同过滤算法的商品推荐系统

系统展示 用户前台界面 管理员后台界面 商家后台界面 系统背景 随着互联网技术的飞速发展&#xff0c;用户每天面临的信息量呈爆炸式增长&#xff0c;如何有效地筛选出用户感兴趣的内容成为一大挑战。在此背景下&#xff0c;基于协同过滤算法的商品推荐系统应运而生。该系统通过…

九章云极DataCanvas公司荣获2024年服贸会“科技创新服务示范案例”

9月15日&#xff0c;2024年中国国际服务贸易交易会&#xff08;服贸会&#xff09;示范案例交流会暨颁奖典礼在北京国家会议中心举行&#xff0c;九章云极DataCanvas 公司自研的DataCanvas Alaya NeW智算操作系统凭借卓越的AI创新实力、前瞻性的市场布局以及突破性的技术革新成…

Golang | Leetcode Golang题解之第423题从英文中重建数字

题目&#xff1a; 题解&#xff1a; func originalDigits(s string) string {c : map[rune]int{}for _, ch : range s {c[ch]}cnt : [10]int{}cnt[0] c[z]cnt[2] c[w]cnt[4] c[u]cnt[6] c[x]cnt[8] c[g]cnt[3] c[h] - cnt[8]cnt[5] c[f] - cnt[4]cnt[7] c[s] - cnt[6]…

机器翻译之Bahdanau注意力机制在Seq2Seq中的应用

目录 1.创建 添加了Bahdanau的decoder 2. 训练 3.定义评估函数BLEU 4.预测 5.知识点个人理解 1.创建 添加了Bahdanau的decoder import torch from torch import nn import dltools#定义注意力解码器基类 class AttentionDecoder(dltools.Decoder): #继承dltools.Decoder写…

LabVIEW提高开发效率技巧----使用事件结构优化用户界面响应

事件结构&#xff08;Event Structure&#xff09; 是 LabVIEW 中用于处理用户界面事件的强大工具。通过事件驱动的编程方式&#xff0c;程序可以在用户操作时动态执行特定代码&#xff0c;而不是通过轮询&#xff08;Polling&#xff09;的方式不断检查界面控件状态。这种方式…

【学习笔记】 使用AD24完成相同电路的自动布线布局(相同模块布局布线ROOM布线快速克隆)

【学习笔记】 使用AD24完成相同电路的自动布线布局 一、适用基本条件二、基于ROOM的自动布局/布线的方法三、可能出现的报错四、ROOM自动布局的一些优点和缺点 当面对多个相同电路模块时&#xff0c;使用 ROOM 可以一次性对一个模块进行精心布局&#xff0c;然后将该布局快速复…

粒子向上持续瀑布动画效果(直接粘贴到记事本改html即可)

代码&#xff1a; 根据个人喜好修改即可 <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>宽粒子向上…

正则表达式匹配整数与浮点数失败与解决方案

正则表达式匹配整数与浮点数失败与解决方案 问题描述问题分析解决方案总结 问题描述 在处理数据的时候需要提取文本内整数与浮点数&#xff0c;这个时候想到使用正则表达式&#xff0c;咨询百度文心一言给出以下方案及参考代码 import re text "我有100元&#xff0c;…

解决mac下 Android Studio gradle 下载很慢,如何手动配置

抓住人生中的一分一秒&#xff0c;胜过虚度中的一月一年! 小做个动图开篇引题 前言 平时我们clone git 上项目&#xff0c;项目对应gradle版本本地没有&#xff0c;ide编译会自动下载&#xff0c;但是超级慢可能还下载失败&#xff0c;下面讲解下此问题如 如下图所示&#xff…

ML 系列:机器学习和深度学习的深层次总结(04)多元线性回归 (MLR)

图 1.多元线性回归与简单线性回归 一、说明 线性回归从一维推广到多维&#xff0c;这与单变量线性回归有很多不同&#xff0c;情况更加复杂&#xff0c;而在梯度优化也需要改成向量梯度&#xff0c;同时&#xff0c;数据预处理也成了必要步骤。 二、综述 多元线性回归是简单线性…