web零基础学习笔记

青旅半醒 2022-05-29 06:06 252阅读 0赞

1.  常见编码有：ANSI 、GBK 、GB2312、 UTF-8、 GB18030 、UNICODE；一般用UTF-8，<meta charset="UTF-8" />
2.  内框架（iframe标签）,相当于将一个网页嵌入到另一个网页中。对iframe的高度使用百分比的时候,需要将html,body的高度设置为100%  
    
3.  <pre>最常见的应用就是用来表示计算机源代码，代码里面<>用< >代替  
    
4.  span标签通常用于在行内文本中标记某些文本，span标签经常在段落（p）和大文本中（div）。span是行标签，一般情况下给宽度和高度是没有意义。div是块级元素，一般会新开一行，默认占住整行。<span style="display:block">将行内元素变成块级元素，变成块元素后可以设置宽高  
    
5.  \*\{margin:0;padding:0;\}表示全局声明div的边框外部和元素距离为0。  
    
6.  target 属性规定在何处打开 action URL。例如下面代码

<p><a href="http://www.w3school.com.cn/html5/att\_form\_target.asp" target="iframe">实现框架内跳转页面</a></p>

7.国际互联网单导航都用ul li

在li,ul内加入list-style，list-style-type属性：

none不使用项目符号    
disc实心圆，默认值    
circle空心圆    
square实心方块    
decimal阿拉伯数字    
lower-roman小写罗马数字    
upper-roman大写罗马数字    
lower-alpha小写英文字母

upper-alpha大写英文字母

8./\* \*/注释符用在css样式表中，用在html中

9.<ol start="10"><li></li></ol>则序列前的数字以10开始

<ol  type="A"><li></li></ol>则序列以ABC开始排序

10.<frameset>标签：定义一个框架集  
语法：  
<frameset  cols/rows=“25%,50%,25%>  
<frame src=“url1”/>  
<frame src=“url2”/>  
<frame src=“url3”/>  
</frameset>  
假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"。

不可放入body,直接在html标签内。

实现效果图

![Image 1][]

11.将<th>表格表头放入tr标签，可实现表头成为一列的效果

</tr>

![Image 1][]

12.CSS3 transition 属性

td:hover\{  
background-color: green;  
transition: 2s;

实现效果为：当鼠标放在td上时，在2S内背景颜色由没有慢慢变为绿色

13. HTML中Form表单提交时,采用 get和post的区别：

a、Get是用来从服务器上获得数据，而Post是用来向服务器上传递数据。  
b、Get将表单中数据的按照variable=value的形式，添加到action所指向的URL后面，并且两者使用“?”连接，而各个变量之间使用“&”连接；Post是将表单中的数据放在form的数据体中，按照变量和值相对应的方式，传递到action所指向URL。  
c、Get是不安全的，因为在传输过程，数据被放在请求的URL中，而如今现有的很多服务器、代理服务器或者用户代理都会将请求URL记录到日志文件中，然后放在某个地方，这样就可能会有一些隐私的信息被第三方看到。另外，用户也可以在浏览器上直接看到提交的数据，一些系统内部消息将会一同显示在用户面前。Post的所有操作对用户来说都是不可见的。  
d、Get传输的数据量小，这主要是因为受URL长度限制；而Post可以传输大量的数据，所以在上传文件只能使用Post（当然还有一个原因，将在后面的提到）。  
e、Get限制Form表单的数据集的值必须为ASCII字符；而Post支持整个ISO10646字符集。

f、Get是Form的默认方法。

14.<input type="checkbox"> 和 <input type="radio"> 中必须设置 value 属性,value传给后台的值

15.input type="submit" 和input type="button"和button标签区别

<input type="button" /> 这就是一个按钮。如果你不写javascript 的话，按下去什么也不会发生。（推荐使用）

<input type="submit" /> 这样的按钮用户点击之后会自动提交 form，除非你写了javascript 阻止它。

<button> 这个按钮放在 form 中也会点击自动提交，比前两个的优点是按钮的内容不光可以有文字，还可以有图片等多媒体内容。（当然，前两个用图片背景也可以做到）。它的缺点是不同的浏览器得到的 value 值不同；可能还有其他的浏览器兼容问题（葛亮）。

16.background-position设置背景位置

top left、top center、top right、center left、center center、center right、bottom left、bottom center、bottom right  
如果您仅规定了一个关键词，那么第二个值将是"center"。  
默认值：0% 0%。  
x% y%  
第一个值是水平位置，第二个值是垂直位置。  
左上角是 0% 0%。右下角是 100% 100%。  
如果您仅规定了一个值，另一个值将是 50%。  
xpos ypos  
第一个值是水平位置，第二个值是垂直位置。

左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。

17.text-decoration 属性规定添加到文本的修饰。  
none默认，定义标准的文本；underline，定义文本下的一条线；overline，定义文本上的一条线；line-through，定义穿过文本下的一条线。

<del></del>标签实现和text-decoration：line-through相同的效果。

18.text-indent 属性规定文本块中首行文本的缩进

text-indent: 2em;设置首行文本缩进两字符

19.text-transforM 属性控制文本的大小写

none默认，定义带有小写字母和大写字母的标准的文；capitalize文本中的每个单词以大写字母开头；uppercase定义仅有大写字母；lowercase定义无大写字母，仅有小写字母。

20.font-family设置字体系列;font-size设置字体的尺寸;font-weight设置文本的粗细。（100-900）

21.设置图片：position:fixed;bottom:0;right:0;可以实现图片固定在右下角

22.padding：给盒子添加内边距会增大盒子体积，如果不想要改变盒子体积，增加padding后，给盒子宽度减去padding数值的两倍，给盒子高度减去padding数值的两倍；如果说padding只添加一个值会在四个方向都添加；如果说padding只添加两个值，第一个值代表上下，第二个值代表左右；如果说padding只添加三个值，第一个值代表上，第二个值代表左右两个方向都增加padding，第三个值代表下；如果说padding添加四个值，第一个值代表上，第二个值代表右，第三个值代表下，第四三个值代表左；

23.margin:给容器添加margin不会增大盒子体积；值代表方向与padding相似；margin:0 auto实现盒子居中；合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

24.边框 (border) ：none定义无边框；hidden与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突；dotted定义点状边框。在大多数浏览器中呈现为实线；dashed定义虚线，在大多数浏览器中呈现为实线；solid定义实线；double定义双线。双线的宽度等于 border-width 的值；groove定义 3D 凹槽边框。其效果取决于 border-color 的值；ridge定义 3D 垄状边框。其效果取决于 border-color 的值；inset定义 3D inset 边框。其效果取决于 border-color 的值；outset定义 3D outset 边框。其效果取决于 border-color 的值

25.absolute  
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。  
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。  
fixed  
生成绝对定位的元素，相对于浏览器窗口进行定位。  
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。  
relative  
生成相对定位的元素，相对于其正常位置进行定位。  
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。  
static默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。  
inherit规定应该从父元素继承 position 属性的值。

position:relative相对定位，相对的是自身原来的位置，不是body或html。注意，在使用相对定位时，定位以后位置改变，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框，一切定位的元素会显示在没有定位的元素的上面。

![70][]

26.position:absolute绝对定位：元素位置相对于最近的已定位祖先元素， 如果元素没有已定位的祖先元素，它的位置相对于最初的包含块。

![70 1][]![70 2][]

27.z-index设置元素的堆叠顺序

必须先设置盒子的位置为相对或绝对，然后设置z-index: -1，那么该盒子便会在最底层。

拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。  
注释：元素可拥有负的 z-index 属性值。  
注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

说明:该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

28.clip: rect(top, right, bottom, left))可以实现元素的矩形裁剪效果。该方法用于裁剪画布，也就是设置画布的显示区域。例如如下：

