HBuilderx制作网页（sony官网）

这就是鱼头

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

阅读量5.9k

点赞数 45

文章标签： 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文本标记

/* 选择器{

属性名：属性值；

} */

2<sup>3</sup>

H<sub>2</sub>0

Ctrl+shift+s—另存 ctrl+n新建文件

5.2其他常用标记

<!-- 特点

1.独占一行

2.上下行间距

3.一般用于页面中的纯文本

4.p标签中不能嵌套其他的块级元素-->

<!-- 特点

1.文本尺寸依次减小

2.独占一行

3.文本加粗

4.上下行间距-->

5.3块级元素和行内元素

h1--h6 p div （使用最多的元素)

b i u s sub span (使用最多的行内元素)

网页制作（以某网页为例）：

html文件：

第一个：

第二个：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="keywords" content="/etc/designs/wknd"/>
<title>SONY</title>
<link rel="stylesheet" href="css/2index.css">

</head>
<body>
<div id="header">
<div class="container">
<div class="header-left l">
<img src="images/log.png" alt="">

</div>
<div class="header-right " >
<a href="#">首页</a>
<a href="#">环境</a>
<a href="#">社区</a>
<a href="#">高层致辞</a>
<a href="#">新闻</a>
<a href="#">报告下载</a>
</div>
</div>
</div>
<div id="nav">
<div class="nav-top" r>
<a href="#">索尼中国首页</a> &gt <a href="#">可持续发展</a> &gt <a href="#">新闻</a>
&gt <a href="#"> 索尼首次披露阻燃再生塑料SORPLAS研发路径，与合作伙伴共筑低碳可持续发展之路</a>
</div>
<div class="nav-main">
<span>新闻</span>
</div>
</div>
<div id="pic">
<h1>十年筑梦，传递感动—重访惠州湖山小学用心打造索尼梦想教室</h1>
<p>2023-03-30</p>
</div>
<div class="p1">
<p>阳春三月，索尼（中国）有限公司可持续发展部联合索尼精密部件（惠州）有限公司（下称：SPDH），在惠州湖山小学建立了第二间索尼梦想教室，并带去了丰富多彩的梦想课程。索尼精密部件（惠州）有限公司总经理小林克彦先生、索尼（中国）有限公司可持续发展部总监高峰英纪先生以及当地教育局领导出席了本次活动，与湖山小学的师生们一起见证了索尼梦想教室的揭牌落成。索尼公司希望凭借自身资源优势，贡献企业力量，用心打造梦想教室，为孩子们提供更好的教学环境。</p>
<img src="images/14.jpg" alt="">
</div>
<div class="p2">
<p>索尼梦想教室揭牌</p>
<img src="images/8.jpg" alt="">

<p>校方回赠荣誉奖牌</p>
<img src="images/十年筑梦，传递感动—重访惠州湖山小学用心打造索尼梦想教室_files/1680234747221.jpg" alt="">
<p>崭新的梦想教室</p>
</div>
<div class="p3">
<p>在捐赠仪式上，湖山小学的同学们表演了当地特色的非遗文化“李家拳”，歌曲《感恩的心》等精彩节目，表达对索尼公司捐赠的感激之情。孩子们来到崭新落成的索尼梦想教室，看到先进的索尼多媒体教学设备，新奇不已，好奇地观看工作人员如何演示使用。在新教室中，索尼员工志愿者还为孩子们带来了“梦想课程”——索尼toio™创意机器人套件及主题编程课程以及CurioStep科学小实验。孩子们在志愿者的引导下，学得轻松愉快，沉浸在趣味十足的“梦想课程”中，这不仅给孩子们带来了欢乐，更激发了他们对科学及机器人编程的好奇心。</p>
<img src="images/十年筑梦，传递感动—重访惠州湖山小学用心打造索尼梦想教室_files/1680234787417.jpg" alt="">

