北屋教程网

专注编程知识分享，从入门到精通的编程学习平台

2025年07月10日

那些年我总结的css水平垂直居中（css中垂直水平居中的方式有哪些）

前言

css水平垂直居中一直是一个亘古不变的话题，它常常出现在优美的网页上以及各大前端面试当中。说来惭愧，在两年前面试的时候，我完全不知道如何做到水平和垂直均居中的方法，那场面别提有多尴尬了（特想找个地洞钻进去）。现在都2022年了，这些技巧现在已经不是技巧了吧，只是好记性不如烂笔头，还是乖乖记下来吧，得把它玩透才行！

注：文中例子没写明html代码时，使用的是下面结构：

作者:koubeiwu , 分类:技术文章 , 浏览:3 , 评论:0

2025年07月10日

金山图书馆网红“阅读神器”好腻害，还不快来体验 →

<div><div class="rich_media_content " id="js_content"> <section data-role="outer" label="Powered by 135editor.com"><section data-role="outer" label="Powered by 135editor.com"><p style="font-size: 16px;white-space: normal;list-style-type: none;-webkit-padding-start: 0px;-webkit-margin-before: 0px;-webkit-margin-after: 0px;max-width: 100%;min-height: 1em;color: rgb(62, 62, 62);font-family: 微软雅黑;"><strong style="max-width: 100%;color: rgb(255, 0, 0);font-size: 15px;line-height: 25.6px;"><img class="" data-ratio="0.1362179487179487" data-src="

作者:koubeiwu , 分类:技术文章 , 浏览:3 , 评论:0

2025年07月10日

如何处理的浏览器兼容性（浏览器兼容性差怎么办）

在前端工作中用input做一个按钮，文本输入框禁之类东西，由于浏览器的兼容性问题，让前端人员头疼不已，那如何解决，本文章以下部分介绍：

input标签在各浏览器里默认高度和宽度：

当input标签在type为text时，在Firefox和Safari中的默认高度为22像素（包括上下边框）宽度为146像素（包括左右边框），而在IE中的默认高度为24像素，而宽度却和Firefox和Safari是一致的，也是146像素。

作者:koubeiwu , 分类:技术文章 , 浏览:3 , 评论:0

2025年07月10日

【漫画】 宪法守护我们每个人的一生

作者:koubeiwu , 分类:技术文章 , 浏览:3 , 评论:0

2025年07月10日

浅谈3种css技巧——两端对齐（两端对齐的效果）

在出里文字比较多的网页，文字对齐其中采用的两端对齐，两端对齐的方法有三种方法，如下：

1. 使用text-align:justify

text-align:justify 属性是全兼容的，使用它实现两端对齐，需要注意在模块之间添加[空格/换行符/制表符]才能起作用，同样，实现文本对齐也是需要在字与字之间添加[空格/换行符/制表符]才能起作用

