HBuilderx制作网页（sony官网）
常用知识点：
1.图片字体编辑
1.web学什么？ HTML5、CSS3等
2.创建网页 步骤 ：安装插件：工具-插件安装-插件市场
基本结构 注释ctrl+/（注释） 声明文档类型-告诉浏览器基于html的哪个版本执行的
ctrl+n创建文件 html:5创建格式 css？ style风格样式
常用转化器编码
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;
/* 等比缩放：-当只设置宽度或高度其中的一个属性时，另一个属性也会跟着等比缩放 */
}
—保存图片后跳转
—根据链接跳转
.png)
4.2超链接
新建页面跳转到百度
跳转到图片
4.3列表
ul{
/* 去掉列表项标识 */
list-style-type: none;
}
li:hover{
/* 当鼠标移入时样式 */
color:brown;
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文本标记
/* 选择器{
属性名：属性值；
属性名：属性值；
} */
加粗
23
H20
Ctrl+shift+s—另存 ctrl+n新建文件
5.2其他常用标记
这是P1
这是P2
这是H1
这是H2
这是H3
这是H4
这是H5
这是H6
5.3块级元素和行内元素
h1--h6 p div （使用最多的元素)
b i u s sub span (使用最多的行内元素)
网页制作（以某网页为例）：
html文件：
第一个：
索尼的所有业务都以技术为基础。围绕客户体验，索尼始终专注于技术创新，致力于用创意和科技的力量感动世界。
为此，我们不断加速科技创新，在电子、娱乐和金融服务三大主要业务领域持续创造社会价值，
树立全球创意娱乐领域的顶级品牌形象。
索尼始终高度关注中国消费者的需求，秉承“全球本土化”运营策略，
在中国强力打造适合本地化发展的集产品企划、设计、研发、生产、销售和服务为一体的综合性运营平台，
为中国的消费者带来更多具有创新性和高附加值的产品和服务。
第二个：
十年筑梦，传递感动—重访惠州湖山小学 用心打造索尼梦想教室
2023-03-30
阳春三月，索尼（中国）有限公司可持续发展部联合索尼精密部件（惠州）有限公司（下称：SPDH），在惠州湖山小学建立了第二间索尼 梦想教室，并带去了丰富多彩的梦想课程。索尼精密部件（惠州）有限公司总经理小林克彦先生、索尼（中国）有限公司可持续发展部总监高峰英纪先生以及当地教育局领导出席了本次活动，与湖山小学的师生们一起见证了索尼 梦想教室的揭牌落成。索尼公司希望凭借自身资源优势，贡献企业力量，用心打造梦想教室，为孩子们提供更好的教学环境。
索尼梦想教室揭牌
校方回赠荣誉奖牌
崭新的梦想教室
在捐赠仪式上，湖山小学的同学们表演了当地特色的非遗文化“李家拳”，歌曲《感恩的心》等精彩节目，表达对索尼公司捐赠的感激之情。孩子们来到崭新落成的索尼 梦想教室，看到先进的索尼多媒体教学设备，新奇不已，好奇地观看工作人员如何演示使用。在新教室中，索尼员工志愿者还为孩子们带来了“梦想课程”——索尼toio™创意机器人套件及主题编程课程以及CurioStep科学小实验。孩子们在志愿者的引导下，学得轻松愉快，沉浸在趣味十足的“梦想课程”中，这不仅给孩子们带来了欢乐，更激发了他们对科学及机器人编程的好奇心。
学生表演
梦想课程：toio™创意机器人套件及主题编程 和 CurioStep科学小实验
SPDH总经理小林克彦先生表示：“用创意和科技的力量感动世界是索尼的企业宗旨，索尼在中国秉承‘为了下一代’的企业社会责任理念，推进可持续发展活动。十年前，索尼在湖山小学进行了首次爱心助学活动，建立了第一间梦想教室，期间在学校进行了多次助学活动，十年前后的今天再次来到湖山小学并带来科学课程，我们希望能帮助孩子们全面成长，也希望通过这样的交流活动加深校企合作。‘索尼 梦想教室’的独特之处在于，不仅给孩子们提供优质的硬件设备，还将利用索尼丰富的资源及科学经验，持续给孩子们带来形式多样、生动有趣的梦想课程，帮助更多的中国青少年实现他们的梦想。”
/div>
SPDH小林克彦总经理致辞
索尼中国可持续发展部总监高峰先生与孩子们互动
十年筑梦，不忘初心！早在2013年，索尼梦想教室项目成立之初，一间崭新的教室就落成于此。十年过去了，当年教室门口的索尼梦想教室牌匾依然在。未来，我们将迎来下一个十年，希望能够携手更多利益相关方为社会贡献索尼的力量，助力高质量发展。
各方领导与湖山小学师生合影
第三个：
会员登陆
第四个：
创造一个充满情感的世界，为了下一代
以技术为动力，以多元化的人才团队为灵感。
我们正在向创造社会价值的挑战迈进。
环境
社区
.png)
新闻
2023年05月26日
2023年05月26日
2023年04月09日
2023年04月08日
2023年03月30日
css文件：
第一个：
*{
margin: 0;
padding: 0;
}
ol,ul{
list-style: none;
}
a{
color: ;
text-decoration: none;
}
.l{
float: left;
}
.r{
float: right;
}
/* 测试 */
/* #header,#nav,#wor,#bottom,#serve{
width: 100%;
height: 1200px;
border: 1px solid #888;
} */
.container{
margin: 0px auto;
}
#header{
height: 100px;
width: 2000px;
background-color: #000000;
line-height: 70px;
font-size: 20px;
color: white;
}
.header-left img{
position: absolute;
left: 100px;
top: 30px;
}
.header-right a{
height: 100px;
width: 500px;
color: white;
float: left;
box-sizing: border-box;
letter-spacing: 1.8px;
margin-right: -300px;
margin-top: 10px;
margin-left: 10px;
position:relative;
left: 300px;
transition: all .3s;
}
.header-right a:hover{
color: #3864DF;
transform: translateY(-5px);
}
#nav{
height: 200px;
width: 100%;
}
.nav-top{
height: 100px;
width: 800px;
color: #656565;
position: absolute;
left: 100px; /* ---待定 */
top: 130px;
color: #926579;
}
.nav-main{
font-size: 40px;
color: #656565;
position: absolute;
left: 100px;
top: 210px;
}#nai{
height: 600px;
width: 100%;
}
.w1 p{
margin-left: 100px;
color: #5D5D5D;
font-size: 22px;
}
.w2 p{
margin-left: 100px;
color: #5D5D5D;
margin-top: 25px;
}
#bottom{
height: 160px;
width: 1480px;
background-color: #EFEFEF;
}
.bottom-o{
height: 50px;
width: 100%;
margin-left: 100px;
/* position: absolute; */
padding: 30px 0px 0px 0px;
}
.bottom-t{
height: 40px;
width: 100%;
margin-top:15px;
font-size: 20px;
margin-left: 100px;
letter-spacing: 1px;
}
#serve{
height: 30px;
width: 100%;
padding: 40px ;
font-size: 20px;
background-color: #000000;
transition:all .3s;
letter-spacing: 1px;
/* 间距？？ */
}
#serve a{
color: white;
margin-left: 62px;
}
.s1{
margin-left: 150px;
margin-top: -26px;
/* margin-right: 200px; */
}
.s2{
color: white;
margin-left: 550px;
margin-top: -26px;
}
#serve a:hover{
color: #3864DF;
}
第二个：
*{
margin: 0;
padding: 0;
}
ol,ul{
list-style: none;
}
a{
color: ;
text-decoration: none;
}
.l{
float: left;
}
.r{
float: right;
}
/* 测试 */
/* #header,#nav,#pic,#wor,#maj,#ext,#bottom,#serve{
width: 100%;
height: 1500px;
border: 1px solid #888;
} */
/* .container{
margin: 0px auto;
} */
#header{
height: 100px;
width:100%;
background-color: #000000;
line-height: 70px;
font-size: 20px;
color: white;
}
.header-left img{
position: absolute;
left: 100px;
top: 30px;
}
.header-right a{
height: 100px;
width: 500px;
color: ghostwhite;
float: left;
box-sizing: border-box;
letter-spacing: 1.8px;
/* padding: 0px 0px 0px 250px; */
margin-right: -340px;
margin-top: 10px;
margin-left: 10px;
position: relative;
left: 300px;
/* transition: all .1s; */
}
.header-right a:hover{
color: #3864DF;
}
#nav{
height: 250px;
width: 100%;
}
.nav-top{
height: 100px;
width: 100%;
color: #656565;
position: absolute;
left: 100px; /* ---待定 */
top: 130px;
color: #926579;
}
.nav-main{
font-size: 40px;
color: #656565;
position: absolute;
left: 100px;
top: 210px;
}
#pic{
height: 800px;
width: 100%;
position: absolute;
left: 100px;
font-size: 30px;
}
.pic-o img{
height: 550px;
}
.pic-t p{
left: 400px;
top: 380px;
color: white;
position: absolute;
}
#wor{
padding: 100px 0px;
height: 100px;
width: 100%;
color: #926579;
font-size: 30px;
position: absolute;
left: 200px;
top: 900px;
border: 1px solid white;
}
#maj{
height: 800px;
width: 100%;
margin-top:900px;
}
.maj-a img{
height: 280px;
width: 620px;
margin-left: 100px;
}
.maj-a>p{
color: #656565;
margin-left: 380px;
font-size: 18px;
}
.maj-t {
height: 600px;
width: 100%;
margin-left: 100px;
}
.ma1 img{
height: 280px;
width: 620px;
margin-left: 780px;
position: absolute;
top: 1250px;
}
.ma1>p{
color: #656565;
font-size: 18px;
margin-left: 1100px;
margin-top: -26px;
}.ma2 img{
height: 160px;
width: 620px;
margin-left: 100px;
margin-top: 20px;
}
.ma3 img{
height: 160px;
width: 620px;
margin-left: 780px;
position: absolute;
top: 1575px;
}
.maj-t {
margin-top: 80px;
}
.maj-t p:hover{
color: aqua;
}
.m11{
padding-left: 10px;
width: 30%;
height: 100px;
margin-left: 10px;
background-color: #F2F2F2;
display: flex;
justify-content: center;
align-items: center;
}
.m11 p:hover{
color: aqua;
}
.m12{
padding-left: 10px;
width: 30%;
height: 100px;
margin-left: 480px;
background-color: #F2F2F2;
display: flex;
justify-content: center;
align-items: center;
}.m13{
padding-left: 10px;
width: 30%;
height: 100px;
margin-left: 950px;
background-color: #F2F2F2;
display: flex;
justify-content: center;
align-items: center;
margin-top: -100px;
}
.m21{
padding-left: 10px;
width: 30%;
height: 100px;
margin-left: 10px;
background-color: #F2F2F2;
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.m22{
padding-left: 10px;
width: 30%;
height: 100px;
margin-left: 480px;
background-color: #F2F2F2;
display: flex;
justify-content: center;
align-items: center;
margin-top: -100px;
}
.m23{
padding-left: 10px;
width: 30%;
height: 100px;
margin-left: 950px;
background-color: #F2F2F2;
display: flex;
justify-content: center;
align-items: center;
margin-top: -100px;
}
.m31{
padding-left: 10px;
width: 30%;
height: 100px;
margin-left: 10px;
background-color: #F2F2F2;
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.m32{
padding-left: 10px;
width: 30%;
height: 100px;
margin-left: 480px;
background-color: #F2F2F2;
display: flex;
justify-content: center;
align-items: center;
margin-top: -100px;
}
.m33{
padding-left: 10px;
width: 30%;
height: 100px;
margin-left: 950px;
background-color: #F2F2F2;
display: flex;
justify-content: center;
align-items: center;
margin-top: -100px;
}
#ext{
height: 700px;
width: 100%;
}
#ext span{
font-size: 40px;
color: #656565;
margin-left: 100px;
position: absolute;
top: 2379px;
}
.ext-l>.e1 p{
color: #AA7B63;
line-height: 70px;
margin-left: 100px;
margin-top: 30px;
}
.e2{
margin-top: -446px;
margin-left: 250px;
}
.e2 p:hover{
color: aqua;
text-decoration: underline;
}
.e3{
margin-top: 79px;
}
.e3 p:hover{
color: aqua;
text-decoration: underline;
}
.e4{
margin-top: 80px;
}
.e4 p:hover{
color: aqua;
text-decoration: underline;
}
.e5{
margin-top: 80px;
}
.e6{
margin-top: 80px;
}
.ext-r img{
height: 510px;
width: 520px;
margin-left: 900px;
position: absolute;
top: 2400px;
}
#bottom{
height: 160px;
width: 100%;
background-color: #EFEFEF;
}
.bottom-o{
height: 50px;
width: 100%;
margin-top:-60px;
margin-left: 100px;
/* position: absolute; */
padding: 30px 0px 0px 0px;
}
.bottom-t{
height: 40px;
width: 100%;
margin-top:15px;
font-size: 20px;
margin-left: 100px;
letter-spacing: 1px;
}
#serve{
height: 30px;
width: 100%;
padding: 40px ;
font-size: 20px;
background-color: #000000;
transition:all .3s;
letter-spacing: 1px;
writing-mode: t;
/* 间距？？ */
}
#serve a{
color: white;
margin-left: 62px;
}
.s1{
margin-left: 150px;
margin-top: -26px;
/* margin-right: 200px; */
}
.s2{
color: white;
margin-left: 550px;
margin-top: -26px;
}
#serve a:hover{
color: #3864DF;
}
第三个：
*{
margin: 0;
padding: 0;
}
ol,ul{
list-style: none;
}
a{
color: ;
text-decoration: none;
}
.l{
float: left;
}
.r{
float: right;
}
/* 测试
#header,#nav,#pic,#wor,#bottom,#serve{
width: 100%;
height: 1200px;
border: 1px solid #888;
}
.container{
margin: 0px auto;
} */
#header{
height: 100px;
width: 2000px;
background-color: #000000;
line-height: 70px;
font-size: 20px;
color: white;
}
.header-left img{
position: absolute;
left: 100px;
top: 30px;
}
.header-right a{
height: 100px;
width: 500px;
color: white;
float: left;
box-sizing: border-box;
letter-spacing: 1.8px;
margin-right: -300px;
margin-top: 10px;
margin-left: 10px;
position:relative;
left: 300px;
transition: all .3s;
}
.header-right a:hover{
color: #3864DF;
transform: translateY(-5px);
}
#nav{
height: 200px;
width: 100%;
}
.nav-top{
height: 100px;
width: 100%;
color: #656565;
position: absolute;
left: 100px; /* ---待定 */
top: 130px;
color: #926579;
}
.nav-main{
font-size: 40px;
color: #656565;
position: absolute;
left: 100px;
top: 210px;
}#nai{
height: 600px;
width: 100%;
}
#nai p{
font-size: 100px;
}
#pic{
height: 900px;
width: 100%;
}
#pic h1{
text-align: center;
}
#pic p{
text-align: center;
color: #656565;
margin-top: 10px;
}
.p1 p{
color: #656565;
margin-top: -800px;
margin-left: 100px;
}
.p1 img{
margin-left: 400px;
margin-top: 30px;
}
.p2 p{
text-align: center;
color:#656565;
margin-top: 8px;
}
.p2 img{
margin-left: 400px;
margin-top: 35px;
}
.p3 p{
margin-left: 100px;
color:#656565;
margin-top: 8px;
}
.p3 img{
margin-left: 400px;
margin-top: 35px;
}
.p4 p{
text-align: center;
color:#656565;
margin-top: 8px;
}
.p4 img{
margin-left: 400px;
margin-top: 35px;
}
.p5 p{
margin-left: 100px;
color:#656565;
margin-top: 8px;
}
.p5 img{
margin-left: 400px;
margin-top: 35px;
}
.p6 p{
text-align: center;
color:#656565;
margin-top: 8px;
}
.p7{
margin-left: 100px;
color:#656565;
margin-top: 8px;
}
.p8 p{
text-align: center;
color:#656565;
margin-top: 8px;
}
.p9 img{
margin-left: 1180px;
}
#bottom{
height: 160px;
width: 100%;
background-color: #EFEFEF;
margin-top: 120px;
}
.bottom-o{
height: 50px;
width: 100%;
margin-top:-60px;
margin-left: 100px;
/* position: absolute; */
padding: 30px 0px 0px 0px;
}
.bottom-t{
height: 40px;
width: 100%;
margin-top:15px;
font-size: 20px;
margin-left: 100px;
letter-spacing: 1px;
}
#serve{
height: 30px;
width: 100%;
padding: 40px ;
font-size: 20px;
background-color: #000000;
transition:all .3s;
letter-spacing: 1px;
writing-mode: t;
/* 间距？？ */
}
#serve a{
color: white;
margin-left: 62px;
}
.s1{
margin-left: 150px;
margin-top: -26px;
/* margin-right: 200px; */
}
.s2{
color: white;
margin-left: 550px;
margin-top: -26px;
}
#serve a:hover{
color: #3864DF;
}