Logstash idea Flutter acm gwt neo4j directory joomla Echojs vue网站 svn默认安装路径 oracle查看数据库 mysql安装后怎么使用 bentley软件介绍 pcie高速固态硬盘 安卓虚拟机运行windows ubuntu更改文件夹权限 idea全文搜索快捷键 cmd清空命令 完美解决cpu利用率低 linux查找文件内容 后台管理网站模板 python输出函数 python课程 python基本语法 python正则匹配数字 java中的继承 javaabstract java重命名 javahttp java特性 java方法的调用 java判断是否为空 java文件复制 行业软件下载 街头篮球辅助 内存修改器 onenote2003 Ext2Fsd 相关软件
当前位置: 首页 > 学习教程  > 编程语言

html自适应,css网页初始化,好看的容器滚动条样式,a标签的锚点标记简单使用知识点记录

2020/10/8 19:09:31 文章标签:

前言 “不积跬步,无以至千里;不积小流,无以成江海” (1)设置一个容器在屏幕居中的样式 .style{position: absolute; 可以先使标签绝对定位left: 50%; 让他左边距为整个网页 的50%;top: 50%; …

前言

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

(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>

部分滚动条样式效果
在这里插入图片描述

滚动条组成部分

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

  2. ::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或向左向右移动)

  3. ::-webkit-scrollbar-track 滚动条的轨道(里面装有Thumb)

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

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

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

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

容器盒子外射光内射光

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

本文链接: http://www.dtmao.cc/news_show_250097.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?