2.css公共样式、LOGO SEO优化、常用模块和注册页类名命名、tab栏布局原理、Web服务器

news2024/11/27 4:32:42

2.1 css公共样式

模块开发:
●有些样式和结构在很多页面都会出现, 比如页面头部和底部, 大部分页面都有。此时, 可以把这些结构和样式单独作为一个模块, 然后重复使用
●这里最典型的应用就是common.css公共样式。写好一个样式, 其余的页面用到这些相同的样式
●模块化开发具有重复使用、 修改方便等优点
在这里插入图片描述

common.css公共样式里面包含版心宽度、清除浮动、页面文字颜色等公共样式。

2.2 LOGO SEO优化

1.logo 面首先放一个h1标签, 目的是为了提权, 告诉搜索引擎, 这个地方很重要。
2.h1 面再放一个链接,可以返回首页的,把logo的背景图片给链接即可。
3.为了搜索引擎收录我们,我们链接里面要放文字(网站名称),但是文字不要显示出来。
4.最后给链接一个title属性,这样鼠标放到logo上就可以看到提示文字了。

隐藏文字的方法:
●方法1:text-indent移到盒子外面( text-indent: -9999px) ,然后overflow:hidden; 淘宝的做法。
●方法2:直接给font-size: 0; 就看不到文字了,京东的做法。

2.3 常用模块类名命名

在这里插入图片描述

2.4 注册页类名命名

注册页面:register.html
注意:注册页面比较隐私, 为了保护用户信息, 我们不需要对当前页面做SEO优化。
在这里插入图片描述

2.5 Tab栏原理布局需求

要求选项卡个数要与内容个数一致。
在这里插入图片描述

●根据tab切换的原理,tab_ content里面包含内容部分。这个内容可以通过ul 布局

2.6 什么是Web服务器

服务器(我们也会称之为主机)是提供计算服务的设备, 它也是一台计算机。

在网络环境下, 根据服务器提供的服务类型不同, 服务器又分为文件服务器、数据库服务器、应用程序服务器、Web 服务器等。

Web服务器一般指网站服务器, 是指驻留于因特网上某种类型计算机的程序, 可以向浏览器等Web客户端提供文档, 也可以放置网站文件, 让全世界浏览; 可以放置数据文件, 让全世界下载。

以下服务器我们主要指的是Web服务器。

根据服务器在网络中所在的位置不同, 又可分为本地服务器和远程服务器。

2.7 本地服务器

我们可以把自己的电脑设置为本地服务器, 这样同一个局域网内的同学就可以访问你的品优购网站了。

2.8 远程服务器

本地服务器主要在局域网中访问, 如果想要在互联网中访问, 可以把品优购网站上传到远程服务器。
远程服务器通常是别的公司为我们提供一台电脑(主机) , 我们只要把网站项目上传到这台电脑上, 任何人都可以利用域名访问我们的网站了。
比如域名: www.mi.com 可以访问小米网站
总结:
1.服务器就是一台电脑。因为我们主要是做网站, 所以我们主要使用web服务器
2.服务器可以分为本地服务器和远程服务器
3.远程服务器是别的公司为我们提供一台计算机。
4.我们可以把网站上传到远程服务器里面,别人就可以通过域名访问我们的网站了。

2.9 将自己的网站上传到远程服务器

注意:一般稳定的服务器都是需要收费的。比如:阿里云

这里推荐一个免费的远程服务器 (免费空间) :
http://free.3v.do/
1.去免费空间网站注册账号。
2.记录下主机名、用户名、密码、域名。
3.利用cutftp软件 上传网站到远程服务器。
4.在浏览器中输入域名,即可访问我们的品优购网站了。

课程总结

1.HTML我们学的就是常用标签,就是基本盒子
2.CSS就是用来美化布局网页。
3.HTML+CSS是没有逻辑可言的, 基本就是搭积木摆放盒子的过程, 需要的是耐心。

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

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

相关文章

基于php+mysql日志审计管理系统