img\{  
position: absolute;  
clip: rect(0px 50px 200px 0px);  
\}

29.清除浮动

a.可以通过给box类添加一个子div，设置div样式为清除

b.给box类添加样式overflow: hidden;

c.给父级box类设定合适的高度或者display:table;

30.常见的行内元素：a - 锚点；select - 项目选择；b - 粗体(不推荐)；span - 常用内联容器，定义文本内区块；br - 换行；strong - 粗体强调；em - 强调；sub - 下标；i - 斜体；img - 图片；textarea - 多行文本输入框；input - 输入框；u - 下划线；label - 表格标签

常见块级元素：div - 常用块级容易，也是css layout的主要标签；dl - 定义列表；h1 - h6 标题标签；hr - 水平分隔线；menu - 菜单列表；ol - 排序表单；p - 段落；table - 表格；ul - 非排序列表

31.border-radius: 5px用来设置圆矩;box-shadow: 1px 1px 1px black用来设置阴影，呈现3D效果，第一个像素设置左右方向，第二个像素设置上下方向，第三个像素设置模糊度，第四个设置颜色;

32.transition属性，产生过渡效果。transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。代码如下：transition: 1s;transform: scale(0.9);

33.display属性：简单的说就是控制元素显示的方式。常用的属性值有：none ：此元素不会被显示；block ：此元素将显示为块级元素，此元素前后会带有换行符；Inline： 默认值此元素会被显示为内联元素，元素前后没有换行符；inline-block : 此元素将显示为行内块级元素 . 元素前后没有换行符。

行内元素设置宽高无意义

34.overflow规定当内容溢出元素框时发生的事情。这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要用户代理都会提供一种滚动机制 ;有可能即使元素框中可以放下所有内容也会出现滚动条 ;  
参数介绍：  
visible：内容不会被修剪，会呈现在元素框之外。  
hidden：内容会被修剪，但是浏览器不会显示供查看内容的滚动条。  
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto：由浏览器决定如何显示。如果需要，则显示滚动条。

contenteditable="true"设置盒子内的内容可编辑

35.实现页面左右两端留空，最外面为一个div，然后嵌套一个div承载这些内容，然后设置里面这个div的宽度（宽度小于父级div宽度）和margin:0 auto（实现居中），然后高度设置为100%，这样只是左右两端留空

![70 3][]

36.实现左右页面，只需要为两个div设置float:left;float:right;.

37.实现左中右三列页面，

三列自适应宽度 （左列和右列固定，中间列根据浏览器宽度自适应）  
左列设置宽、高、背景颜色后，页面不显示，需要设置position:fixed  
生成绝对定位的元素，相对于浏览器窗口进行定位。  
        元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。  
        中间列不设置宽高，让其根据浏览器宽度自适应。  
        同时，设置中间列margin-left:21%;margin-right:21%;为左右两列留下足够空间。

右列设置宽、高、背景颜色后，设置position:fixed，同时需要设置相对于浏览器窗口的位置。

css代码如下：

</style>

html代码如下：

文字...

</div>  
<div class="right"></div>  
</div>

效果图如下：

![70 4][]

38.实现控制在小屏幕时的样式，注意：and后需要空格！！！

