今天在一个网页要实现avatar icon的效果，百度了一下，原来十分简单。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.avatar {
vertical-align: middle;
width: 50px;
h……
CSS第二课
一、关于元素居中
今天要实现一个div居中的问题，没想到自己还花了一点时间。
要实现的效果如下，在两个div中间，有一个div（中间还有元素），要将中间的div居中。
开始不知什么原因，老是调不好，后来终于好了，然后我删除添加的代码，发现已经实现了效果，所以最后的代码是这样的：
.selectsection {
width: 20%;……
Shopify模板开发二
一、建立文件夹
2.建立theme.liquid文件
3.将theme文件夹打包成theme.zip
4.上传theme文件
5.publish theme
然后点击"custom"，在打开的网页中记住theme id。
6.index.liquid
在这里添加一个index.liquid，加入代码，就是我们shopify网站的首页。
shopify模板开发一（前期）
一、开发前的准备工作
（一）建立账号
我原来已经建立了一个shopify店铺，用那个邮件登陆之后，还是提示要建立账号，那么点击“Create new partner account”再建立一个账号即可。
第三步：
（二）建立店铺
建立好账号之后，点击“Store”，新建一个Store。
建好之后是这样的。
点击预览可以看到你的store
三、安装Choco……
图片排版flex
一、知识点
（一）flex
Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
1.display: flex;
加了这个之后，变为按水平方向排列。
flex-direction属性决定主轴的方向（即项目的排列方向），其有一下几个属性：
row（默……
Bootstrap模块收集snippets
一、bootdey.com
亲测bootstrap 5可以用
本地测试效果
https://www.bootdey.com/bootstrap-snippets?q=bootstrap
二、导航条+评论
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="wid……
Mdbootstrap pro5怎么用
一、使用教程
第1步：注册账号
需要在Mdbootstrap pro5网站（https://mdbootstrap.com/）注册一个账号，或者你有gmail,github账号，则可以直接登陆即可。
第2步：下载代码
点击左边导航栏的“installation”，在弹出的页面中，将Mdbootstrap的代码下载下来。
第3步 删除无用代码
将下载下来的文件解压缩，打开index.html，……
手写css网页设计
最近在学习CSS，发现这个手写的css网页设计，觉得非常有用，现分享如下：
一、初稿
成果：
订单页面：
二、代码
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Important to make website responsive -->
&……
可以拿来练手的CSS项目
https://www.youtube.com/watch?v=--XrIa-iey0
PyScript，在html中运行python
2022年4月30日（北京时间）举行的 Python 开发者大会#PyConUS2022， 有一条重磅消息被宣布Py-script正式发布。
PyScript 是一个框架，它允许用户使用 HTML 的界面以及 Pyodide、WASM 和现代 Web 技术的强大功能在浏览器中创建丰富的 Python 应用程序。
一、运行我的第一个PyScript
（一）安装PyScript
和其他js一样，有……