/*
说明：
1.IE中要实现块内单行两端对齐需要使用其私有属性text-align-last:justify配合，text-align-last 要生效，必须先定义text-align 为justify

作者:koubeiwu , 分类:技术文章 , 浏览:2 , 评论:0

2025年07月10日

关于 vertical-align 的一些小知识

引子

在日常开发过程中，我们经常会遇到如下的场景，一行中既有图片也有文字，而且图片还要和文字对齐。效果如下：

通常代码如下:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <style type="text/css">
        .text {
 background-color: grey;
        }
    </style>
</head>
<body>
<img src="warn.png"><span class="text">some text.</span>
</body>
</html>

作者:koubeiwu , 分类:技术文章 , 浏览:4 , 评论:0

2025年07月09日

HarmonyOS NEXT仓颉开发语言实战案例:健身App

各位好，今日分享一个健身app的首页：

这个页面看起比之前的案例要稍微复杂一些，主要在于顶部部分，有重叠的背景，还有偏移的部分。重叠布局可以使用Stack容器实现，超出容器范围的偏移可以使用负数间距来实现，顶部部分的具体实现代码如下：

Column{
    Text('February')
    .fontColor(Color.WHITE)
    .fontSize(14)
    
    Row{
        Row{
            Image(@r(app.media.goal))
            .width(37)
            .height(37)
            Text('MY GOAL')
            .fontColor(Color.WHITE)
            .fontSize(30)
            .fontWeight(FontWeight.Bolder)
            .margin(left:6)
        }
        
        Image(@r(app.media.cm_add))
        .width(28)
        .height(28)
        
    }
    .margin(top:20)
    .width(100.percent)
    .justifyContent(FlexAlign.SpaceBetween)
    .alignItems(VerticalAlign.Center)
}
.alignItems(HorizontalAlign.Start)
.padding(left:12,right:12,top:60)
.width(100.percent)
.height(220)
.linearGradient( direction: GradientDirection.Bottom, colors:[(Color(103, 76, 222, alpha: 1.0),0.0),(Color(129, 28, 219, alpha: 1.0),1.0)], repeating: false)
.borderRadius(bottomLeft: 20.vp, bottomRight: 20.vp)
Row{
    Column(5){
        Row(6){
            Text('weight')
            .fontColor(Color.GRAY)
            .fontSize(11)
            Image(@r(app.media.cm_down))
            .width(15)
            .height(15)
        }
        .justifyContent(FlexAlign.Center)
        .alignItems(VerticalAlign.Center)
        .width(80)
        .height(20)
        .borderRadius(10)
        .border(width: 1.vp, color: Color(216, 216, 216, alpha: 1.0), radius:10.vp,style: BorderStyle.Solid)
        Row(8){
            Image(@r(app.media.cm_js))
            .width(28)
            .height(28)
            Column(5){
                  Progress(value: 50.0, total: 100.0, `type`: ProgressType.Linear)
                    .width(100.percent)
                    .color(0x9570FF)
                Row{
                    Text('250 lb')
                    .fontColor(Color.GRAY)
                    .fontSize(10)
                    Text('250 lb')
                    .fontColor(Color.GRAY)
                    .fontSize(10)
                }
                .width(100.percent)
                .alignItems(VerticalAlign.Center)
                .justifyContent(FlexAlign.SpaceBetween)
            }
            .layoutWeight(1)
        }
        .width(100.percent)
    }
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Start)
    .padding(10)
    .width(100.percent)
    .height(80)
    .borderRadius(10)
    .backgroundColor(Color.WHITE)
}
.width(100.percent)
.height(80)
.margin(top:-50)
.padding(left:12,right:12)

作者:koubeiwu , 分类:技术文章 , 浏览:8 , 评论:0

2025年07月09日

教师如何制作随机点名系统，活跃课堂气氛

上课点名抽学生回答问题，做游戏……由老师口头点名，点谁回答总有点老师本人的情绪，且显得毫无趣味，但做一个点名系统，就不一样了，电脑随机抽出的名字，不仅公平，还会给孩子们带来一种不一样的感受。

那么怎么做呢？

其实目前做这个很简单，没有一点编写代码经验的人都能做到。只需要告诉deepseek，你想做做什么，需达到些什么功能，它就能帮助你编辑好代码。而且还能测试。

作者:koubeiwu , 分类:技术文章 , 浏览:9 , 评论:0

2025年07月09日

HarmonyOS NEXT仓颉开发语言实战案例:动态广场

大家好，今日要分享的是使用仓颉语言开发动态广场页面，也比较像朋友圈页面：

整个页面分为两部分，分别是导航栏和状态列表，导航栏比较简单，我们可以先写下导航栏的具体代码和页面的基本结构：

Column{
    Row(10){
        Text('推荐')
        .fontColor(Color.BLACK)
        .fontSize(17)
        .fontWeight(FontWeight.Bold)
        Text('关注')
        .fontColor(Color.GRAY)
        .fontSize(16)
    }
    .width(100.percent)
    .height(60)
    .justifyContent(FlexAlign.Center)
    
    List(space:10){

	}
    .width(100.percent)
    .layoutWeight(1)
    .backgroundColor(Color(247, 247, 247))
}
.width(100.percent)
.height(100.percent)

作者:koubeiwu , 分类:技术文章 , 浏览:8 , 评论:0

2025年07月09日

HarmonyOS NEXT仓颉开发语言实战案例:简约音乐播放页

偶然间看到一个非常漂亮的音乐播放器设计图，忍不住想拿仓颉语言来练练手，当漂亮的设计图遇到优美的开发语言，简直是天作之合。

看到这个页面，我们先做一个简单的分析。整个页面分为上中下三个部分，顶部为导航栏，底部是歌词工具栏，剩下的就是中间的歌曲信息和控制按钮部分。它们的部分方式是比较简单的纵向布局。页面大致结构代码如下：


	

		作者:koubeiwu , 分类:技术文章 , 浏览:13 , 评论:0	





  	<<
    	<
    	159
    	160
    	161
    	162
    	163
    	164
    	165
    	166
    	167
    	168
    	>
    	>>
  

		

		






控制面板



您好，欢迎到访网站！
  查看权限










网站分类












最新留言