- 博客(142)
- 资源 (162)
- 收藏
- 关注
原创 CSS div布局 常见问题1 换行
盒子模型的box-sizing属性的默认值:content-box,表示width是内容宽度,而不是总宽度。将所有元素的box-sizing改整成border-box,表示width是总宽度。3个子div的完整宽度:内容宽度100px+左右边框宽度2px=102px。每个宽度100px。而外层div的内容宽度:300px,只够放两个子div。这个解决方法的缺点:还要算宽高,而且算出来是零碎值,累。将外层div的宽度改为306px。即:元素总宽度计算问题引起的换行。外部div1宽度300px;
2023-09-05 17:29:37 308
原创 CSS 定位 position
1)直角坐标系模型数学直角坐标系是二维平面,点定位是通过横坐标x与纵坐标y。两个要素:要素1:定位基准,即原点;要素2:偏量量,横坐标与纵坐标两个方向的移偏量(x,y)。2)HTML定位坐标模型因为一切HTML元素都是盒子,点对点的偏移变成了矩形对矩形的偏移。HTML页面里,元素的定位与直角坐标系定位的不同点:基准从原点一个点变成一个矩形(另一个元素的盒子);偏移量在水平方向可通过left与right进行坐标设置,垂直方向可通过top与bottom设置。
2023-09-05 17:26:43 141
原创 CSS div布局 嵌套
div id="div_xiaobuteach">被分成多列,外层需要加clearfix,内层需要加float:left。<div id="div2">被分成2列,所以它需要加clearfix,里层的div需要加float:left。<div id="div1">被分成3行,直接加3个div即可。声明2:为方便大家初学,样式我们不考虑公用,只公用了clearfix清除浮动,其余直接写style属性。声明4:为div加了边框、宽高、边距,为方便大家看出效果,并不是实际需要。第3步:第2列继续划分为2列;
2023-09-05 17:23:11 809
原创 CSS 总结
CSS主要解决4个问题:针对哪些元素?设置哪些样式?在哪里设置?如何叠加?1)哪些元素?对应:8种常用选择器,本章重点;2)哪些样式?对应:第02章 简单标签—第7节 文本常用样式;第03章 盒子模型;3)在哪里设置?对应:3种引入方式;4)如何叠加?针对HTML页面元素的树状结构,整个CSS为叠加过程提供了4个基本原则: CSS的4个特性。
2023-09-02 16:09:55 20
原创 CSS 特性
当一个元素匹配多个样式规则时,如果样式属性名相同,则优先级高的会覆盖优先级低的,相同优先级时,后定义的会覆盖前定义的。子标签可以继承父标签的部分style属性:这部分样式称之为可继承;通过开发者工具(F12)查看,div2的样式里具有div1定义的字体大小与颜色两个属性。div2继承父标签div1的两个属性,font-size与color都是可继承的属性。不同类型的多个选择器定义相同的属性名不同属性值,会按照优先级顺充、采用优先级高的样式。标签具有父标签的样式属性,同时还有自己定义的样式属性,即继承性。
2023-09-02 16:07:46 20
原创 CSS 选择器
例:为页面所有div设置字体大小与颜色。div{基本语法选择器{样式内容根据选择器筛选出(选择)当前HTML页面的多个元素,对它们统一进行样式设置。样式内容可以设置多个样式,通常我们一个样式一行,提高代码可读性。优点以前我们通过style属性为每一个html元素设置样式,很多重复内容。通过选择器可以1次选择多个html元素,进行统一的样式设置,减少重复代码。理解选择器如何1次选择这多个html元素?这个规则的设置,即选择器类型。因为项目需求有各种不同的场景,所以CSS提供了多种选择器类型。
2023-09-02 16:03:14 24
原创 CSS基础 本章大纲
CSS基础 | 小步教程本章主要内容:第1节 CSS 简介第2节 CSS 选择器第3节 CSS 标签选择器第4节 CSS 类选择器第5节 CSS ID选择器第6节 CSS 注释第7节 CSS 样式调试第8节 CSS 后代选择器第9节 CSS 子元素选择器第10节 CSS 属性选择器第11节 CSS 逗号选择器第12节 CSS 连续选择器第13节 CSS 引入方式第14节 CSS 特性第15节 CSS 优先级第16节 CSS 伪类选择器第17节 CSS 链接伪类第18节 CSS 集合伪类第19节 CSS be
2023-09-02 15:58:20 28
原创 html 框架 iframe
现在需要在d10-iframe-p1.html的第3行 "页面1 CCCC"后放入 d10-iframe-p2.htm页面的内容。frameset是把多个已经有页面整合成一个新的页面,这个新页面并非普通页面:只有frameset,没有body。三个基础页面:d09-welcome,d09-page1.html,d09-page2.html,代码略。链接的target属性与iframe的name属性一致,表示点击链接时,在iframe的位置打开新页面。当点击页面1或页面2的链接时,下方显示相应页面。
2023-08-31 23:35:39 336
原创 html 链接 a
Ctrl+点击链接:新的TAB页打开链接,并且页面不跳转。搜索时,连续打开多个页面。不以斜杠/与http(s)开头的路径,表示当前网站的网页,相对当前html文件的路径。a标签的href属性的页面地址路径与img标签的src属性的地址路径规则一样。实际项目,通常会对上述各动作的样式进行定制,需要通过CSS的伪类技术实现。点击 链接内容,在target指定的位置打开href指定的页面。a默认不是只有一个样式,当不同的动作时,a有不同的样式。直接以http或https开头的路径,也称完整路径。
2023-08-31 23:25:27 42
原创 html 基础标签 本章大纲
html 基础标签 | 小步教程本章内容包括:第1节 html 列表第2节 html 无序列表 ul第3节 html 有序列表 ol第4节 html 定义列表 dl第5节 html 链接 a第6节 html 表格 table第7节 html 表格 跨行跨列第8节 html 表单与表单元素第9节 html 框架 frameset第10节 html 框架 iframe
2023-08-31 23:22:36 24
原创 html案例 网站简介 第1步 整体布局
实际页面请点击网站简介案例 第1步:整体布局。查看源码的方法:网页右键 — 查看网页源代码。根据网页内容与布局特点,整个页面分为三大块:1 头部区,2 主要内容区,3 尾部区。1 头部区(header区):占满页面整个宽度;其中内容为一级标题。2 主要内容区(main区):两边留白, 中间宽度固定为800px;其中包括3小块:关于、原创声明、交流。3 尾部区(footer区):包括底部那条横线,占满页面整个宽度;其中内容为版权说明。
2023-08-30 21:19:01 46
原创 html案例 网站简介页面 本章大纲
注释、文本标签、标签、段落、换行、行内标签、文本常用样式、图片、容器。查看源码的方法:网页右键 — 查看网页源代码。2)盒子模型:设置间距、边框、水平线。1)div容器:进行区块划分;:html基本结构。
2023-08-30 21:15:53 26
原创 html 盒子模型 浏览器查看盒子模型
元素面板下,选中相应节点,右侧切换到 计算样式 面板,下方即显示盒子模型。以Chrome为例,F12打开 开发者工具,或者右键 — 检查。
2023-08-28 16:10:03 80
原创 html 盒子模型 简单使用
设置宽度与高度、padding/border/margin的4个方向分别设置相同值。border 设置4个方向的边框:宽度40px、线型是实线、红色;padding 设置4个方向的内边距都是30px;margin 设置4个方向的外边距都是50px。width 设置内容宽度100px;height 设置高度80px;
2023-08-28 16:07:44 36
原创 html 盒子模型 本章大纲
1)盒子模型的值:14个值,17个属性;2)工具1:查看盒子模型。开发者工具查看各属性具体数值,查看相应颜色;3)工具2:QQ截图工具测试尺寸;4)设值情况:多方向统一设值;多方向分别设值;一次设置多个方向值;5)宽高为什么有时设置无效;6)如何让宽高设置从内容的宽高变成总的宽度;7)盒子模型的运用场景;8)养成研究习惯:搞清楚每一个像素的空白从哪里来。
2023-08-28 16:05:18 21
原创 html 容器 div简介
html 容器 div简介 | 小步教程div:动词divide,名词division;中文意思:划分。div标签用作容器,其中可以包含其它的html标签,div标签同时可以继续嵌套div标签。div标签里的内容既可以是文本,也可以嵌套其它标签,图片、视频、段落、标题、等。需求场景:需要通过一个容器包含多个段落<p>,然后容器加上灰色边框。分析:段落p里无法继续嵌套段落p,外部需要使用div作为容器。错误代码F12看浏览器如何解析的,将外层的p标签解析成了两个p标签,开始一个,结尾一个。简言之,
2023-08-28 16:03:09 218
原创 html 注释
如果当前行内容已经注释,Ctrl+/会变成取消注释。注释内容 用于对代码进行说明,提高代码可读性;问题1:用户能否看到开发人员写的HTML注释?所以不要在注释里写敏感内容。--开头,以-->结束;网页右键 — 查看网页源代码。注释内容 不会显示在网页;选中多行时,注释选中多行;没有选中时,注释当前行;可以注释单行或者多行。
2023-08-28 16:00:10 32
原创 html 简单标签 本章大纲
一个网页的内容通常包括如下内容,HTML提供相应标签或属性。5)容器:各元素经常需要放到一个容器,方便管理。3)文本样式:字体大小、颜色、等。1)注释:对代码进行注释说明;2)文本:标题、段落、换行;
2023-08-28 15:49:04 20
原创 HTML 基本原理
生产服务器部署项目时,我们会在服务器部署nginx或apache服务,不会通过vscode插件Open In Default Browser来启动服务。网站对应有自己的服务器主机,服务器主机部署网页服务,常用的HTML服务(也称WEB服务器)包括:nginx、apache等。我们安装的Open In Default Browser插件,它内置了服务器,当我们通过它打开页面时,会在本地启动服务。当服务器接收到我们浏览器传递的网页地址请求,会把HTML代码传给我们的浏览器,浏览器解析HTML、完成页面显示。
2023-08-22 21:46:08 93
原创 HTML Hello
html文件的扩展名可以是 .html 或 .htm ,习惯使用 .html。<title>节点里的内容修改为 小步教程 www.xiaobuteach.com。第2种方式:点击左侧的Explorer面板,点击 Open Folder按钮。我创建的文件夹是: f:\99-task\html。输入html,弹出相应模板,选择html:5 模板。可任意创建1个文件夹作为项目文件夹,然后打开。自动打开Chrome浏览器,运行效果如下。可通过两种方式打开项目文件夹。步骤1:新建项目文件夹。步骤2:打开项目文件夹。
2023-08-22 21:41:15 126
原创 HTML 开发环境搭建
点击Extensions(扩展)面板,搜索相应的插件 Open In Default Browser,点击右下角的Install按钮。Google公司旗下产品,目前大多数浏览器(包括微软Edge、360浏览器)的内核也使用了Chrome。VSCode:visual studio code,微软公司旗下的开发工具,提供丰富插件,使用简单,功能强大。当前可以访问,如果Chrome官网无法直接访问,可以通过软件下载管家(360、腾讯)进行下载安装。选择 默认应用 ,Web浏览器选择 Chrome浏览器。
2023-08-22 21:33:28 787
原创 HTML 网页基本组成
通过HTML标签实现,例如:文本输入框(标签input)、段落(标签p)、图片(标签img)、按钮(标签button)。例如JD首页右侧的导航菜单,当我们鼠标放在不同的品类上,右边会显示具体的明细品类。样式通过CSS技术实现,用于美化元素,例如:字体大小颜色、背景颜色、边框。广义的HTML技术包括:HTML标签、CSS、JavaScript。广义的HTML技术包括:HTML标签、CSS、JavaScript。下图包含的元素:1个标题、2个按钮。左边按钮采用的默认样式,右边是CSS美化后的样式。
2023-08-22 21:31:32 82
原创 HTML 能做什么
HTML用于制做网页,包括:PC端与移动端的页面、前台页面与后台页面。例3:后台管理的页面。包括:基本的菜单功能、支持丰富的图表。例1:PC端的JD首页的页面。例2:移动端的JD首页的页面。F12 查看网页代码。
2023-08-22 21:29:30 39
原创 Shell 自动批量添加用户
详情地址: Shell 自动批量添加用户 | 小步教程文件user_pwd.txt中指定用户密码,内容如下:通过shell脚本文件,自动添加用户、设置密码。主要步骤:1)读取文件,遍历每一行 :通过read while;2)从行数据中,解析出两个部分:通过awk;3)通过useradd添加用户,passwd设置密码。第1步:遍历文件的每一行第2步:通过awk将每行拆成两部分do与done中间代码如下第3步:通过useradd添加用户,passwd设置密码文件02addusers.s
2023-08-13 11:16:12 460 1
原创 Shell 修改文件内容 sed
详情地址: Shell 修改文件内容 sed | 小步教程sed命令用于修改已有文件的内容。vim是文件编辑器,通常需要用户多次交互操作完成文件内容的修改。sed命令是一条命令直接完成修改文件内容。通常改动都是很小的改动。准备数据:文件data1.txt,内容如下:例1:文件的第2行之后添加内容bbb。2abbb说明第1个字符2表示第2行;第2个字符a表示添加操作(append);后续内容bbb表示添加的内容。修改后内容显示在界面,查看文件内容,没有修改。sed命令默认选项不真正修改文件。体验
2023-08-13 11:13:39 549
原创 Shell 自动安装Apache
详情地址: Shell 自动安装Apache | 小步教程我们先回顾手动安装Apache(通过源码安装包)的步骤,然后分析、将手动执行代码转化为shell脚本。参考 第9章 软件安装—Apache源码安装 。我们先下载好安装文件并上传到指定目录/software/httpd-2.4.57.tar.bz2,不用在Shell里下载。步骤1:解压步骤2:安装依赖步骤3:编绎步骤4:编绎与安装步骤5:配置后台服务1)复制程序到后台服务目录【重点】2)编辑文件httpd#!/bi
2023-08-13 11:11:25 136
原创 Shell 自动化运维 本章大纲
详情地址: Shell 自动化运维 | 小步教程本章主要内容自动卸载Apache自动安装Apache命令替换 反单引号修改文件内容 sed按行修改文件内容 sed简单搜索修改文件 seds替换修改文件 sed前后提醒词查找中间内容 sed自动批量添加用户文本分析 awk简介Shell自动安装MySql
2023-08-13 11:09:10 22
原创 Linux教程
详情地址: Linux教程 | 小步教程第01章 Linux系统简介第02章 Linux安装第03章 Linux终端基本操作第04章 文件夹第05章 Linux文件第06章 Linux文件2第07章 文本编辑器vim第08章 文本编辑器vim续第09章 Linux软件安装第10章 网络命令与配置第11章 网络请求命令第12章 网络服务第13章 进程与系统服务第14章 系统命令与信息第15章 用户管理第16章 用户管理2第17章 标准磁盘管理第18章 磁盘常用命令第19章 动态扩容LVM第20章 LVM命令
2023-08-13 10:48:54 29
原创 Shell 输入输出 字符串输入
详情地址: Shell 输入输出 字符串输入 | 小步教程回顾前面我们介绍了输入的3种位置:键盘、文件、输出命令的输出结果;1)从键盘输入2)从文件获取输入3)输出命令的输出结果作为输入单行文本输入<<<本节介绍第4种位置:字符串输入。直接设置文本输入。4)直接把字符串作为read的输入<<<,称为"here string"技术,适用于单行字符串输入。多行文本输入<<EOF多行输入:here document<<EOF是固定写法;输入最后的EOF回车,自动结束命令。例:
2023-08-12 07:24:11 627
原创 Shell 文件的输入输出
详情地址: Shell 文件的输入输出 | 小步教程本节实现从文件输入,输出到文件。准备数据文件data1.txt,其中内容为:xiaobuteach.com例1:从文件中读取内容<与文件名之间空隔可有可无。然后echo $name查看数据例2:往文件中写内容>与文件名之间空格可有可无。查看数据正确。例3:将输出与错误写到不同文件1>log.txt表示将正常内容写到log.txt文件2>err.txt表示将错误内容写到err.txt文件ll命令执行完后,并没有显示到显示器,而是输出到了文
2023-08-12 07:22:16 2202
原创 Shell 标准输入输出
详情地址: Shell 标准输入输出 | 小步教程我们常用的两条输入输出语句接收输入将用户输入的值赋值到变量。输出输入与输出分别对应的硬件:输入通过键盘,输出到显示器。3个标准设备Linux把硬件映射为设备文件,对应一个文件描述符。输出与错误命令执行正确的提示结果称为输出;命令执行失败的提示结果称为错误。例1:1条ll语句同时存在输出与错误。当前文件夹存在文件file1.txt,不存在文件file-error.txt,一条ll命令两个文件。第1条提示为错误,第2条提示为输出。注:两个不同
2023-08-12 07:20:16 264
原创 Shell 函数
不像很多语言,定义参数需要设置函数声明。Shell函数只需要在函数体中直接获取传递参数即可。$1获取第1个参数,$2获取第2个参数,依次类推。示例例1:上述函数的网站名与作者由参数传递。
2023-08-11 08:45:08 18
原创 Shell if逻辑运算的写法
详情地址: Shell if逻辑运算的写法 | 小步教程现在要表达 a==1 && b==2含义,可用三种方法:方法1:完全test命令或[ ]。逻辑运算符使用test命令的语法: -a、-o。方法2:完全(( ))数学计算使用常规的逻辑运算符:&&、||方法3:test命令结合常规与或分别两个[ ],&&连接它们;&&在[ ]的外部。
2023-08-11 08:42:36 47
原创 Shell 条件表达式的写法
详情地址: Shell 条件表达式的写法 | 小步教程条件表达式常用写法包括:[ ] 、test、(( )) 、[[ ]] 。标准写法为[ ],[ ]是test命令的简化写法。2 test命令写法if命令的标准写法。其中变量需用$标记,关系运算、逻辑运算,使用-eq、-a这一套专用语法。3 (( ))本身用于数学计算,其中的关系运算、逻辑运算使用用常规运算符: ==、&&、等。4 [[ ]][ ]的加强,其中变量不用$,*运算等原来需要加转义字符\的可以省略。
2023-08-11 08:40:48 47
原创 Shell 语句
详情地址: Shell 语句 | 小步教程流程控制包含三大结构:顺序、选择(条件)、循环。本节介绍顺序结构的语句。多条语句换行,可以不用分号结束。示例2 一个命令分多行当一条语句过长,例如参数特别多,参数值特别长,可以分行输入,结尾用反斜杠\。示例包含了两条语句,一条mkdir创建目录,一条rm删除目录。
2023-08-11 08:38:29 20
仿动网风格的蓝色后台模板
2012-02-10
商务信息网后台模板+登录网页
2012-02-10
5UCMS紫色文章类网站模板
2012-02-10
知识问答社区网站绿色模板
2012-02-10
ACTCMS蓝色风格后台管理模板
2012-02-10
某网上办公系统的后台登录页模板
2012-02-10
软件公司产品推广类网站模板
2012-02-10
信息管理系统网页设计模板
2012-02-10
一个基于Ext UI界面的后台模板
2012-02-10
基于jquery的Ajax后台模板框架
2012-02-10
带登录页的WEB管理系统风格模板
2012-02-10
漂亮的学校网站后台管理模板及登录界面
2012-02-10
126邮箱界面的后台模板
2012-02-10
WEB企业信息管理系统的后台登录页及管理页模板
2012-02-10
Web版的超市管理系统后台网页模板
2012-02-10
Myoffice办公系统后台模板页面
2012-02-10
分享一个通用的WEB网站后
2012-02-10
蓝色风格的后台框架模板页
2012-02-10
漂亮网页信息系统后台管理模板
2012-02-10
图书馆管理系统测试分析报告
2012-02-10
化妆品公司网站建设方案
2012-02-10
移动公司改版网站方案
2012-02-10
网上支付可行性分析报告
2012-02-10
珠宝行业网站建设方案
2012-02-10
信息产业公司网站建设方案
2012-02-10
医药公司网站建设方案书
2012-02-10
MIS系统开发文
2012-02-10
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人