m0_66168318的博客

原创 HTML5网页设计练习题

原创 HTML5网页设计-复习

CSS基础规则选择器三大属性优先级顺序：！Important>行内式>ID>类>标签>*主动提权 引入形式 基础选择器0000,0001,0010,0100,1000引用方法基础知识，属性FontColorText-lineText-indentText-alignText-decorationLine-heightBackground{背景色 背景图 背景平铺 背景位置;}Color,url,no-repe.

原创 HTML5网页设计练习2

效果图：思路：1.分成四个盒子，整体、商品图、商品名字、价格和购买。（注意样式初始化）2.第一个盒子：块元素引入；设置宽高属性和对齐方式。3.第二个盒子：块元素引入；两张图片，一个使用背景图片导入（设置宽高属性和对齐方式），一个使用图片标签导入。4.第三个盒子：块元素引入；设置宽高属性和对齐方式，文字的字体和粗细。（注意计算问题）5.第四个盒子：行内块元素引入；设置字体颜色和大小，关键在如何处理各个要素的位置关系。...

原创 HTML5网页设计-复习

HTML图像，文字，链接1.含义2.语法3.分类属性4.基础结构5.文档结构（1）声明文档，（2）字符集，内嵌，行内，链接，导入6.常用标记（1）文本段落标记（2）文本修饰标记：本身带了样式，不独占一行（3）拼音注释标记（4）特殊字符（5）图像：Background背景图，作为背景板存在，字可以放在上面Img引入，作为一个完整的标签存在，字不可以放在上面Src必选,title悬停,alt文本替换宽高是图片固有属性，在css.

原创 HTML5网页设计练习

最终效果图：素材：更多>>奥斯卡影后的纽约俭约豪宅奥斯卡影后娜塔莉—波特曼的这间公寓，整排的落地窗显得宽敞明亮，每件家具都有光滑的线条感…流光溢彩 施华洛世奇系列珠宝璀璨耀巴世：巴黎古董双年展金融巨头眼中的十大品牌名表思路：1.文字部分分为四个区域，即四个盒子（外面还有一个大盒子，共五个div），使用块元素里的div标签，分别给类名（标签语义化）。2.添加背景图。background，盒子的宽度和高度等于图片的宽度和高度。3.左上角如何到达目标位置？用小盒.

原创 HTML5网页设计样式-补充

块元素转换为行内元素如果块元素的内容为空，有设置宽高属性；当它转换为行内元素之后，页面上会显示为空。行内元素转换为块元素方法一：两个标签之间加入一个空白的p标签（不推荐）方法二：设置样式display:block。...

原创 HTML5网页设计样式-外边距合并问题

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并，主要有以下几种情况：1.相邻块元素垂直外边距的合并当上下相邻的两个块元素相遇时，如果上面的元素有下外边距，下面的元素有上外边距，则他们之间的垂直间距是两者中较大的值。解决方案：没有较好的解决方案，尽量避免。2.嵌套块元素垂直外边距的合并当父元素没有上内边距及边框，那么父元素的上外边距和子元素的上外边距会合并，合并后的外边距为两者中的较大者。即使父元素的上外边距为0，也会发生合并。解决方案：（1）为父元素定义

原创 HTML5网页设计样式-盒子模型的稳定性

大部分情况内外边距可以混用，但是为了方便，我们根据稳定性来分，建议按照宽度-内边距-外边距的优先顺序来。（width>padding>margin）原因：外边距会有合并；内边距会影响盒子大小；宽度和高度剩余法常用，没有问题。...

原创 HTML5网页设计样式-盒子模型练习

题目：如何让个200x200像素的盒子，在一个400x400的盒子里面水平居中，垂直居中。解法：

原创 HTML5网页设计样式-div元素和span元素

块级元素和行内元素 块级元素 行内元素 独占一行 不独占一行 可以用宽高属性自定义大小 不能用宽高属性来自定义定义大小 比如<h>标签、<p>标签、<div>标签 比如<strong>标签、<b>标签、<em>标签、><i>标签 <div>标记没有任何特殊含义，也没有任何样式，可以容纳段落、标题、表格、图片等各种HTML元素。<span>..

原创 HTML5网页设计盒子模型-内容+padding+boder+margin