@media screen and (max-width: 1000px)\{  
 /\*css样式\*/

39.为li插入音效

代码如下：

<ul id="list">  
<li>测试音效1</li>  
<li>测试音效2</li>  
<li>测试音效3</li>  
</ul>  
<audio src="1.wav" id="audioid"></audio>  
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>  
<script>  
$(function()\{  
var audioplay=document.getElementById("audioid");  
$("\#list").find("li").hover(function()\{  
var index=$(this).index();  
audioplay.pause();  
audioplay.src=index+".mp3";  
audioplay.play();  
    \});  
\});  
</script>

32.index的使用

![2018040915001126][]

33.设置阴影层

css代码如下：

html代码如下：

<div class="overlay"></div>  
设置阴影层  
文字不放入div中  
设置准备设置为阴影层的div的透明度  
设置在阴影层上的div的堆叠顺序比阴影层大  
<div class="box">  
<input type="button" value="登陆">  
</div>

效果图如下：

![70 5][]

有时候，只想实现背景颜色透明，但是文字不透明，那么：background:rgba(颜色,颜色,颜色,透明度)，最后一个值填写透明度，不用opacity

一、CSS兼容代码,完整写法

<table style="border-spacing:0px;border:1px solid #C0C0C0;width:934px;margin:0px;padding:0px;background:none;float:none;height:auto;line-height:1.1em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;min-height:auto;"> 
 <tbody style="margin:0px;padding:0px;background:none;float:none;height:auto;line-height:1.1em;vertical-align:baseline;width:auto;min-height:auto;"> 
  <tr style="margin:0px;padding:0px;background:none;border-top:0px;float:none;height:auto;line-height:1.1em;vertical-align:baseline;width:auto;min-height:auto;"> 
   <td style="padding:3px;border-color:#C0C0C0;border-collapse:collapse;margin:0px;background:none;float:none;height:auto;line-height:1.1em;vertical-align:baseline;width:35px;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;min-height:auto;color:rgb(175,175,175);"> 
    <div style="margin:0px;padding:0px .5em;background:rgb(244,244,244) none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);float:none;height:auto;line-height:1.8em;text-align:right;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;">
      1 
    </div> 
    <div style="margin:0px;padding:0px .5em;background-image:none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);float:none;height:auto;line-height:1.8em;text-align:right;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;">
      2 
    </div> 
    <div style="margin:0px;padding:0px .5em;background:rgb(244,244,244) none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);float:none;height:auto;line-height:1.8em;text-align:right;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;">
      3 
    </div> 
    <div style="margin:0px;padding:0px .5em;background-image:none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);float:none;height:auto;line-height:1.8em;text-align:right;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;">
      4 
    </div> 
    <div style="margin:0px;padding:0px .5em;background:rgb(244,244,244) none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);float:none;height:auto;line-height:1.8em;text-align:right;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;">
      5 
    </div> 
    <div style="margin:0px;padding:0px .5em;background-image:none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);float:none;height:auto;line-height:1.8em;text-align:right;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;">
      6 
    </div></td> 
   <td style="padding:3px;border-color:#C0C0C0;border-collapse:collapse;margin:0px;background:none;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;float:none;height:auto;line-height:1.1em;vertical-align:baseline;width:auto;font-size:12px;min-height:auto;"> 
    <div style="margin:0px;padding:0px;background:none;border:0px;float:none;height:auto;line-height:1.1em;vertical-align:baseline;width:auto;min-height:auto;"> 
     <div style="margin:0px;padding:0px 1em;background:rgb(244,244,244) none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;"> 
      <code style="margin:0px;padding:0px;background:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">.</code> 
      <code style="margin:0px;padding:0px;background:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,153,0);">transparent</code>&nbsp; 
      <code style="margin:0px;padding:0px;background:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">{&nbsp;</code> 
     </div> 
     <div style="margin:0px;padding:0px 1em;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;"> 
      <code style="margin:0px;padding:0px;background:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;">&nbsp;&nbsp;&nbsp;</code> 
      <code style="margin:0px;padding:0px;background:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">filter:alpha(opacity=</code> 
      <code style="margin:0px;padding:0px;background:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,153,0);">50</code> 
      <code style="margin:0px;padding:0px;background:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">);&nbsp;&nbsp;</code> 
      <code style="margin:0px;padding:0px;background:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,130,0);">/* IE */</code> 
     </div> 
     <div style="margin:0px;padding:0px 1em;background:rgb(244,244,244) none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;"> 
      <code style="margin:0px;padding:0px;background:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;">&nbsp;&nbsp;&nbsp;</code> 
      <code style="margin:0px;padding:0px;background:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">-moz-opacity:</code> 
      <code style="margin:0px;padding:0px;background:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,153,0);">0.5</code> 
      <code style="margin:0px;padding:0px;background:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="margin:0px;padding:0px;background:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,130,0);">/* FireFox old version*/</code> 
     </div> 
     <div style="margin:0px;padding:0px 1em;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;"> 
      <code style="margin:0px;padding:0px;background:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;">&nbsp;&nbsp;&nbsp;</code> 
      <code style="margin:0px;padding:0px;background:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">-khtml-opacity:&nbsp;</code> 
      <code style="margin:0px;padding:0px;background:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,153,0);">0.5</code> 
      <code style="margin:0px;padding:0px;background:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="margin:0px;padding:0px;background:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,130,0);">/* Sarfari old version */</code> 
     </div> 
     <div style="margin:0px;padding:0px 1em;background:rgb(244,244,244) none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;"> 
      <code style="margin:0px;padding:0px;background:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;">&nbsp;&nbsp;&nbsp;</code> 
      <code style="margin:0px;padding:0px;background:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">opacity:&nbsp;</code> 
      <code style="margin:0px;padding:0px;background:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,153,0);">0.5</code> 
      <code style="margin:0px;padding:0px;background:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="margin:0px;padding:0px;background:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,130,0);">/* FireFox */</code> 
     </div> 
     <div style="margin:0px;padding:0px 1em;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;"> 
      <code style="margin:0px;padding:0px;background:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">}</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

34.transition

transition: top 0.3s ease;表示对top进行过渡

transition: all 0.3s ease;表示对所有进行过渡

35.实现鼠标移动到一个物体上，该物体从左上角进入另外一个物体

css代码如下：

html代码如下：

<div class="center">  
<div class="box">  
1  
<div class="box1">我是一个文字</div>  
</div>  
<div class="box">  
1  
<div class="box1">我是一个文字</div>  
</div>  
<div class="box">  
1  
<div class="box1">我是一个文字</div>  
</div>  
<div class="box">  
1  
<div class="box1">我是一个文字</div>  
</div>  
<div class="box">  
1  
<div class="box1">我是一个文字</div>  
</div>  
<div class="box">  
1  
<div class="box1">我是一个文字</div>  
</div>

</div>

36.transition

css3的transition允许css的属性值再一定的时间内平滑的过渡.这种效果可以在鼠标单击.获得焦点,被点击或对任何元素改变中触发,并平滑的以动画效果改变css的属性值.

![70 6][]

![70 7][]

html代码：

css代码：

