如何html自适应，如何css网页初始化，16种好看的容器滚动条css样式，a标签的锚点标记简单使用

前言

“不积跬步,无以至千里;不积小流,无以成江海”

（1）设置一个容器在屏幕居中的样式

.style{ position: absolute; 可以先使标签绝对定位 left: 50%; 让他左边距为整个网页 的50%； top: 50%; 让他顶部距为 整个网页 的50%; margin-left: -600px; 再减去自声宽度 的一半 margin-top: -200px; 减去自身高度的一半 width: 1200px; height: 400px; }

（2）网页初始化,每个浏览器的兼容性都不一样，因此设置每个样式是要，尽量减少 各浏览器之间的兼容性问题!

body, div, address, blockquote, iframe, ul, ol, dl, dt, dd, li, dl, h1, h2, h3, h4, pre, table, caption, th, td, form, legend, fieldset, input, button, select, textarea { margin: 0; padding: 0; font-style: normal; font: 12px/22px Arial, Helvetica, sans-serif; } ol, ul, li { list-style: none; } img { border: 0; vertical-align: middle; } body { color: #000000; background: #FFF; text-align: center; }

（3）超链接锚点标记

使用锚点的时候，首先需要在当前的HTML网页当中标识一个点，具体的方法就是为 < a >标签添加一个名为name的属性，这样就可以在当前网页的当前位置标识一个点，并且为这个点起一个名字；  < h2 >< a name=“first_title” >文章第一段标题< /a >< /h2 > 然后，在网页当中的其他地方使用< a >标签的href属性引用这个名字，这样使用的时候需要在所应用的锚点名称前面加上#： <a href="#first_title>  返回文章的第一个标题 当用户使用鼠标点击这个锚点时，就会咻的一声返回到name属性的值为first_title的< a >标签所在的网页位置，是不是非常的神奇。  可能有的朋友会说，如果在网页当中有两个  < a >标签的name属性的值完全相同会怎么样呢？ 首先，这样做是不符合规范的，为name属性的值在一个网页当中应当是唯一的；

<a href="#Login">点我去登录处</a> <a href="#Regin">点我去注册处</a> <div>测试数据</div> <div>测试数据</div> <div>测试数据</div> <div>测试数据</div> <div>测试数据</div> <div>测试数据</div> <div>测试数据</div> <div>测试数据</div> <a name="Regin">这里是标题登录处</a> <div>测试数据</div> <div>测试数据</div> <div>测试数据</div> <div>测试数据</div> <div>测试数据</div> <div>测试数据</div> <div>测试数据</div> <div>测试数据</div> <div>测试数据</div> <div>测试数据</div> <a name="Login">这里是标题注册处 </a> <div>测试数据</div> <div>测试数据</div> <div>测试数据</div> <div>测试数据</div> <div>测试数据</div>

（4）滚动条好看的样式

<style> /* * STYLE 1 */ #style-1::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #F5F5F5; } #style-1::-webkit-scrollbar { width: 12px; background-color: #F5F5F5; } #style-1::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #555; } /* * STYLE 2 */ #style-2::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #F5F5F5; } #style-2::-webkit-scrollbar { width: 12px; background-color: #F5F5F5; } #style-2::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #D62929; } /* * STYLE 3 */ #style-3::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; } #style-3::-webkit-scrollbar { width: 6px; background-color: #F5F5F5; } #style-3::-webkit-scrollbar-thumb { background-color: #000000; } /* * STYLE 4 */ #style-4::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; } #style-4::-webkit-scrollbar { width: 10px; background-color: #F5F5F5; } #style-4::-webkit-scrollbar-thumb { background-color: #000000; border: 2px solid #555555; } /* * STYLE 5 */ #style-5::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; } #style-5::-webkit-scrollbar { width: 10px; background-color: #F5F5F5; } #style-5::-webkit-scrollbar-thumb { background-color: #0ae; background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent)); } /* * STYLE 6 */ #style-6::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; } #style-6::-webkit-scrollbar { width: 10px; background-color: #F5F5F5; } #style-6::-webkit-scrollbar-thumb { background-color: #F90; background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent) } /* * STYLE 7 */ #style-7::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; border-radius: 10px; } #style-7::-webkit-scrollbar { width: 10px; background-color: #F5F5F5; } #style-7::-webkit-scrollbar-thumb { border-radius: 10px; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, rgb(122,153,217)), color-stop(0.72, rgb(73,125,189)), color-stop(0.86, rgb(28,58,148))); } /* * STYLE 8 */ #style-8::-webkit-scrollbar-track { border: 1px solid black; background-color: #F5F5F5; } #style-8::-webkit-scrollbar { width: 10px; background-color: #F5F5F5; } #style-8::-webkit-scrollbar-thumb { background-color: #000000; } /* * STYLE 9 */ #style-9::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; } #style-9::-webkit-scrollbar { width: 10px; background-color: #F5F5F5; } #style-9::-webkit-scrollbar-thumb { background-color: #F90; background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent) } /* * STYLE 10 */ #style-10::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; border-radius: 10px; } #style-10::-webkit-scrollbar { width: 10px; background-color: #F5F5F5; } #style-10::-webkit-scrollbar-thumb { background-color: #AAA; border-radius: 10px; background-image: -webkit-linear-gradient(90deg, rgba(0, 0, 0, .2) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .2) 50%, rgba(0, 0, 0, .2) 75%, transparent 75%, transparent) } /* * STYLE 11 */ #style-11::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; border-radius: 10px; } #style-11::-webkit-scrollbar { width: 10px; background-color: #F5F5F5; } #style-11::-webkit-scrollbar-thumb { background-color: #3366FF; border-radius: 10px; background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0.5) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.5) 75%, transparent 75%, transparent) } /* * STYLE 12 */ #style-12::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9); border-radius: 10px; background-color: #444444; } #style-12::-webkit-scrollbar { width: 12px; background-color: #F5F5F5; } #style-12::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #D62929; background-image: -webkit-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent, transparent) } /* * STYLE 13 */ #style-13::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9); border-radius: 10px; background-color: #CCCCCC; } #style-13::-webkit-scrollbar { width: 12px; background-color: #F5F5F5; } #style-13::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #D62929; background-image: -webkit-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent, transparent) } /* * STYLE 14 */ #style-14::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.6); background-color: #CCCCCC; } #style-14::-webkit-scrollbar { width: 10px; background-color: #F5F5F5; } #style-14::-webkit-scrollbar-thumb { background-color: #FFF; background-image: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 25%, transparent 100%, rgba(0, 0, 0, 1) 75%, transparent) } /* * STYLE 15 */ #style-15::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); background-color: #F5F5F5; border-radius: 10px; } #style-15::-webkit-scrollbar { width: 10px; background-color: #F5F5F5; } #style-15::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #FFF; background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#4D9C41), to(#19911D), color-stop(.6,#54DE5D)) } /* * STYLE 16 */ #style-16::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); background-color: #F5F5F5; border-radius: 10px; } #style-16::-webkit-scrollbar { width: 10px; background-color: #F5F5F5; } #style-16::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #FFF; background-image: -webkit-linear-gradient(top, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%); } </style> </html>

部分滚动条样式效果

滚动条组成部分

::-webkit-scrollbar 滚动条整体部分

::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或向左向右移动）

::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）

::-webkit-scrollbar-button 滚动条的轨道的两端按钮，由于通过点击微调小方块的位置。

::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分

::-webkit-scrollbar-corner 边角，即垂直滚动条和水平滚动条相交的地方

::-webkit-resizer 两个滚动条的交汇处上用于拖动调整元素大小的小控件

容器盒子外射光内射光

box-shadow: inset 0 0 5em #ffd800, 0 0 5em #ffd800;