内容由width（宽度）和height（高度）属性控制。分为auto（自动调整）、固定值（px/em）和百分比三种值。padding（内边距）四种基本属性 padding-top 上内边距 padding-bottom 下内边距 padding-left 左内边距 padding-right 右内边距 padding:10px 20px 30px 40px; /*上 右 下 左*/ padding:10px 20px 30px; /*上

原创 HTML5网页设计样式-CSS盒子模型

CSS盒子模型概念HTML页面中每一个元素都看作是一个矩形盒子，占据一定的页面空间，即一个盛装内容的容器。辅助理解：网页布局的本质：矩形盒子类似用牛奶盒将牛奶装起来CSS≈堆积木CSS盒子模型组成部分在CSS中，一个独立的盒子模型由内容、border（边框）、padding（内边距）、margin（外边距）四个部分组成，如图所示：...

原创 Office自定义安装-收藏和问题

方法一：http://t.csdn.cn/6mLB6http://t.csdn.cn/6mLB6遇到的问题：应用程序错误的问题没有解决。方法二：http://t.csdn.cn/2ayLShttp://t.csdn.cn/2ayLS遇到的问题：暂时没有找到镜像文件，安装管理文件-选择文件，自己下载的文件实现不了，卸载不干净原有的office。方法三：http://t.csdn.cn/gaTMYhttp://t.csdn.cn/gaTMY还未尝试。小结：...

原创 HTML5网页设计样式-CSS三大特性

1.层叠性多种CSS样式的叠加。对于同一个属性，选择器相同的情况下，后面选择器里的属性会覆盖前者。CSS设置了优先级高低的默认规则：!important（无穷大）>行内样式（style引用法）>ID选择器>类别选择器>标记选择器执行口诀：长江后浪推前浪，前浪死在沙滩上。2.继承性子标签会继承父标签的某些样式，如文本颜色和字号。简单理解为“子承父业”，但是这种继承性比较弱且复杂，有些标签并不具备该特性。3.优先级权重计算 继承或*的贡献值 0，0

原创 HTML5网页设计样式-伪类和伪元素选择器

伪类选择器由来：为了描述一些现有CSS无法描述的东西。与类选择器的区别：类别选择器可以根据需要随意命名，伪类选择器是利用CSS已经定义好的伪类为某些选择器设置特殊效果。为了和以前选择器使用区别，我们加上一个“伪”字，成为伪类，伪元素。常见的伪类选择器如下，常与<a>标记搭配使用： :link 应用于未被访问过的链接，仅限于<a>标记 :visited 应用于已经被访问过的链接，仅限于<a>标记...

原创 HTML5网页设计样式-背景标记

原创 HTML5网页设计-练习4

...

原创 HTML5网页设计-练习3

...

原创 HTML5网页设计-练习2

...

原创 HTML5网页设计-练习1

​​​​​​​...

原创 HTML5网页设计练习-选择器的应用

原创 HTML5网页设计练习-平台推荐

免费学习编程 - Python、JavaScript、Java、Git 等freeCodeCamp 是一个免费学习编程的开发者社区，涵盖 Python、HTML、CSS、React、Vue、BootStrap、JSON 教程等，还有活跃的技术论坛和丰富的社区活动，在你学习编程和找工作时为你提供建议和帮助。https://chinese.freecodecamp.org/具体步骤如下：响应式网页设计：电脑浏览呈现电脑版，手机浏览呈现手机版。根据浏览的客户端不同，相应不同的界面。...

原创 HTML5网页设计样式-CSS设置文字样式

字体 font-family 文字大小 font-size 文字的加粗 font-weight 文字的倾斜 font-style 以上四个在这篇已经有过大致介绍（见http://t.csdn.cn/IU9l1），因此这里主要通过举例辅助理解。文字的复合属性p {font: font-style font-weight font-size font-family;}使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间.

原创 HTML5网页设计样式-复合CSS选择器

1.交集选择器基本格式：h3.class{color:red;font-size:25px;}只能是两个选择器之间，两个选择器中间不能有空格，必须连续书写。使用交集选择器前：使用交集选择器后：2.并集选择器基本格式：.class,h3,p{color:red;font-size:25px;}可以是多个选择器之间使用，选择器与选择器之间用逗号连接。使用并集选择器前：使用并集选择器后：3.后代选择器（包含选择器）基本格式：.class h3..

原创 HTML5网页设计样式-基本CSS选择器

选择器是用来定位CSS样式代码控制的对象，实现各种效果。主要包括基本选择器和复合选择器。基本CSS选择器1.标记选择器每一种HTML标记的名称都可以作为相应的选择器名称，基本格式如下：标记名称{属性1:属性值1;属性2:属性值2;}例如，当我想给所有的<p>标签色设置相同的颜色、字体大小和背景颜色时：2.类别选择器标记选择器一旦声明，HTML文件中所有的相应标记都会产生变化，如果希望其中的某一个标记不产生相应的变化，这时候需要使用类别选择器（通常称为

原创 HTML5网页设计样式-CSS基础知识

CSS概念CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页内容的外观（样式），并允许将样式信息和网页内容分离的一种标记语言。HTML与CSS的关系：“结构”与“表现”，即HTML确定网页的结构，CSS确定网页的表现形式。HTML是CSS的前提和基础，CSS实现HTML的美化和更灵活地控制页面标记。样式规则（基本语法）注：HTML与CSS样式规则的符号区别 HTML CSS 标签用尖括号<> 标签用大括号{}

原创 HTML5网页设计常用标记-链接标记和列表标记

链接标记在HTML语言中，利用<a>标记在网页中创建超链接。 语法格式：<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a> 文字设置为超链接后，默认显示为加下划线的蓝色字体；图片设置为超链接后，会自动加一个黑色的边框。<a>标记常用的属性如下：（1）href属性：最重要的，必选属性，指定连接的目标资源URL地址。（2）name属性：指定元素的名称，用于设置网页中的某个位置（锚点）。target属性：设定

原创 HTML5网页设计练习-百度百科

老师给的预设效果图：书写内容：实际效果图：存在的疑问：1.在使用了align属性设置对齐之后，图片没有居中对齐。2.图片会随着网页显示比例的大小发生变化。...

原创 HTML5网页设计常用标记-图像标记

<img scr="图像URL">图片标签属性及其作用 属性 作用 src img必选属性 alt 图像不能显示时的替换文本 title 悬停显示，所有标签都能用该属性 border 设置图像边框的宽度 width 设置图像的宽度 height 设置图像的高度 相对路径：从自己的位置出发，依次说明到达目标文件的路径；绝对路径：先指明最高级的层次，然后依次向下说明到达目标文件的路径。（1）如果图像文件在本网站的

原创 HTML5网页设计练习-新闻页面

...

原创 HTML5网页设计常用标记-文本标记

文本标记包裹文字标签标题标记<h1>~<h6>HBuilder输入：网页显示效果如下图：段落标记<p>HBuilder输入：网页显示效果如下图：总结：标题标签和段落标签独占一行。 标题标签默认加粗，层级字号大小不同。 标题标签和段落标签最常用。文字的修饰标记粗体标记<b>和<strong>HBuilder输入：网页显示效果如下图：斜体标记<i>和..

原创 HTML5开发工具介绍-HBuilder

第一步：打开谷歌浏览器，在百度上搜索HBuilder。第二步：进入网站，选择下载HBuilderX。第三步：打开HBuilder，文件-新建-项目。第四步：选择普通项目-基本HTML项目-创建。第五步：基础的界面如下。 ...

原创 HTML5网页设计的基本知识-几个概念

网页的构成结构标准：对网页元素进行整理和分类，文件后缀名为.html 样式标准：对网页版式、颜色、大小等的设计，文件后缀命为.css 行为标准：网页模型的定义以及交互的编号，文件后缀名为.js理解记忆：结构（人体），样式（服饰），行为（运动）HTML标签分为双标签和单标签，有父子，兄弟，包含，嵌套，并列关系。双标签：<标签名>内容</标签名>单标签：<标签名/>基本结构如下：开发工具推荐HBuilder，Visual Studio

原创 HTML5网页设计基本结构-认识

第一步：打开记事本，输入以下数据。（注：均为英文状态下的符号）第二步：将记事本保存在桌面，将扩展名改为html。问：扩展名被隐藏，如何显示出来？答：以win10系统为例，如下图所示第三步：用谷歌浏览器，打开后运行的界面如下图所示。...