</div>
<div class="p4">
<p>学生表演</p>
<img src="images/十年筑梦，传递感动—重访惠州湖山小学用心打造索尼梦想教室_files/1680234808561.jpg" alt="">
<p>梦想课程：toio™创意机器人套件及主题编程和 CurioStep科学小实验</p>
</div>
<div class="p5">
<p>SPDH总经理小林克彦先生表示：“用创意和科技的力量感动世界是索尼的企业宗旨，索尼在中国秉承‘为了下一代’的企业社会责任理念，推进可持续发展活动。十年前，索尼在湖山小学进行了首次爱心助学活动，建立了第一间梦想教室，期间在学校进行了多次助学活动，十年前后的今天再次来到湖山小学并带来科学课程，我们希望能帮助孩子们全面成长，也希望通过这样的交流活动加深校企合作。‘索尼梦想教室’的独特之处在于，不仅给孩子们提供优质的硬件设备，还将利用索尼丰富的资源及科学经验，持续给孩子们带来形式多样、生动有趣的梦想课程，帮助更多的中国青少年实现他们的梦想。”</p>
<img src="images/十年筑梦，传递感动—重访惠州湖山小学用心打造索尼梦想教室_files/1680234853148.jpg" alt="">
/div>
<div class="p6">
<p>SPDH小林克彦总经理致辞</p>
<img src="images/十年筑梦，传递感动—重访惠州湖山小学用心打造索尼梦想教室_files/1680234870096.jpg" alt="">
<p>索尼中国可持续发展部总监高峰先生与孩子们互动</p>
</div>
<div class="p7">
十年筑梦，不忘初心！早在2013年，索尼梦想教室项目成立之初，一间崭新的教室就落成于此。十年过去了，当年教室门口的索尼梦想教室牌匾依然在。未来，我们将迎来下一个十年，希望能够携手更多利益相关方为社会贡献索尼的力量，助力高质量发展。
</div>
<div class="p8">
<img src="images/十年筑梦，传递感动—重访惠州湖山小学用心打造索尼梦想教室_files/1680234905677.jpg" alt="">
<p>各方领导与湖山小学师生合影</p>
</div>
<div class="p9">
<img src="images/十年筑梦，传递感动—重访惠州湖山小学用心打造索尼梦想教室_files/2023-09-14_165809.png" alt="">
</div>
<div id="wor">

</div>
<div id="bottom">
<div class="bottom-o">
<a href="#">索尼中国首页</a> &gt <a href="#">可持续发展</a>&gt <a href="#">新闻</a>
&gt <a href="#"> 索尼首次披露阻燃再生塑料SORPLAS研发路径，与合作伙伴共筑低碳可持续发展之路</a>

</div>
<div class="bottom-t">

<a href="#">首页</a>
<a href="#">环境</a>
<a href="#">社区</a>
<a href="#">高层致辞</a>
<a href="#">新闻</a>
<a href="#">报告下载</a>
</div>

</div>
</div>
<div id="serve">
<a href="#">联系我们</a>
<div class="s1">
<a href="#">责任声明</a>
<a href="#">隐私政策</a>
</div>
<div class="s2">
<p>2023 索尼（中国）有限公司版权所有</p>

</div>
</div>
</body>
</html>

第三个：

<!DOCTYPE html>
<html>
<head>
<title>中国索尼</title>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
width: 300px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
margin-top: 170px;
}
.container h2 {
text-align: center;
}
.container input[type="text"],
.container input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
}
.container button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h2>会员登陆</h2>
<form>
<input type="text" placeholder="手机号码" required>
<input type="password" placeholder="密码" required>
<button type="submit">登录</button>
</form>
</div>
</body>
</html>

第四个：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="keywords" content="/etc/designs/wknd"/>
<title>SONY</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="header">
<div class="container">
<div class="header-left l">
<img src="images/log.png" alt="">

</div>
<div class="header-right " >
<a href="#">首页</a>
<a href="#">环境</a>
<a href="#">社区</a>
<a href="#">高层致辞</a>
<a href="#">新闻</a>
<a href="#">报告下载</a>
<a href="l-3-index.html">登录</a>
</div>
</div>
</div>
<div id="nav">
<div class="nav-top r">
<a href="#">索尼中国首页</a> &gt <a href="#">可持续发展</a>
</div>
<div class="nav-main">
<span>首页</span>
</div>
</div>

