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

最新推荐文章于 2024-07-09 15:40:34 发布
最新推荐文章于 2024-07-09 15:40:34 发布
阅读量648 收藏 5
点赞数 2
分类专栏： 知识点记录 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WenRouDG/article/details/108966589
版权

前言

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

（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;
小罡同学
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html 滚动条_数十种自定义多彩多样滚动条样式
weixin_39746229的博客
11-29 1749
pc端开发过程中有没有遇到过因为原生滚动条的样式问题，让整个项目事倍功半；有没有遇到过因为因为默认滚动条的缘故，被客户说页面做得真chou，一条毁所有呀。接下来，下面你看到的，就是完美解决方案！当然，有这么多，不限制于这么多，随意修改，百花盛开。Demo1css源码.srcoll_one::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0...
四种漂亮的滚动条样式
08-27
使用css设置漂亮的滚动条样式 使用css设置漂亮的滚动条样式 使用css设置漂亮的滚动条样式
css 好看滚动条样式大全,CSS 个性化滚动条样式
weixin_39788740的博客
08-04 4397
页面中有许多内容过多时，为了不影响整体布局，总会有滚动效果代替。but,许多情况浏览器自带的滚动条样式与整体UI 界面不搭啊，怎么办，当然作为界面的化妆师CSS就出手啦~滚动条样式由多个伪类组成 下面是我的小栗子::-webkit-scrollbar{width: 10px;height: 10px;background: #013b8e;}/* 滚动槽 */::-webkit-scrollbar...
为什么要初始化CSS样式？
最新发布
My_wife_QBL的博客
07-09 276
开发者也可以根据项目需求自定义CSS Reset规则。padding: 0;
好看的滚动条样式
lx583274568的专栏
04-23 2634
::-webkit-scrollbar { width: 14px; height: 14px; } ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb { border-radius: 999px; border: 5px solid transparent; } ::-webkit-scrollbar-track ...
Element-ui 滚动条美化
专注于大数据方向，区块链，前后端，数据可视化，人工智能等领域
06-21 6659
有时候为了使界面滚动条，各个浏览器的滚动条能保持一致，这样我们的项目避免在各个浏览器存在差异导致UI界面的不一致，这时候我们就可以考虑使用通用组件的方式，对各个需要滚动的页面，或者弹出窗口添加统一的组件进行包裹，来保证滚动效果在各个浏览器中能有更好的体验效果。最后我们看到各个浏览器中滚动条的效果，基本上各个浏览器的表现效果是一致的，添加通用组件，默认情况下滚动条是不显示的，只有鼠标移动过去才会进行显示，整体上效果和用户体验会更好。在源码顶部，看到有一个链接地址，是参考另一个插件的实现，如下所示。
Css实现漂亮的滚动条样式（转载）
初来乍到IT狗的博客
06-30 4024
改变浏览器中滚动条的样式
div+css A标签锚点功能.zip
11-17
总结，"div+css A标签锚点功能.zip"中的内容可能涵盖了如何使用 `div` 布局，`CSS` 修饰锚点，以及如何通过 JavaScript（可能包括 jQuery）增强锚点的功能，实现平滑滚动、动态加载等效果。这个压缩包对于学习前端...
纯css实现的tab切换效果(使用锚点作为标记)
09-25
在本文中，我们将探讨如何使用纯CSS实现一个基于锚点的tab切换效果。通常，我们可能会认为这样的交互式效果需要JavaScript来实现，但实际上，利用HTML锚点和CSS选择器，我们可以创建一个简单而有效的tab切换系统。 ...
外卖：实现类似锚点功能-html-css
06-14
此外，如果想要自定义锚点链接的样式，可以使用CSS来调整`<a>`标签的外观。例如，可以改变链接的颜色、鼠标悬停时的样式等： ```css a { color: #007BFF; /* 修改链接颜色 */ text-decoration: none; /* 去掉...
CSS3网页滚动鸡蛋孵化动画特效
06-24
在本文中，我们将深入探讨如何使用CSS3来创建一个网页滚动鸡蛋孵化动画特效。这个特效是一种结合了JavaScript和CSS3技术的创新应用，它能够为用户提供一个互动且引人入胜的网页体验。 首先，CSS3是层叠样式表的第三...
简易精美的滚动条样式
weixin_43599321的博客
04-16 551
为了快捷编写项目，此篇博客记录一个简易的、比默认滚动条样式更好看的CSS样式。代码如下：可直接copy使用。
CSS】滚动条样式
航仔的博客
07-15 3733
overflow-y：scroll //内容溢出的时候只会呼出y滚动条【常用】overflow：scroll //内容溢出的时候x轴的y轴的滚动条都会展现。overflow-x：scroll //内容溢出的时候只会呼出x滚动条。boxScroll是自定义的div容器的class。2、给div盒子添加滚动条。4、滚动条样式美化参考。1、浏览器隐藏滚动条。
一个低调、奢华、有内涵且好看的滚动条样式，收藏一下
面对疾风吧
05-06 315
::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background-color: transparent; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; } ::-webkit-scrollbar-thumb { background-color: rgb(147, 1
css 美化滚动条样式
liyananweb的博客
12-23 2146
以及相关的伪元素来为Webkit浏览器（如Chrome和Safari）自定义滚动条的样式。对于IE和Edge（旧版）浏览器，自定义滚动条的支持非常有限，通常不建议尝试在这些浏览器上自定义滚动条。最后，请记住，自定义滚动条可能会影响用户的体验，因此请确保在设计时保持足够的对比度和可用性。及其相关伪元素只适用于Webkit内核的浏览器。对于Firefox，你可以使用。属性来自定义滚动条的样式，但这些属性提供的自定义程度不如Webkit的伪元素。在CSS中，你可以使用伪元素。
2021/11/29 好看的滚动条css样式
Zhang_aichi的博客
11-29 483
参考地址：CSS3自定义滚动条-轩枫阁 引用：CSS3自定义滚动条样式 -webkit-scrollbar_韩世雷 程序员专栏-CSDN博客_滚动条样式
好看的el-scrollbar样式
polarisya的博客
09-07 553
【代码】好看的el-scrollbar样式。
CSS自定义滚动条样式
偏执
08-03 1352
css3的强势登场，颠覆了往日js独大浏览器动画 效果 美观 体验等。回到当前，先了解下滚动条。滚动条从外观来看是由两部分组成：1、可以滑动的部分，即为滑块。2、滚动条的轨道，即滑块的轨道，为了明显 美观，通常轨道颜色较浅，突出滑块。众所周知，浏览器默认的滚动条样式实在是…不怎么美观，当然，既然不堪入目，那么我们就要去改变它。可以看到，兼容性总体来说还不错，移动端的话还是不错的，不久的将来，将会普及大地的。如果非要兼容所有的话，js上场呗，懒得写的话，插件呗☺。
css如何让滚动条样式变好看？
weixin_51609337的博客
11-30 2120
默认滚动条样式比较丑，长这样： 如何让它变好看呢？可以通过css修改它的样式。 一、默认样式 页面代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div,p,html,body{ margin: 0; padding: 0; .
HTML与CSS基础教程：超文本标记语言和样式设计
- **链接**：`<a>`标签创建超链接，href属性指定链接地址，target属性控制新开窗口或当前窗口，title属性提供鼠标悬停提示，name属性用于锚点定位。 **HTML列表** HTML支持有序列表`<ol>`和无序列表`<ul>`，列表项...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值