写静态页面时一些通用的代码段

张居然的博客

已于 2023-01-17 16:54:46 修改

阅读量746

点赞数 1

文章标签： html css css3

于 2022-12-20 12:33:44 首次发布

本文链接：https://blog.csdn.net/m0_60429030/article/details/128383095

版权

一、无障碍操作

<div id="barrierfree_container">
	<div class="oldStyle container">

	</div>
</div>
<script id="barrierfree" src="/module/jslib/accessiblereading/load.js"></script>

二、引用

<link rel="stylesheet" href="images/common.css">
<link rel="stylesheet" href="images/index.css">
<script src="images/jquery.js"></script>

三、块居中

.w {
    width: 1200px;
    margin: 0 auto;
}

四、banner

/*banner*/
.banner_bg {
    width: 100%;
    height: 300px;
    background("banner.jpg") no-repeat;
    background-size: 100% 100%;
}

在这里插入图片描述

五、三角

/*三角图标*/
.sanjiao {
    width: 0;
    height: 0;
    border-top: 7px solid #2053e4;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid transparent;
}

在这里插入图片描述

六、小圆点

/*小圆点*/
.element::before {
    position: absolute;
    content: '';
    width: 6px;
    height: 6px;
    background-color: #acc2d4;
    left: 0;
    top: 33px;
    border-radius: 50%;
}

在这里插入图片描述

七、手机端适配

/*手机端适配*/
/*500px以下显示的*/
@media only screen and (max-width:500px) {

}

/* 480 768 992 1220 1920  */

/*320px以上显示的*/
@media screen and (min-width: 320px) {

}
/*480px以上显示的*/
@media screen and (min-width: 480px) {

}
/*768px以上显示的*/
@media screen and (min-width: 768px) {

}
/*992px以上显示的*/
@media screen and (min-width: 992px) {

}
/*1200px以上显示的*/
@media screen and (min-width: 992px) {

}

八、列表结构

<ul>
	<li>
		<a href="#">
             <span class="list_name"></span>
             <span class="list_time"></span>
         </a>
     </li>
</ul>

九、列表样式

.element ul li {
    width: 100%;
    height: 60px;
    line-height: 60px;
    padding: 0 10px;
    border-bottom: 1px dashed #2577ff;
}
.element ul li a {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.list_name {
    color: #404040;
    width: 75%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

九、点击进入关怀模式

 <script>
        // 关怀模式
        $(function () {
            $(document).ready(function () {
                //使用本地存储存储适老化状态值
                let oldType = localStorage.getItem("oldType");
                if (oldType == '进入关怀模式') {
                    $(".oldType_switch").text('退出关怀模式')
                    localStorage.setItem("oldType", "进入关怀模式")
                    $('.oldStyle').addClass('newStyle')
                    $('.bg-header').addClass('newStyle')
                    $('.yqlj').addClass('newStyle')
                    $('.footer1').addClass('newStyle')
                    $('.wzdb_con').addClass('newStyle')
                    $('.wrapper').addClass('newStyle')
                } else {
                    $(".oldType_switch").text('进入关怀模式')
                    localStorage.setItem("oldType", "退出关怀模式")
                    $('.oldStyle').removeClass('newStyle')
                    $('.bg-header').removeClass('newStyle')
                    $('.wzdb_con').removeClass('newStyle')
                    $('.yqlj').removeClass('newStyle')
                    $('.footer1').removeClass('newStyle')
                    $('.wrapper').addClass('newStyle')
                }
            })
            $(".oldType_switch").click(function () {
                if ($(this).text() == '退出关怀模式') {
                    $(this).text('进入关怀模式')
                    localStorage.setItem("oldType", "退出关怀模式")
                    $('.oldStyle').removeClass('newStyle')
                    $('.bg-header').removeClass('newStyle')
                    $('.yqlj').addClass('newStyle')
                    $('.footer1').addClass('newStyle')
                    $('.wzdb_con').removeClass('newStyle')
                    $('.wrapper').addClass('newStyle')
                } else {
                    $(this).text('退出关怀模式')
                    localStorage.setItem("oldType", "进入关怀模式")
                    $('.oldStyle').addClass('newStyle')
                    $('.bg-header').addClass('newStyle')
                    $('.wzdb_con').addClass('newStyle')
                    $('.yqlj').removeClass('newStyle')
                    $('.footer1').removeClass('newStyle')
                    $('.wrapper').addClass('newStyle')
    
                }
            });
        })
    </script>