\*\{margin:0;padding:0;\}  
.box\{width: 400px;height: 400px;background-color: \#EE7AE9;transition: all 3s linear;margin: 10px auto;\}

.box:active\{border-radius: 50%;width: 200px;height: 200px;background-color: \#EE7600;transition: border-radius 3s linear,width 2s ease,height 1s ease-in,background-color 0.5s ease-out\}

37.css变形

css3变形是一些效果的集合,比如平移,旋转,缩放和倾斜效果等.每个效果都称之为变形函数.它们可以操控元素发生旋转等变化.在此之前这些效果都需要依赖图片.flash或者JavaScript.

用法和定义

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

常用的一些属性

![70 8][]

html代码如下：

<h1>transform css变形</h1>  
<h2>transform: rotateX()</h2>  
<div class="box1"></div>  
<div class="box2"></div>  
<div class="box3"></div>  
<h2>transform: skew()</h2>  
<div class="box4"></div>  
<h2>transform: scale()</h2>  
<div class="box5"></div>  
<h2>结合transform:rotateX() scale()和transition</h2>  
<div class="box6">我还会回来的！</div>

css代码如下：

效果图如下：

![70 9][]

38.CSS制作基本几何图形

效果图如下：

![70 10][]

css代码：

html代码：

<h1>CSS制作基本几何图形</h1>  
<div class="total">  
<h2>一、三角形</h2>  
<div class="box1"></div>  
<div class="box2"></div>  
<div class="box3"></div>  
<div class="box4"></div>  
<h2>二、平行四边形</h2>  
<div class="box5"></div>  
<h2>三、梯形</h2>  
<div class="box6"></div>  
<h2>四、六角形</h2>  
<div class="box7"></div>  
<h2>五、五角星</h2>  
<div class="box8"></div>  
<h2>六、爱心</h2>  
<div class="box9"></div>  
<h2>七、太极</h2>  
<div class="box10"></div>  
</div>

39.overflow: auto;右侧添加滚动条

40.加特技的手风琴

html代码如下：

css代码如下：

效果图如下：鼠标放置在li上面，右边变为绿色背景，左边变为黑色背景，黑色背景逐渐覆盖住绿色背景。

![70 11][]

41.如何将开发好的网站发布到外网

a.百度“万网”，进入万网官网。

b.找到域名服务，选择“.com”，以.com为主。然后给你的网站选择一个好的域名，点击立即查询，查询结果如果你准备注册的域名-未注册，那么点击域名后的“加入清单”，然后在右边可以在“域名清单”中看到自己加入的域名清单，点击“去结算”，然后根据实际情况选择，域名所有者“个人”，选择域名所有者为“企业”-需要相关的营业执照。然后点击“立即购买”。登录账号，进行在线支付。购买成功后，选择“产品与服务”-“域名”-找到购买的域名-“域名解析”-“解析设置”-点击“添加解析”-注意下面的说明，按照说明，进行正确操作：“主机记录”输入“www”；“

解析线路”一般为了保证速度，选择“默认”；“记录值”为IP地址，现在没有，直接不用输入-点击“保存”。

c.返回主页“域名服务”，选择“主机服务”。选择顶端导航条内的“产品”-“云服务器ECS”，学生可以选择“学生专享价9.9”-不是学生直接选择“立即购买”-“地域”按照自己实际情况，一般推荐买“北京”；I/0优化实例前打√代表购买数据库，根据自己情况选择是否要；“实例规格”选择系列I“1核1GB”；“公共镜像”选择操作系统类别：一般选择“windows server”，选择版本一般选择“2008 R2企业版64位中文版”；“带宽”选择“1Mbps”；“设置密码”选择“创建后设置”；“购买时长”一般选择“1年”。点击“立即购买”；在支付页面，点击“使用推荐码”前的√，有推荐码九折优惠。进入淘宝网，输入万网，找到能够使用优惠券的；然后点击“去支付”。

d.进入“云服务器管理控制台首页”-概览-点击“我的资源”下“云服务器”进入刚刚购买的云服务器-点击“管理”-找到公网IP，复制-远程桌面连接到该IP地址-密码输入购买成功后设置的密码。

e.直接把我们新建的网站文件夹复制到我们远程连接到的桌面上。

f.启动网页服务器，方法一：百度输入jdk，点击下载，然后安装，安装中注意（公共文件：右键选择最后一个“此功能不可用”）。然后浏览器输入tomcat，进入官网，选择Tomcat 7.0，然后一般选择32-bit windows zip或者64-bit windows zip下载，然后解压，打开conf文件夹，用sublime打开server.xml。在第70行<connector port="8080" protocol="HTTP/1.1" coonectionTimeout="20000" redirectPort="8443"/>可以将端口号修改为80。在第103行<Engine name="Catalina" defaultHost="..."...>将defaultHost内的IP地址修改为我们购买的IP地址。在第123行<Host name="115.28.85.22" appBase="webapps" unpackWARs="true" autoDeploy="true">内的Host name修改为我们购买的IP地址。成功！；方法二：；到浏览器输入刚刚购买的域名。

太复杂，后期再学习！

42.background-image 定义  
background-image 是CSS的一种属性，作用是为元素设置背景图像。元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。  
background-image 属性  
url：设置图片的地址  
repeat :      默认值。背景图像在纵向和横向上平铺  
no-repeat :   背景图像不平铺  
repeat-x :    背景图像仅在横向上平铺  
repeat-y :    背景图像仅在纵向上平铺  
background-position : 设置图像的起始位置。  
background-position属性  
语法： background-position : length || length   
           background-position : position || position   
取值： length  : 百分数 | 由浮点数字和单位标识符组成的长度值。  
           position  : top | center | bottom | left | center | right   
说明： 设置或检索对象的背景图像位置。必须先指定 background-image 属性。该属性定位不受对象的补丁属性( padding )设置影响。  
默认值为： 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角。  
如果只指定了一个值，该值将用于横坐标。纵坐标将默认为 50% 。如果指定了两个值，第二个值将用于纵坐标。  
如果设置值为 right center ，因为 right 作为横坐标值将会覆盖 center 值，所以背景图片将被居右定位。  
对应的脚本特性为 backgroundPosition。

left top 就是 background-position 的值，也就是说把图片的初始位置设置为左上。

43.CSS linear-gradient() 函数  
以下实例演示了从头部开始的线性渐变，从红色开始，转为黄色，再到蓝色:  
\#grad \{  
    background: -webkit-linear-gradient(red,yellow,blue); /\* Safari 5.1-6.0 \*/  
    background: -o-linear-gradient(red,yellow,blue); /\* Opera 11.1-12.0 \*/   
    background: -moz-linear-gradient(red,yellow,blue); /\* Firefox 3.6-15 \*/  
    background: linear-gradient(red,yellow,blue); /\* 标准语法 \*/

44.CSS cursor 属性

<table style="margin:15px 0px 0px;padding:0px;border:1px solid rgb(170,170,170);width:809px;color:rgb(0,0,0);font-family:'PingFangSC-Regular', Verdana, Arial, '微软雅黑', '宋体';font-size:14px;background-color:rgb(253,252,248);"> 
 <tbody style="margin:0px;padding:0px;"> 
  <tr style="margin:0px;padding:0px;border-top:0px;background-color:rgb(245,245,245);"> 
   <th style="margin:0px;padding:5px 15px 5px 6px;border-color:rgb(63,63,63);vertical-align:baseline;background-color:rgb(63,63,63);color:rgb(255,255,255);">值</th> 
   <th style="margin:0px;padding:5px 15px 5px 6px;border-color:rgb(63,63,63);vertical-align:baseline;background-color:rgb(63,63,63);color:rgb(255,255,255);">描述</th> 
  </tr> 
  <tr style="margin:0px;padding:0px;border-top:0px;background-color:rgb(255,255,255);"> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;"><span style="margin:0px;padding:0px;border:0px;">url</span></td> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;"><p style="border:0px;line-height:21px;">需使用的自定义光标的 URL。</p><p style="margin-top:12px;border:0px;line-height:21px;">注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。</p></td> 
  </tr> 
  <tr style="margin:0px;padding:0px;border-top:0px;background-color:rgb(245,245,245);"> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">default</td> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">默认光标（通常是一个箭头）</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;border-top:0px;background-color:rgb(255,255,255);"> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">auto</td> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">默认。浏览器设置的光标。</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;border-top:0px;background-color:rgb(245,245,245);"> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">crosshair</td> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">光标呈现为十字线。</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;border-top:0px;background-color:rgb(255,255,255);"> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">pointer</td> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">光标呈现为指示链接的指针（一只手）</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;border-top:0px;background-color:rgb(245,245,245);"> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">move</td> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">此光标指示某对象可被移动。</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;border-top:0px;background-color:rgb(255,255,255);"> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">e-resize</td> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">此光标指示矩形框的边缘可被向右（东）移动。</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;border-top:0px;background-color:rgb(245,245,245);"> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">ne-resize</td> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">此光标指示矩形框的边缘可被向上及向右移动（北/东）。</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;border-top:0px;background-color:rgb(255,255,255);"> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">nw-resize</td> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">此光标指示矩形框的边缘可被向上及向左移动（北/西）。</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;border-top:0px;background-color:rgb(245,245,245);"> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">n-resize</td> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">此光标指示矩形框的边缘可被向上（北）移动。</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;border-top:0px;background-color:rgb(255,255,255);"> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">se-resize</td> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">此光标指示矩形框的边缘可被向下及向右移动（南/东）。</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;border-top:0px;background-color:rgb(245,245,245);"> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">sw-resize</td> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">此光标指示矩形框的边缘可被向下及向左移动（南/西）。</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;border-top:0px;background-color:rgb(255,255,255);"> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">s-resize</td> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">此光标指示矩形框的边缘可被向下移动（南）。</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;border-top:0px;background-color:rgb(245,245,245);"> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">w-resize</td> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">此光标指示矩形框的边缘可被向左移动（西）。</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;border-top:0px;background-color:rgb(255,255,255);"> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">text</td> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">此光标指示文本。</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;border-top:0px;background-color:rgb(245,245,245);"> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">wait</td> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">此光标指示程序正忙（通常是一只表或沙漏）。</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;border-top:0px;background-color:rgb(255,255,255);"> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">help</td> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">此光标指示可用的帮助（通常是一个问号或一个气球）。</td> 
  </tr> 
 </tbody> 
</table>

45.浏览器的调试功能

a.safari：右键Safari，找到“偏好设置”，在“偏好设置”中点击“高级”，然后给“在菜单栏中显示开发菜单”打√

![70 12][]

![70 13][]

然后在导航栏会出现“开发”，点击“显示web检查器”，可以检查代码。

![70 14][]

46.js基本计算

\+加法；-减法；\*乘法；/除法；%取余（取模）；javascript与其他语言一个区别，不区分整数和浮点数。result++和result--最好不要组合进其他式子，最好单独使用。

作比较：result1 == result2            result1 ！= result2           result1 <= result2            result1 >= result2           result1 < result2        result1 > result2

47.逻辑计算

and:&&          or:||           not:!

优先级

a.    所有的逻辑运算符的优先级都低于关系运算符

b.    ！>&&>||

48.条件运算符

alert("Smaller:" + ((num1<num2) ? num1 : num2));

49.:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。

n 可以是数字、关键词或公式。

50.实现水平垂直居中

方法一：

html代码如下：

css代码如下：

div\{width: 200px;height: 200px;background-color: green;position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin:auto;\}

/\* div\{width: 200px;height: 200px;background-color: green;position: absolute;left: 0;right: 0;margin:0 auto;\}  能够实现水平居中\*/

方法二：

html代码如下：

css代码如下：

div\{width: 200px;height: 200px;background-color: green;position: absolute;top: 50%;left: 50%;margin-left: -100px;margin-top: -100px;\}

51.如何为多余的字添加省略号

a.设置字不换行：white-space:nowrap;

b.设置隐藏多余的部分：overflow:hidden;

c.再利用CSS3：text-overflow:ellipsis;

效果图如下：

![70 15][]

代码如下：.box ul li\{hite-space: nowrap;overflow: hidden;text-overflow: ellipsis;\}

# **52.视差滚动** #

效果图如下：滑动界面，背景图片跟随

![70 16][]

css代码如下：

.center_next{width: 100%;height: 1012px;background-color: #333;color: rgba(255, 255, 255, 0.75);background-attachment: fixed,fixed;background-image: url("./images/overlay1.png"), url("./images/header.jpg") ;background-size: auto,cover;}

html代码如下：

53.终于把基础课程看完啦，终于可以进入下一阶段了，然后自己仿照一个网站，做出了一个简单的网站，代码如下：

<!doctype html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
    	<title>练习</title>
    	<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
    	<link rel="stylesheet" type="text/css" href="./css/bootstrap-theme.min.css">
    	<script type="text/javascript" src="./js/bootstrap.min.js"></script>
    	<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
    	<style type="text/css">
    		*{padding: 0;margin: 0;}
    		body{font-size: 12px;font-family: "微软雅黑"}
    		a{text-decoration: none;}
    		.head{width: 100%;height: 974px;color: rgba(255, 255, 255, 0.75);background: linear-gradient(45deg, #666666 5%, #000000 30%, #666666);}
    		.head_content{width: 100%;height:590px;position: absolute;text-align: center;margin: 200px auto 0;}
    		.head_content .text h1{line-height: 64px;color: #fff;}
    		.head_content .text p{line-height: 35px;font-size: 18px;color: #c7c7c7;}
    		.head_content .anniu{width: 130px;height: 53px;border: 1px solid #fff;border-radius: 6px;line-height: 53px;position: absolute;left: 50%;top: 50%;margin-left: -65px;margin-top: 240px;transition: all 0.3s ease;}
    		.head_content .anniu:hover{background: #363636;transition: all 0.3s ease;}
    		.head_content .anniu a{color: #fff;font-size: 14px;font-weight: 500px;text-decoration: none;}
    		.head_content .xian{width: 1px;height: 183px;background: #fff;position: absolute;left: 50%;top: 50%;margin-left: -1px;margin-top: 295px;}
    		.center{width: 100%;height: 685px;background: #fff;position: relative;}
    		.center .center1{width: 1276px;height: 422px;position: absolute;top: 50%;left: 50%;margin-top: -211px;margin-left: -638px;}
    		.center .center1 .center1_left{width: 608px;height: 100%;text-align: center;margin-top: 26px;float: left;}
    		.center .center1 .center1_left .p1{line-height: 35px;font-size: 14px;color: #000000;font-weight: 400;}
    		.center .center1 .center1_left .xian2{width: 100px;height: 1px;background: #c7c7c7;margin: 30px 0 30px 0;}
    		.center .center1 .center1_left .p2{line-height: 35px;font-size: small; font-style: normal; font-weight: 100;}
    		.center .center1 .center1_right{width: 668px;height: 100%;text-align: center;float: right;position: relative;}
    		.center .center1 .center1_right img{border-radius: 4px;width: 90%;position: absolute;right: 0;}
    		.center_next{width: 100%;height: 1012px;background-color: #333;color: rgba(255, 255, 255, 0.75);background-attachment: fixed,fixed;background-image: url("./images/overlay1.png"), url("./images/header.jpg") ;background-size: auto,cover;position: relative;}
    		.center_next .center2{width: 1160px;height: 440px;position: absolute;top: 50%;left: 50%;margin-top: -220px;margin-left: -580px;}
    		.center_next .center2 .center2_left{float: left;width: 50%;height: 100%;}
    		.center_next .center2 .center2_right{float: right;width: 50%;height: 100%;}
    		.center_next .center2 .center2_right h2{line-height: 50px;font-size: 40px;text-align: center;color: #fff;}
    		.center2 .center2_right .english{line-height: 30px;font-size: 30px;text-align: center;font-weight: 340;color: #fff;}
    		.center2 .center2_right .xian3{width: 118px;height: 1px;background: #fff;margin-top: 36px;}
    		.center2 .center2_right .greytext{text-align: center;color: #c4c7c3;font-size: 16px;line-height: 30px;margin-top: 30px;}
    		.center_next2{width: 100%;height: 1016px;background-color: #fff;}
    		.center_next2 .center_next2_content{margin: 120px auto 0;width: 1272px;text-align: center;}
    		.center_next2 .xian4{width: 132px;height: 1px;background: #c7c7c7  ;margin-top: 36px;position: absolute;left: 50%;margin-left: -66px;}
    		.center_next2 .center_next2_content2{margin: 155px auto 0;width: 1272px;height: 600px;text-align: center;}
    		.center_next2 .center_next2_content2 .pic{width: 384px;height: 384px;float: left;text-align: center;color: #666666;}
    		.center_next2 .center_next2_content2 .pic img{width: 384px;height: 384px;border-radius: 4px;}
    		.center_next2 .center_next2_content2 .pic h3{font-size: 30px;line-height: 1.5em;font-weight: 300;;}
    		.center_next2 .center_next2_content2 .pic  p{font-size: 20px;line-height: 1.5em;font-weight: 200;}
    		.center_next3{width: 100%;height: 545px;background-color: #333;color: rgba(255, 255, 255, 0.75);background-attachment: fixed,fixed;background-image: url(./images/overlay1.png), url(./images/header.jpg);background-size: auto,cover;}
    		.center_next3 .center_next3_content{margin:0 auto;width: 1272px;height: 545px;text-align: center;position: relative;}
    		.center_next3 .center_next3_content .text2{position: absolute;top: 100px;left: 50%;margin-left: -139px;}
    		.center_next3 .center_next3_content .text2 h2{line-height: 57px;color: #fff;margin-bottom: 30px;}
    		.center_next3 .center_next3_content .text2 .xian5{width: 134px;height: 1px;background: #fff;position: absolute;left: 50%;margin-left: -67px;}
    		.center_next3 .center_next3_content .text2 p{line-height: 35px;font-size: 18px;color: #c7c7c7;margin-top: 65px;}
    		.center_next3 .center_next3_content .anniu2{width: 130px;height: 53px;border: 1px solid #fff;border-radius: 6px;line-height: 53px;position: absolute;transition: all 0.3s ease;bottom: 86px;left: 50%;margin-left: -65px;}
    		.center_next3 .center_next3_content .anniu2:hover{background: rgba(255, 255, 255, 0.1);transition: all 0.3s ease;}
    		.center_next3 .center_next3_content .anniu2 a{color: #fff;font-size: 14px;font-weight: 500px;text-decoration: none;}
    		.center_next4{width: 100%;height: 760px;background-color: #fff;position: relative;color: #555;}
    		.center_next4 .center_next4_content{width: 1272px;height: 760px;text-align: center;position: absolute;top: 34px;left: 50%;margin-left: -636px;}
    		.center_next4 .center_next4_content p{line-height: 35px;font-size: 18px;margin-bottom: 36px;font-weight: 200}
    		.center_next4 .center_next4_content h3{line-height: 43px;font-weight: 300;font-size: 30px;margin-bottom: 30px;}
    		.center_next4 .center_next4_content .pic2{width: 384px;height: 384px;float: left;text-align: center;}
    		.center_next4 .center_next4_content .pic2 img{width: 384px;height: 384px;}
    		.footer{width: 100%;height: 660px;background: linear-gradient(45deg, #666666, #000000 50%, #666666 95%);position: relative;color: #555;}
    		.footer .footer_content{width: 380px;height: 524px;position: absolute;top: 114px;left: 50%;margin-left: -190px;text-align: center;}
    		.footer .footer_content .text3 p{font-size: 16px;line-height: 30px;}
    		.footer .footer_content .text3 h3{font-size: 20px;line-height: 35px;}
    		.footer .footer_content .text4{margin-top: 30px;}
    		.footer .footer_content .text4 p{font-size: 16px;line-height: 30px;color: #fff;margin-bottom: 20px;}
    		.footer .footer_content .text4 .anniu3{width: 130px;height: 53px;border: 1px solid #fff;border-radius: 6px;line-height: 53px;position: absolute;transition: all 0.3s ease;left: 50%;margin-left: -65px;}
    		.footer .footer_content .text4 .anniu3:hover{background: rgba(255, 255, 255, 0.1);transition: all 0.3s ease;}
    		.footer .footer_content .text4 .anniu3 a{color: #fff;font-size: 14px;font-weight: 500px;text-decoration: none;}
    	</style>
    </head>
    <body>
    	<div class="wrap">
    		<div class="head">
    			<div class="head_content">
    				<img src="./images/LOGO-500.png">
    				<div class="text">
    					<h1>MAKES COSMETICS PACKAGING PREFECT </h1>
    					<p>专注高端化妆品容器 | FOCUS IN LUXURY COSMETIC PACKING</p>
    				</div>
    				<div class="anniu">
    					<a href="#">IKKO</a>
    				</div>
    				<div class="xian"></div>
    			</div>
    		</div>
    		<div class="center">
    			<div class="center1">
    				<div class="center1_left">
    					<p class="p1">
    						<strong>Ikko new material technology Co., Ltd devotes to R & D, design, manufacture and sale of tubes and containers for high-end cosmetics, medical, food and daily use chemicals. The main production lines are all introduced from Switzerland, Denmark, Germany and other European countries. Integrative packaging solution by Ikko turns your conception into reality. Aesthetics and functional tubes created by Ikko.</strong>
    					</p>
    					<div class="xian2"></div>
    					<p class="p2"><strong>艾鲲新材料，专注于高档化妆品、医用、食品、日化等软管及容器的研发、设计、制造和销售。 主要生产设备均由瑞士、丹麦、德国等欧洲国家引进。 一体化包装整体解决方案，轻松让您的构想步入现实 </strong></p>
    				</div>
    				<div class="center1_right">
    					<img src="./images/pic01.jpg">
    				</div>
    			</div>
    		</div>
    		<div class="center_next">
    			<div class="center2">
    				<div class="center2_left">
    					<img src="./images/LOGO-500.png">
    				</div>
    				<div class="center2_right">
    					<h2>创新技术使化妆品包装更完美</h2>
    					<p class="english">INNOVATIVE TECHNOLOGY</p>
    					<div class="xian3"></div>
    					<p class="greytext">上海艾鲲新材料科技有限公司</p>
    					<p class="greytext">Shanghai IKKO New Material Technology Co.， Ltd . </p>
    					<p class="greytext">MAKES COSMETICS PACKAGING PREFECT </p>
    					<p class="greytext"> 专注高端化妆品容器 | FOCUS IN LUXURY COSMETIC PACKING</p>
    				</div>
    			</div>
    		</div>
    		<div class="center_next2">
    			<div class="center_next2_content">
    				<h2>PRODUCT DETAILS</h2>
    			</div>
    			<div class="xian4"></div>
    			<div class="center_next2_content2">
    				<div class="pic" style="margin-right: 60px;">
    					<img src="./images/pic02.jpg">
    					<h3>软管| Tube</h3>
    					<p>软管分类：全塑、铝塑、纸塑 </p>
    				</div>
    				<div class="pic" style="margin-right: 60px;">
    					<img src="./images/pic03.jpg">
    					<h3>片材 | Sheet</h3>
    					<p>流延片材工艺；不同颜色的七层共挤结构片材；含EVOH阻隔层；7结构片材可复合不同材质的印刷膜</p>
    				</div>
    				<div class="pic">
    					<img src="./images/pic04.jpg">
    					<h3>膏霜瓶 | Cream bottle</h3>
    					<p>款式多样；透明度极佳；抗老化性能好；色彩丰富；可喷漆、丝印、真空镀膜</p>
    				</div>
    			</div>
    		</div>
    		<div class="center_next3">
    			<div class="center_next3_content">
    			    <div class="text2">
    					<h2>Do you want a job?</h1>
    					<div class="xian5"></div>
    					<p>成人达己，缔造非凡</p>
    				</div>
    				<div class="anniu2">
    					<a href="#">MORE</a>
    				</div>
    		    </div>
    		</div>
    		<div class="center_next4">
    			<div class="center_next4_content">
    				<p>Ante nunc accumsan et aclacus nascetur ac ante amet sapien sed.</p>
    				<div class="pic2" style="margin-right: 60px;">
    					<img src="./images/01.png">
    					<h3>机器1| machine1</h3>
    					<p>We have state of the art equipment for film blowing,printing and tubemaking. </p>
    				</div>
    				<div class="pic2" style="margin-right: 60px;">
    					<img src="./images/05.png">
    					<h3 style="color: #000;">机器2 | machine2</h3>
    					<p>Adipiscing a commodo ante nunc magna lorem et interdum mi ante nunc lobortis non amet vis sed volutpat et nascetur.</p>
    				</div>
    				<div class="pic2">
    					<img src="./images/04.png">
    					<h3>机器3 | machine3</h3>
    					<p>Adipiscing a commodo ante nunc magna lorem et interdum mi ante nunc lobortis non amet vis sed volutpat et nascetur.</p>
    				</div>
    			</div>
    		</div>
    		<div class="footer">
    			<div class="footer_content">
    				<div class="text3">
    					<h3>上海艾鲲新材料科技有限公司</h3>
    					<p>Shanghai IKKO New Material Technology Co.,ltd</p>
    					<br />
    					<h3>地址：上海市金山区山阳镇阳达路88号</h3>
    					<p>ADD：No.88 Yangda Road， Shanyang</p>
                        <p>Town，Jinshan District, Shanghai</p>
                        <p>TEL:400-158-5828</p>
                        <p>.ikko.net.cn</p>
    				</div>
    				<div class="text4">
    					<p>沪ICP备案XXXX   |   Design: ikko </p>
    					<div class="anniu3">
    					    <a href="#">TOP</a>
    				    </div>
    				</div>
    			</div>
    		</div>
    	</div>
    </body>
    </html>

54.轮播图：图片可以去“锤子官网下载”

<!doctype html>
    <html>
        <head>
    		
    		<meta charset="UTF-8">
    		<meta name="Keywords" content="锤子科技, 锤子手机, Smartisan, SmartisanOS, SmartisanROM">
    		<meta name="Description" content="锤子科技是一家制造移动互联网终端设备的公司，公司的使命是用完美主义的工匠精神，打造用户体验一流的数码消费类产品（智能手机为主），改善人们的生活质量.">
    		<title>在线商城 - 锤子科技</title>
    
    			
    		<style type="text/css">
    			*{margin:0;padding:0;}
    			li{list-style:none;}
    			a{text-decoration:none;color:#000;}
    			body{background:#E6E6E6;;}
    			.wrap{font-size:12px;font-family:"微软雅黑";min-width:1140px;}
    			/*S content*/
    			#content{width:1124px;margin:0 auto;position:relative;top:-20px;}
    			/*S ulList*/
    			.ulList{width:1124px;height:484px;position:relative;}
    			.ulList li{position:absolute;top:0;left:0;display:none;}
    			.ulList li:nth-child(1){display:block;}
    			.list1{width:60px;height:60px;position:absolute;bottom:0;left:0;right:0;margin:0 auto;}
    			.list1 li{width:18px;height:18px;background:#338fdb;float:left;margin-left:8px;cursor:pointer;}
    			.list1 .list1_btn1{background:url("images/loop-dot.png");}
    			.list1 .list1_btn2{background:url("images/loop-dot.png");}
    			.list1 .select{background-position:0 -18px;}
    			/*S ulList*/
    		</style>
    	</head>
    
    <body>
    
    	<div class="wrap">
    		
    		<div id="content">
    			
    			<ul class="ulList">
    				<li>
    					<a href="###"><img src="images/home-t2-banner.png" /></a>
    				</li>
    				<li>
    					<a href="###"><img src="images/home-jianguo-banner.png" /></a>
    				</li>
    				<li>
    					<a href="###"><img src="images/home-jianguo-banner.png" /></a>
    				</li>
    				<li>
    					<a href="###"><img src="images/home-jianguo-banner.png" /></a>
    				</li>
    				<li>
    					<a href="###"><img src="images/home-jianguo-banner.png" /></a>
    				</li>
    				<li>
    					<a href="###"><img src="images/home-jianguo-banner.png" /></a>
    				</li>
    				<li>
    					<a href="###"><img src="images/home-jianguo-banner.png" /></a>
    				</li>
    			</ul>
    			<ul class="list1">	
    			</ul>
    			
    		</div>
    		
    	</div>
    
    	<script type="text/JavaScript" src="js/jquery-1.11.2.min.js"></script>
    	<script type="text/JavaScript">
    		$(function(){
    			var _index = 0;
    			var bannerTimer = null;
    			var _length = $(".ulList li").length;
    			$(".list1").width(_length*26);//动态计算包裹小按钮的ul的宽度
    			for(var i = 0 ; i<_length ; i++){
    				var select = "";
    				if(i == 0)select = "select";
    				$(".list1").append("<li class='list1_btn1 "+select+"'></li>");
    			}
    			$("#content").find(".list1 li").click(function(){			
    				/*addClass添加class样式 removeClass移除class样式*/
    	/*找到当前点击的li给他添加一个select的类样式同时移除掉li同级元素的select类样式*/
    				$(this).addClass("select").siblings().removeClass("select");
    				_index = $(this).index();//获得当前点击的li的座位号
    				$("#content").find(".ulList li").eq(_index).fadeIn(600).siblings().fadeOut(600);	
    			});
    			//自动播放
    			function autoPlay(){
    				bannerTimer = setInterval(function(){//setInterval 设定一个定时器
    					_index++;//自身加1
    					if(_index>_length-1){_index=0}
    					console.log(_index)
    					$("#content").find(".list1 li").eq(_index).addClass("select").siblings().removeClass("select");
    					$("#content").find(".ulList li").eq(_index).fadeIn(600).siblings().fadeOut(600);	
    				},1000);
    			}
    			autoPlay();
    			
    			//清除定时器
    			$(".ulList").hover(function(){
    				clearInterval(bannerTimer);
    			},function(){
    				autoPlay();//启动定时器
    			});	
    		});
    
    	</script>
    
    </body>
    </html>

[Image 1]: 
[70]: /images/20220529/f5db6bbe76634d89af6129b9839f258c.png
[70 1]: https://img-blog.csdn.net/20180323171841867?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: /images/20220529/e15ddcc4187c474a90cebb9c10f63826.png
[70 3]: /images/20220529/9c8c0382ea3b4b668dc97557c7e4acda.png
[70 4]: /images/20220529/91495c682b9e49108674bf3df6138c99.png
[2018040915001126]: /images/20220529/d94452a8d5094d369ffc9512322a400b.png
[70 5]: /images/20220529/acab40c48d8c4136af3e555668e443d1.png
[70 6]: /images/20220529/4f14ca559fc94b498bcd1721ebdb074e.png
[70 7]: /images/20220529/218d999f0683463393c732bed281baac.png
[70 8]: /images/20220529/fdef596fb664400e8331be9bc4642917.png
[70 9]: /images/20220529/e7e5cda3d0084751ab40ced99bb439b5.png
[70 10]: /images/20220529/09dc7d677f514fa9869d520286e82992.png
[70 11]: /images/20220529/7b639245cb2e48afa76331bfe00ec28c.png
[70 12]: /images/20220529/0b9a233114ba424b89926ee99350c6b6.png
[70 13]: /images/20220529/e93f33e38fff445f85d83316bb7f9ca5.png
[70 14]: /images/20220529/3f889ab6431c41988bf37d501cb516cb.png
[70 15]: /images/20220529/313ee486170e4516ac87ce6364460db3.png
[70 16]: /images/20220529/5a2258bde0a1418598b32c19e2839452.png