<div id="pic" >
<div class="pic-o">
<img src="images/a.png" alt=""></div>
<div class="pic-t">
<p>创造一个充满情感的世界，为了下一代</p>
</div>
</div>
<div id="wor">
<div class="wor-o">
<p>以技术为动力，以多元化的人才团队为灵感。</p>
<p>我们正在向创造社会价值的挑战迈进。</p>
<p3>此外，我们正在加快环境和社会举措，以实现可持续发展的社会和更光明的未来。</p3>
</div>
</div>
<div id="maj">

<div class="maj-a">
<img src="images/1636966226283.png" alt="" srcset="">
<p>环境</p>
</div>
<div class="ma1">
<img src="images/1636966235013.png" alt="">
<p>社区</p>
</div>
<div class="ma2">
<img src="images/1689908975703.png" alt="">
</div>
<div class="ma3">
<img src="images/1689908975703(1).png" alt="">
</div>
<div class="maj-t">

<div class="m11 l">
<a href="l-a1-index.html"><img src="images/1636966254679.png" alt=""> <a href="l-a1-index.html"><p>公司治理</p></a></a>

</div>
<div class="m12 ">
<a href="l-a1-index.html"><img src="images/1636966249682.png" alt=""> <a href="l-a2-index.html"><p>合规计划</p></a></a>

</div>
<div class="m13">
<a href="l-a3-index.html"><img src="images/1636966251988.png" alt=""><a href="l-a3-index.html"><p>平权</p></a></a>

</div>
<div class="m21">
<a href="l-1index.html"><img src="images/1636966234999.png" alt=""><a href="l-1index.html"><p>技术</p></a></a>

</div>
<div class="m22">
<a href="l-a4-index.html"><img src="images/1636966246979.png" alt=""><a href="l-a4-index.html"><p>员工</p></a></a>

</div>
<div class="m23">
<a href="l-a5-index.html"><img src="images/1636966254665.png" alt=""><a href="l-a5-index.html"><p>责任采购</p></a></a>

</div>

<div class="m31">
<a href="l-a6-index.html"><img src="images/1636966223253.png" alt=""><a href="l-a6-index.html"><p>产品质量和服务</p></a></a>

</div>
<div class="m32">
<a href="l-a7-index.html"> <img src="images/1636966226265.png" alt=""><a href="l-a7-index.html"><p>环境</p></a></a>

</div>
<div class="m33">
<a href="l-a8-index.html"><img src="images/1636966241107.png" alt=""><a href="l-a8-index.html"><p>社区</p></a></a>

</div>
</div>
<div id="ext">
<span>新闻</span>
<div class="ext-l">
<div class="e1">
<p>2023年05月26日</p>
<p>2023年05月26日</p>
<p>2023年04月09日</p>
<p>2023年04月08日</p>
<p>2023年03月30日</p>
</div>
<div class="e2 ">
<a href="l-a3-index.html"><p>索尼首次披露阻燃再生塑料SORPLAS研发路径，与合作伙伴共筑地毯可持续发展之路</p></a>
<div class="e3">
<a href="l-a4-index.html"><p>将可持续发展全面融入业务，索尼首次完整公开在华可持续发展最新成果</p></a>
</div>
<div class="e4">
<a href="l-a5-index.html"><p>春日添新绿低碳向未来索尼碳汇林在京开展累计11年</p></a>
</div>
<div class="e5">
<a href="l-a6-index.html"><p>为了下一代，十年筑梦，索尼在华建立284间筑梦教室</p></a>
</div>
<div class="e6">
<a href="l-2index.html"><p>十年筑梦，传递感动--重访惠州湖山小学用心打造索尼梦想教室</p></a>
</div>

</div>
</div>
<div class="ext-r ">
<img src="images/29.png" alt="">
</div>
</div>
<div id="bottom">
<div class="bottom-o">
<a href="#">索尼中国首页</a> &gt <a href="#">可持续发展</a>

</div>
<div class="bottom-t">

<a href="#">首页</a>
<a href="#">环境</a>
<a href="#">社区</a>
<a href="#">高层致辞</a>
<a href="#">新闻</a>
<a href="#">报告下载</a>
</div>

</div>
<div id="serve">

<a href="#">联系我们</a>
<div class="s1">
<a href="#">责任声明</a>
<a href="#">隐私政策</a>
</div>
<div class="s2">
<p>2023 索尼（中国）有限公司版权所有</p>

</div>
</div>
</body>
</html>

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;
}