HBuilderx制作网页（sony官网）

这就是鱼头

已于 2024-02-01 20:49:01 修改

阅读量6.5k

点赞数 46

文章标签： html5 css3 css

于 2024-01-26 11:37:07 首次发布

本文链接：https://blog.csdn.net/NLxxxxX/article/details/135861496

版权

常用知识点：

1.图片字体编辑

1.web学什么？ HTML5、CSS3等

2.创建网页步骤：安装插件：工具-插件安装-插件市场

基本结构注释ctrl+/（注释）声明文档类型-告诉浏览器基于html的哪个版本执行的

ctrl+n创建文件 html:5创建格式 css？ style风格样式

<head>

<style>

div{

  width: 190px;  /* px像素 */

  height: 190px;

  /* 背景颜色 */

background-color: bisque;

/* 外边距居中 */

margin:200px auto;

/* 顺时针旋转45度 */

transform: rotate(45deg);

/* 滤镜--模糊 */

filter: drop-shadow(0px 0px 25px black);/* 长 宽 模糊 周边颜色 */

/* 调用动画 */

animation: jump 0.1s linear infinite; /* 速度函数--匀速 */  /* 无限循环播放 */

}

/* 动画 -关键帧动画*/

@keyframes jump{

  0% {

    transform: scale(1) rotate(45deg);/* 缩放 */

  }

  60%{

    transform: scale(.8) rotate(45deg);

  }

  85%{

    transform: scale(1.2) rotate(45deg);

  }

  100%{

    transform: scale(1) rotate(45deg);

  }

}

div:before{

  content:'' ;/* 内容 */

  display:block;/* 显示方式 */

  width:200px;

  height: 190px;

  background-color: bisque;

  /* 向左移动100像素 */

  position:relative;/* 相对定位 */

  left:-150px;

  border-radius:50%; /* 边框倒角 */

}

div:after{

  content:'' ;

  display:block;/

  width:200px;

  height: 190px;

  background-color:  bisque;

  position:relative;

  top:-300px;

  border-radius:50%; 边框倒角

}

</style>

</head>

2.定位与选择

2.1相对定位

/* 定位--移动元素位置--布局 */

/* 普通流定位 /浮动定位 /相对定位 /绝对定位 /固定定位 */

/* 相对定位：

1.相对定位的元素不会脱离文档流，依然会占据页面空间，后续的元素不会上前补位

2.配合偏移属性使用，（top/ringt/bottom/left)，距离哪个方向有多少距离的意思

3.相对于元素本身之前的位置进行定位

4.适用于页面中元素位置的微调

5.经常配合绝对定位一起使用 */

position: relative;

/* 配合偏移属性使用 */

top: 150px;

left: 150px;

/* margin: 200px auto 200px; */

2.2绝对定位

/* 定位--移动元素位置--布局 */

/* 普通流定位 /浮动定位 /相对定位 /绝对定位 /固定定位 */

/* 绝对定位：

1.绝对定位的元素会脱离文档流，不占据页面空间，后续的元素会上前补位

2.配置偏移属性使用

3.绝对定位的元素会相对于已经定位的祖先元素进行定位，如果没有已经定位的祖先元素，他会相对于最初包含框进行定位

4.绝对定位的元素会失去独占一行的特点

5.子绝父相

6.一个元素中的子元素都设置了决定定位，那么这些元素的位置会被初始化*/

position: absolute;

/* 配合偏移属性使用 */

top: 150px;

left: 150px;

/* 调整层级--只能作用于已经定位的元素上 */

2.3选择器

2.4高级选择器

/* 兄弟选择器 */

/* +选择元素后的第一个兄弟 */

.a+li{

color: aqua;

}

/* ~选择元素后的所有兄弟 */

.b~li{

color: blue;

}

/* 属性选择器 */

[class]{

color: darkgoldenrod;

}

/* 选择第一个子元素 */

ul li:first-child{

color: darkred;

}

/* 选择最后一个子元素 */

ul li:last-child{

color: orangered;

}

/* 选择任意一个子元素 */

ul li:nth-child(n+4){

color: lawngreen;

}

/* n 选择第一个

2n选择偶数个

2n-1选择奇数个

n+4选择从第四个开始到最后一个

-n+4 选择前四个 */

/* 非选择器 not(选择器) */

ul li:not(.a){

color: lightsalmon;

}

3.图片边框

3.1尺寸与单位

/* px像素

%百分比，相对于父元素的尺寸单位

in: 英寸

pt磅

mm毫米

cm厘米

em相对单位，相对于父元素

rem相对单位，相对于根元素

;*/

height: 150px;

/* background-color: #CF5659; */

background-color: #000;

/* 颜色单位

1.直接使用英文单词

2.#rrggbb 六位十六进制数字

0-9   a-f 

如果#rrggbb的值两两一样的话，可简写为#rgb

#aabbcc=#abc

#000;

如果rgb的值是相同的，则是灰色，越接近0颜色越深，越接近f颜色越浅

#fff*/

3.2边框

/* 边框

边框宽度 border-width;

边框样式border-style: ;

边框颜色border-color: ; */ */

border-width: 45px;

border-style: solid;

/* solid--实线 */

/* dashed--虚线

dotted--点状虚线

double--双线 */

border-color: #f11;

/* 边框简写方式

/* border:宽度样式颜色； */

border:30px solid #f16;

/* 边框单边定义： */

/* border-方向宽度样式颜色； */

/* 方向 top/right/bottom/left */

border-right:15 dotted #066;

/* 边框倒角--直角变圆角 */

/* border-radius: px/%; */