基于phpmysql日志审计管理系统 一、系统介绍二、系统展示1.用户登陆2.监控日志3.监控规则4.用户管理 三、代码展示四.其它系统五、获取源码 一、系统介绍 本系统实现了:用户登陆、日志审计、监控规则、用户管理。 二、系统展示 1.用户登陆 2.监控日志 3.监控规则…

Postman接口测试实战-接口断言/newman执行集成(详细)

目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 接口测试用例 接…

2023年项目管理系统排名:客观分析+推荐解决方案

一个高效的项目管理系统可以帮助企业提高生产力、降低成本并确保按时交付高质量的产品或服务。然而,市场上有众多的项目管理系统供选择,使得消费者在做出决策时可能会感到困惑。本文将对当前市场上最受欢迎的项目管理系统进行客观分析,并提供…

原型和原型链条、ES6、前后端交互Ajax

一、原型和原型链条 1.原型<script>/*原型 解决问题> 当你需要给实例对象添加方法> 直接书写在构造函数体内> 这个行为并不好> 我们的原型就是解决了这个问题 不好的原因> 当我把方法书写在构造函数体内> 每次创建实例的时候, 都会创建一个函数数据类…

21matlab数据分析牛顿插值(matlab程序)

1.简述 一、牛顿插值法原理 1.牛顿插值多项式   定义牛顿插值多项式为&#xff1a; N n ( x ) a 0 a 1 ( x − x 0 ) a 2 ( x − x 0 ) ( x − x 1 ) ⋯ a n ( x − x 0 ) ( x − x 1 ) ⋯ ( x − x n − 1 ) N_n\left(x\right)a_0a_1\left(x-x_0\right)a_2\left(x-x_0\…

SpringCloud【负载均衡策略、OpenFeign概述、入门案列、日志增强 、超时机制 】(三)

目录 客户端负载均衡_负载均衡策略 服务接口调用_OpenFeign概述 服务接口调用OpenFeign_入门案列 服务接口调用OpenFeign_日志增强 服务接口调用OpenFeign_超时机制 客户端负载均衡_负载均衡策略 以前的Ribbon有多种负载均衡策略 RandomRule - 随性而为 解释&#xff…

物联网如何为智慧城市提供动力

智慧城市可以创造一个基础设施顺畅、效率提升的乌托邦&#xff0c;改善城市地区的生活质量&#xff0c;促进当地经济发展。 其影响意义重大&#xff0c;预计到 2024 年智慧城市基础设施的收入将超过 1000 亿美元。 从改善公共交通到解决犯罪问题和提高能源效率——应有尽有&am…

2023年杭电多校第一场-E.Cyclically Isomorphic题解

样例&#xff1a; 输入&#xff1a; 2 2 2 ab ba 1 1 2 4 3 aab baa bba bab 6 1 2 1 3 1 4 2 3 2 4 3 4 输出&#xff1a; Yes Yes No No No No Yes 题目大意&#xff1a; 给定一个字符串数组&#xff0c;每次查询两个字符串是否可以通过一个字符串循环右移可以变成另一个字…

Java实现检测本地指定路径下某一个程序是否在运行

项目有一个需求需要通过网页超链接唤醒本地桌面程序&#xff0c;有一个小bug是重复打开桌面程序。需要后台开一个接口来判断本地桌面程序是否打开。可以通过以下简单的方法来实现。 要检测本地指定路径下某一个程序是否在运行&#xff0c;可以使用Java的ProcessBuilder类来实现…

千兆网口 VS 2.5G网口 VS 5G网口:如何选?

随着互联网应用的不断扩展和数据传输需求的增加&#xff0c;为了更好满足高质量、高效率的日常生活和工作需求&#xff0c;对于网络速度和数据传输能力的要求日益严苛。这推动了网络技术发展的进程。在千兆网口研发并普遍应用后&#xff0c;又进一步研发出了2.5G网口和5G网口两…

硬件知识:从1.0到5.3,各版本蓝牙协议有什么功能特点

目录 蓝牙1.0 蓝牙1.1 蓝牙1.2 蓝牙2.0 蓝牙2.1 蓝牙3.0 蓝牙4.0 蓝牙4.1 蓝牙4.2 蓝牙5.0 蓝牙5.1 蓝牙5.2 蓝牙5.3 不断更新的蓝牙协议升级了哪些功能&#xff1f; 蓝牙作为一种小范围无线连接技术&#xff0c;具有低功耗、低成本、方便快捷的特点&#xff0c;…

基于whisper和whisperx的语音视频和字幕对齐

环境的安装 创建py310虚拟环境,需要安装Anaconda的Python环境。 Python初学者在不同系统上安装Python的保姆级指引 Win10+Python3.9+GPU版pytorch环境搭建最简流程 Python虚拟环境的安装和使用 还需要提前安装FFmpeg用于音频操作,并添加到环境变量中。 创建一个名称为w…

中移链与BSN分布式云管平台集成,共同构建专属协同体系

01 中移链与BSN分布式云管平台集成&#xff0c; 融入BSN生态体系 中移链OPB&#xff08;OPB即开放联盟链&#xff0c;Open Permissioned Blockchain&#xff09;与BSN基于BSN分布式云管平台&#xff0c;打造了中移链专属门户、中移链专属运营、中移链专属运维功能模块&#x…

龙曲良 Tensorflow —— 随机梯度下降(自用)-4

目录 一、梯度下降 二、激活函数及其梯度 2.1 最简单的阶梯激活函数 2.2 sigmoid / logistic&#xff08;tf.sigmoid&#xff09; 2.3 tanh&#xff08;tf.tanh&#xff09; 2.4 ReLU&#xff08;tf.nn.relu&#xff09; 三、损失函数及其梯度 四、单、多输出感知机梯度…

springBoot使用webSocket的几种方式以及在高并发出现的问题及解决

一、第一种方式-原生注解&#xff08;tomcat内嵌&#xff09; 1.1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId> </dependency>1.2、配置文件 package …

HTML5——基础知识及使用

HTML 文件基本结构 <html><head><title>第一个页面</title></head><body>hello world</body> </html> html 标签是整个 html 文件的根标签(最顶层标签).head 标签中写页面的属性.body 标签中写的是页面上显示的内容.title 标…

LiveGBS流媒体平台GB/T28181功能-用户管理数据支持页面excel导入数据excel导出数据

LiveGBS功能-用户管理数据支持页面excel导入数据excel导出数据 1、用户管理2、Excel导出导入2.1、支持用户数据的Excel导出2.2、支持用户数据的Excel导入 3、搭建GB28181视频直播平台 1、用户管理 用户管理&#xff0c;支持配置添加管理员、操作员、观众等角色的用户&#xff…

QGIS二次开发:集成二维CAD控件MxDraw

本文记录在QGIS中集成MxDraw控件的方法。 一、安装MxDraw 参见笔者博文“FreeCAD二次开发&#xff1a;集成二维CAD控件MxDraw”所述的安装方法。 二、编译安装QGIS 参见笔者博文"Windows 10下编译安装QGIS"所述的编译安装方法。 二、集成方法 2.1 添加MxDrawVie…

JAVA主流压缩解压工具对比、用法与选取

一、JAVA主流压缩工具 java.util.zip&#xff1a; **说明&#xff1a;**Java标准库提供的压缩与解压功能&#xff0c;包含在java.util.zip包中。通过ZipInputStream和ZipOutputStream可以实现ZIP格式的压缩与解压缩操作。 适用场景&#xff1a; 适合简单的ZIP格式压缩与解压缩操…

FFMPEG android mac 编译 支持DASH/OPENSSL问题汇总

一 下载源码 FFMPEG https://github.com/FFmpeg/FFmpeg/tree/release/4.3 二 编写脚本 支持https 就必须添加open SSL 的编译 具体可以查看我的另一个关于open SSL 的 然后我们配置的一些路径 涉及 ndk 的一定要查看你用的ndk 版本 是否存在这些路径这是第一步 然后如果支…