border-radius:60px;

/* 注意：如果元素不是正方形时取值为px和%的区别。

正方形倒角越大--越圆

长方形倒角越大--变椭圆 */

3.3框模型

.a1{

background-color: aqua;

/* 框模型--盒子模型 */

/* margin-外边距--围绕在元素周围的空白区域 */

/* 上左外边距会控制元素本身位置移动；

下右外边距会控制后续元素位置移动 */

margin: 25px 50px 60px 80px;

/* 取值

取值为1个值上下左右四个方向的外边距

取值为2个值

值1 上下外边距

值2 左右外边距

取值为3个值

值1 上外边距

值2 左右外边距

值3 下外边距

取值为4个值

值1 上外边距

值2 右外边距

值3 下外边距

值4 左外边距 */

margin: 0px 0px 0px 90px ;

/* 外边距的单边定义 */

/* margin-方向 : px; */

margin-left:120px;

margin-top:200px ;

/* 特殊的取值 auto---块级元素水平方向（左右）居中 */

margin:0px auto;

/* 内边距 */

/* padding-元素的内容和边框之间的距离 */

/* 背景颜色是从边框位置开始渲染的 */

/* padding: 50px 40px 60px; */

/* 取值

取值为1个值 上下左右四个方向的内边距

取值为2个值

  值1 上下内边距

  值2 左右内边距

取值为3个值

  值1 上内边距

  值2 左右内边距

  值3 下内边距

取值为4个值

  值1 上内边距

  值2 右内边距

  值3 下内边距

  值4 左内边距 */

  padding: 20px 50px 100px;

}

.a2{

  background-color: coral;

}

3.4框模型的特殊用法

/* *--选择左右元素 */

margin: 0;

padding: 0;

}

.a1{

background-color: aqua;

/* 一个元素在页面中实际所占的宽度=内容宽度+左右内边距+左右边框+左右外边距 */

/* 一个元素在页面中实际所占的高度=内容高度+上下内边距+上下边框+上下外边距 */

width: 120px;

height: 130px;

}

.a2{

background-color: lawngreen;

/* 框模型的特殊用法 */

box-sizing: border-box;

/* 可以改变盒子模型的计算方式 */

  /* 设置的尺寸  包含    内容+内边距+边框 */

}

4.图片超链接列表浮动

4.1图片

img{

width:200px;

/* 等比缩放：-当只设置宽度或高度其中的一个属性时，另一个属性也会跟着等比缩放 */

}

<!-- 常见图片格式

jpg--压缩比例大，图片质量低

png--支持透明背景

gif--支持动图

webp--网站中专用图片格式，图片质量比jpg格式的图片小一般还要多 -->

<!-- <img src="th (1).png" alt=""> -->      —保存图片后跳转

<!-- <img src="[https://cn.bing.com/images/search?q=图片&FORM=IQFRBA&id=94E5B2B0F268680EDC09B59CFF9383E54D3A41EC](https://cn.bing.com/images/search?q=图片&FORM=IQFRBA&id=94E5B2B0F268680EDC09B59CFF9383E54D3A41EC)" alt=""> -->    —根据链接跳转

<!-- 相对路径：

从当前文件位置开始找要使用的资源的过程

文件夹名称/要找的资源

../ --返回上一级

绝对路径

根相对路径 -->

4.2超链接

<a href="百度一下，你就知道">跳转到百度</a>

<a href="https:/www.baidu.com"target=_blank">新建页面跳转到百度</a>

  <a href="../33/01.html">跳转到图片</a>

<a href="../33/lian.html">跳转到自己的页面</a>

<a href="2.docx">跳转到world</a>

<!-- target=_"blank"--新建页面跳转 -->

4.3列表

ul{

/* 去掉列表项标识 */

list-style-type: none;

}

li:hover{

/* 当鼠标移入时样式 */

color:brown;

<!-- circle--空心圆

square--实心方块

none--去掉列表项标识 -->

4.4浮动

/* *--选择清除所有元素的内外边框 */

/* 选择所有元素 */

margin: 0;

padding: 0;

}

ul{

list-style: none;

/* 解决父元素高度为0的问题 */

/* 1.直接加高度 */

height: 200px;

/* 2.让父元素也浮动起来，并且需要给后续的元素设置消除浮动 */

float: left;

/* 3.固定用法:溢出隐藏 */

margin: 200px auto;

}

.a1{

/* 选择页面中class为a1的元素 */

background-color: aqua;

/* 浮动--漂浮，移动--网页布局 */

/* float:none/left/right */

/* 特点：

1.浮动的元素会脱离文档流（一楼），不占页面空间，后续的元素会上前补位。

2.浮动的元素会停靠在包含框的左边或者右边，取决于取值为left/right。

3.浮动的元素依然会位于父元素之内

4.浮动的元素会失去独占一行的特点

5.浮动时专门用来解决块级元素在一行显示的问题 */

float: left;

}

4.5扩展

li{

width: 150px;

height: 150px;

color: #fff;

text-align: center;

/* 垂直居中——行高 */

line-height: 40px;

float:left;

background-color: bisque;

/* 过渡--给实际发生变化的元素添加

取值为数值的数值的属性都可以过渡

transition：过渡属性时间速度函数延迟； */

transition:all .4s;

/* 过渡属性--all--所有发生变化的属性都可以过渡

时间--给用用户最好体验的过渡时间为0.3s--0.5s */

}

5.块级元素行内元素

5.1文本标记

/* 选择器{

属性名：属性值；

} */

<!-- 直观，可维护性差，不利于阅读，结构与样式

最低0.47元/天解锁文章