HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第11章有路网移动端主页实战

本文主要是介绍HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第11章有路网移动端主页实战,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

本教程案例在线演示

有路网PC端
有路网移动端

免费配套视频教程

免费配套视频教程

教程配套源码资源

教程配套源码资源

本章目标

LESS

1.什么是less

Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、嵌套等特性。Less的语法更简洁,可以被翻译为CSS。

在vs code安装less的编译插件

安装插件Easy LESS,如下图所示

有了这个后,可以在编辑器新建less文件,后缀名是.less,保存后会自动编译成css

2. 变量

less可以声明变量,在其它地方直接引用。

@background-color: #ffffff;
@text-color: #1A237E;p{background-color: @background-color;color: @text-color;padding: 15px;
}ul{background-color: @background-color;
}li{color: @text-color;
}

将其编译成 CSS 代码如下:

p{background-color: #ffffff;color: #1A237E;padding: 15px;
}ul{background-color: #ffffff;
}li{color: #1A237E;
}

现在我们要切换二者的值,也就是黑色的背景和白色的文本,我们只需要修改两个变量的值就可以了,而不是手动的去修改每个值。


3. Mixins

Less 允许我们将常用的样式,打包封装到 classid 选择器中。 其它地方可以方便的引用。

#circle{background-color: #4CAF50;border-radius: 100%;
}#small-circle{width: 50px;height: 50px;#circle
}#big-circle{width: 100px;height: 100px;#circle
}

将其转换成 CSS 代码如下

#circle {background-color: #4CAF50;border-radius: 100%;
}
#small-circle {width: 50px;height: 50px;background-color: #4CAF50;border-radius: 100%;
}
#big-circle {width: 100px;height: 100px;background-color: #4CAF50;border-radius: 100%;
}

如果只用于样式打包,而不出现在css代码中,那么请在它的后面加上括号:

#circle(){background-color: #4CAF50;border-radius: 100%;
}#small-circle{width: 50px;height: 50px;#circle
}#big-circle{width: 100px;height: 100px;#circle
}

此时编译成 CSS :

#small-circle {width: 50px;height: 50px;background-color: #4CAF50;border-radius: 100%;
}
#big-circle {width: 100px;height: 100px;background-color: #4CAF50;border-radius: 100%;
}

Mixin 另一个比较酷的功能就是它支持传入参数,下面这个例子就为 circle 传入一个指定宽高的参数,默认是 25px。 这将创建一个 25×25的小圆和一个 100×100 的大圆。

#circle(@size: 25px){background-color: #4CAF50;border-radius: 100%;width: @size;height: @size;
}#small-circle{#circle
}#big-circle{#circle(100px)
}

转换成 CSS :

#small-circle {background-color: #4CAF50;border-radius: 100%;width: 25px;height: 25px;
}
#big-circle {background-color: #4CAF50;border-radius: 100%;width: 100px;height: 100px;
}

4. 嵌套

嵌套可用于以与页面的HTML结构相匹配的方式构造样式表,同时减少了冲突的机会。下面是一个无序列表的例子。

ul{background-color: #03A9F4;padding: 10px;list-style: none;li{background-color: #fff;border-radius: 3px;margin: 10px 0;}
}

编译成 CSS 代码:

ul {background-color: #03A9F4;padding: 10px;list-style: none;
}
ul li {background-color: #fff;border-radius: 3px;margin: 10px 0;
}

就像在其它高级语言中一样, Less 的变量根据范围接受它们的值。如果在指定范围内没有关于变量值的声明, less 会一直往上查找,直至找到离它最近的声明。

回到 CSS 中来,我们的 li 标签将有白色的文本,如果我们在 ul 标签中声明 @text-color 规则。

@text-color: #000000;ul{@text-color: #fff;background-color: #03A9F4;padding: 10px;list-style: none;li{color: @text-color;border-radius: 3px;margin: 10px 0;}
}

编译生成的 CSS 代码如下:

ul {background-color: #03A9F4;padding: 10px;list-style: none;
}
ul li {color: #ffffff;border-radius: 3px;margin: 10px 0;
}

5. 运算

你可以对数值和颜色进行基本的数学运算。比如说我们想要两个紧邻的 div 标签,第二个标签是第一个标签的两倍宽并且拥有不同的背景色。

@div-width: 100px;
@color: #03A9F4;div{height: 50px;display: inline-block;
}#left{width: @div-width;background-color: @color;
}#right{width: @div-width * 2;background-color: @color;
}

编译成 CSS 如下:

div {height: 50px;display: inline-block;
}
#left {width: 100px;background-color: #03a9f4;
}
#right {width: 200px;background-color: #03a9f4;
}

vw单位

vw是css的一个属性,和px,rem等类似,属于长度单位。

在浏览器中, 1 vw = viewport 的宽度 /100

根据这个特性,vw 可以帮助我们实现移动端自适应布局,其优点在于所见即所得,甚至优于rem,因为完全不用使用额外的计算。

推荐和sass、less这种css预处理语言一起使用,因为其可以定义变量及函数,会在使用vw上提供巨大帮助。

@vv:7.5vw;.circle{width: 100/@vv;height: 100/@vv;border: 1px solid red;border-radius: 50%;font-size: 16/@vv;text-align: center;line-height: 100/@vv;
}header.clear{width: 100%;height: 80/@vv;font-size: 42/@vv;background: #ededed;line-height: 80/@vv;text-align: center;
}
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>vw布局练习</title><link href="less/style.css" rel="stylesheet" type="text/css"></head><body><header class="clear">这是header</header><div class="circle">circle</div>
</body>
</html>

下面三张图分别是在iphone 6|7|8 和ihone 6P|7P|8P 以及ipad Pro中的表现


原理
以设计稿为750为例,假设viewport代表窗口宽度

750 => viewport
7.5 => viewport/100
//得到
1vw => 7.5
// 元素list 宽为300px
300 => 300/7.5 vw
//得到
@vv = 7.5vw
300 => 300/@vv

阿里图标库iconfont使用

话不多说 进入官网 https://www.iconfont.cn/
搜索你想要的 ,比如【我的】

出来以后加入购物车

点击购物车

点击添加至项目 这时你如果没登录的话 ,会让你登陆随便选择一个登陆方式比如 github

登陆成功之后你可以选择新建也可以选择老的项目

确定好之后会是这样一个页面,然后下载至本地

下载后解压会是一些这样的文件

然后像我这样把字体文件和css文件拿到你的项目里

看下效果

移动端首页制作

顶部搜索框

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="iconfont/iconfont.css"><link rel="stylesheet" href="less/style.css">
</head>
<body><div class="com-header-area"><div class="search-box"><span class="iconfont icon-sousuo"></span><input type="text" placeholder="书名、作者、出版社、ISBN、文具"></div></div>
</body>
</html>

less

@vv:3.75vw;/*默认样式重置(css reset)*/
*{margin: 0;font-size: 12/@vv; /* 中文字体大小的最小值 *//* font-family: xx; 也可以设置字体 */
}
ol,ul {list-style: none; /* 去除列表样式 */padding: 0;margin: 0;
}a {color: #464646;text-decoration: none;
}a:hover {color: #f60;text-decoration: underline;
}.com-header-area{background-color: #f0f0f0;padding: 6/@vv 10/@vv;.search-box{background-color: #fff;display: flex;align-items: center;input{border: 0;padding: 6/@vv 0;width: 100%;}span{font-size: 12/@vv;}}
}

热门搜索

html

  <div class="com-content"><ul class="hot-search"><li class="hot">热门搜索:</li><li><a href="#">高等数学</a></li><li><a href="#">高等数学</a></li><li><a href="#">高等数学</a></li><li><a href="#">高等数学</a></li></ul></div>

css

.com-content{background-color:#e1e5ee;.hot-search{display: flex;align-items: center;background-color: #fff;padding: 2/@vv;li{margin: 0 4/@vv;&.hot{color: orange;}a{color: #ccc;}}}
}

轮播图

html

      <div class="slide"><img src="img/slide.jpg"></div>

css

  .slide {img {width : 375/@vv;height: 187.5/@vv;}}

保证条款

html

      <div class="guarantee-g"><span class="guarantee-span"><span class="check">√</span>保证正品</span><span class="guarantee-span"><span class="check">√</span>保证低价</span><span class="guarantee-span"><span class="check">√</span>24小时发货</span><span class="guarantee-span"><span class="check">√</span>无理由退货</span></div>

css

  .guarantee-g {display        : flex;justify-content: center;background     : #fff;.guarantee-span {margin   : 6/@vv;.check {color: red;}}}

五大模块

html

      <div class="tab"><a href="#"><img src="img/classify.jpg">分类搜索</a><a href="#"><img src="img/classify.jpg">分类搜索</a><a href="#"><img src="img/classify.jpg">分类搜索</a><a href="#"><img src="img/classify.jpg">分类搜索</a><a href="#"><img src="img/classify.jpg">分类搜索</a></div>

css

  .tab {display        : flex;justify-content: space-around;background     : #fff;a {display       : flex;flex-direction: column;align-items   : center;padding       : 6/@vv;img {width : 26/@vv;height: 26/@vv;}}}

中栏广告

html

    <div class="bookList"><div><a href="#"><img style="width:100%;" src="img/ico_index.gif"></a></div></div>

推荐图书

html

      <div class="bookList"><div><a href="#"><img style="width:100%;" src="img/ico_index.gif"></a></div><div class="book-items"><div class="item"><span class=book_recommend>推荐图书</span><span class="left-arrow">您喜欢的都在这里</span><a class="span-more">更多</a></div></div></div>

css

.book-items {background: #fff;color     : #757070;.item {line-height: 42/@vv;display    : flex;font-weight: bold;.book_recommend {font-size  : 14/@vv;margin-left: 14/@vv;}.left-arrow {margin-left: 20/@vv;}a {margin-left : auto;margin-right: 20/@vv;}}}

推荐图书列表

html

   <div class="list-recommend"><ul><li><a href="#"><div class="book-img"><img alt="阿弥陀佛么么哒" src="img/book.jpg"></div><div class="bookName">阿弥陀佛么么哒</div><div class="price"><span>有路价 ¥15.00</span></div><div class="priceVip"><span>VIP价 ¥14.30</span></div></a></li><li><a href="#"><div class="book-img"><img alt="乖.摸摸头" src="img/book.jpg"></div><div class="bookName">乖.摸摸头</div><div class="price"><span>有路价 ¥14.00</span></div><div class="priceVip"><span>VIP价 ¥13.30</span></div></a></li><li><a href="#"><div class="book-img"><img alt="好吗好的" src="img/book.jpg"></div><div class="bookName">好吗好的</div><div class="price"><span>有路价 ¥15.00</span></div><div class="priceVip"><span>VIP价 ¥14.30</span></div></a></li></ul></div>

css

 .list-recommend ul {display: flex;li {display        : flex;flex-direction: column;align-items: center;flex           : 1;img {max-width    : 80/@vv;margin-bottom: 10/@vv;}.priceVip {color: #f28181;}}}

换一换

html

       <div class="book-refresh"><a class="a_recommend_change" href="#"><span>换一换</span></a></div>

css

    .book-refresh {display        : flex;justify-content: center;line-height    : 40/@vv;}

特色教材

html

        <div class="book-items"><div class="item"><span class=book_recommend>特色教材</span><span class="left-arrow">大学里受欢迎的书</span></div></div>

特色教材列表

html

          <div class="bookInfo"><ul><li class="bi_li"><div class="bi-l"><img src="img/car.jpg" alt="汽车理论(第5版)"></div><div class="bi-r"><a href="/#"><div class="name">汽车理论(第5版)</div></a><div class="author">余志生</div><div class="price"><span>有路价:</span><span>¥14.00</span><span>39折</span></div><div class="price priceVip"><span>VIP 价:</span><span class="Vip">¥13.30</span><span>37折</span></div><div class="price"><span>团购价:</span><span>¥11.20</span><span>31折</span></div></div></li><li class="bi_li"><div class="bi-l"><img src="img/car.jpg" alt="汽车理论(第5版)"></div><div class="bi-r"><a href="/#"><div class="name">汽车理论(第5版)</div></a><div class="author">余志生</div><div class="price"><span>有路价:</span><span>¥14.00</span><span>39折</span></div><div class="price priceVip"><span>VIP 价:</span><span class="Vip">¥13.30</span><span>37折</span></div><div class="price"><span>团购价:</span><span>¥11.20</span><span>31折</span></div></div></li><li class="bi_li"><div class="bi-l"><img src="img/car.jpg" alt="汽车理论(第5版)"></div><div class="bi-r"><a href="/#"><div class="name">汽车理论(第5版)</div></a><div class="author">余志生</div><div class="price"><span>有路价:</span><span>¥14.00</span><span>39折</span></div><div class="price priceVip"><span>VIP 价:</span><span class="Vip">¥13.30</span><span>37折</span></div><div class="price"><span>团购价:</span><span>¥11.20</span><span>31折</span></div></div></li></ul></div>

css

  .bookInfo {font-size: 14/@vv;.bi_li {display: flex;padding: 10 / @vv;align-items: center;.bi-l img {max-height: 90 / @vv;width: 80 / @vv;}.bi-r {margin-left: 12 / @vv;.priceVip {color: #f28181;}.price {display: flex;line-height: 14 / @vv;span {flex: 1 1 auto;margin-left: 6 / @vv;}span:first-child {margin-left: 0;}span:last-child {color: #f28181;border-color: #f28181;display: flex;align-items: center;padding: 0 6 / @vv;font-weight: 400;border: 0.5/ @vv solid #f28181;border-radius: 4 / @vv;}}}}}

底部导航

html

    <div class="footer_nav"><div class="footer-tab"><a class="footer_nav_a" href="#"><i class="iconfont icon-fangdajing"></i>首页</a><a class="footer_nav_a" href="#"><i class="iconfont icon-fangdajing"></i>我要卖书</a><a class="footer_nav_a" href="#"><i class="iconfont icon-fangdajing"></i>购物车</a><a class="footer_nav_a" href="#"><i class="iconfont icon-fangdajing"></i>我的有路</a></div></div>

css

.footer_nav {width           : 100%;position        : fixed;bottom          : 0;background-color: #fcfcfc;z-index         : 99;.footer-tab {display        : flex;justify-content: space-between;a {height         : 50/@vv;display        : flex;flex-direction: column;justify-content: center;align-items    : center;flex           : 1;.icon-fangdajing{font-size: 26/@vv;}}}
}

完整代码

html

<!DOCTYPE html>
<html lang="en"><head><metacharset="UTF-8"content="width=device-width, minimum-scale=1.0,initial-scale=1.0, maximum-scale=1.0, user-scalable=no"id="viewport"name="viewport"/><title>Title</title><link href="iconfont/iconfont.css" rel="stylesheet" /><link href="less/style.css" rel="stylesheet" type="text/css" /></head><body><div class="com-header-area"><div class="search-box"><span class="iconfont icon-sousuo"></span><inputtype="text"placeholder="书名、作者、出版社、ISBN、文具"value=""/></div></div><div class="com-content"><div class="hot-search"><ul><li><span class="hot">热门搜索:</span></li><li><a>高等数学</a></li><li><a>高等数学</a></li><li><a>高等数学</a></li><li><a>高等数学</a></li></ul></div><div class="slide"><img src="img/slide.jpg"></div><div class="guarantee-g"><span class="guarantee-span"><span class="check">√</span>保证正品</span><span class="guarantee-span"><span class="check">√</span>保证低价</span><span class="guarantee-span"><span class="check">√</span>24小时发货</span><span class="guarantee-span"><span class="check">√</span>无理由退货</span></div><div class="tab"><a href="#"><img src="img/classify.jpg">分类搜索</a><a href="#"><img src="img/classify.jpg">分类搜索</a><a href="#"><img src="img/classify.jpg">分类搜索</a><a href="#"><img src="img/classify.jpg">分类搜索</a><a href="#"><img src="img/classify.jpg">分类搜索</a></div><div class="bookList"><div><a href="#"><img style="width:100%;" src="img/ico_index.gif"></a></div><div class="book-items"><div class="item"><span class=book_recommend>推荐图书</span><span class="left-arrow">您喜欢的都在这里</span><a class="span-more">更多</a></div><div class="list-recommend"><ul><li><a href="#"><div class="book-img"><img alt="阿弥陀佛么么哒" src="img/book.jpg"></div><div class="bookName nape">阿弥陀佛么么哒</div><div class="price nape cost"><span>有路价 ¥15.00</span></div><div class="priceVip nape cost"><span>VIP价 ¥14.30</span></div></a></li><li><a href="#"><div class="book-img"><img alt="乖.摸摸头" src="img/book.jpg"></div><div class="bookName nape">乖.摸摸头</div><div class="price nape cost"><span>有路价 ¥14.00</span></div><div class="priceVip nape cost"><span>VIP价 ¥13.30</span></div></a></li><li><a href="#"><div class="book-img"><img alt="好吗好的" src="img/book.jpg"></div><div class="bookName nape">好吗好的</div><div class="price nape cost"><span>有路价 ¥15.00</span></div><div class="priceVip nape cost"><span>VIP价 ¥14.30</span></div></a></li></ul></div><div class="book-refresh"><a class="a_recommend_change" href="#"><span>换一换</span></a></div></div><div class="book-items"><div class="item"><span class=book_recommend>特色教材</span><span class="left-arrow">大学里受欢迎的书</span></div><div class="bookInfo"><ul><li class="bi_li"><div class="bi-l"><img src="img/car.jpg" alt="汽车理论(第5版)"></div><div class="bi-r"><a href="/#"><div class="name">汽车理论(第5版)</div></a><div class="author">余志生</div><div class="price"><span>有路价:</span><span>¥14.00</span><span class="discount">39折</span></div><div class="price priceVip"><span>VIP 价:</span><span class="Vip">¥13.30</span><span class="discount">37折</span></div><div class="price"><span>团购价:</span><span>¥11.20</span><span class="discount">31折</span></div></div></li><li class="bi_li"><div class="bi-l"><img src="img/car.jpg" alt="汽车理论(第5版)"></div><div class="bi-r"><a href="/#"><div class="name">汽车理论(第5版)</div></a><div class="author">余志生</div><div class="price"><span>有路价:</span><span>¥14.00</span><span class="discount">39折</span></div><div class="price priceVip"><span>VIP 价:</span><span class="Vip">¥13.30</span><span class="discount">37折</span></div><div class="price"><span>团购价:</span><span>¥11.20</span><span class="discount">31折</span></div></div></li><li class="bi_li"><div class="bi-l"><img src="img/car.jpg" alt="汽车理论(第5版)"></div><div class="bi-r"><a href="/#"><div class="name">汽车理论(第5版)</div></a><div class="author">余志生</div><div class="price"><span>有路价:</span><span>¥14.00</span><span class="discount">39折</span></div><div class="price priceVip"><span>VIP 价:</span><span class="Vip">¥13.30</span><span class="discount">37折</span></div><div class="price"><span>团购价:</span><span>¥11.20</span><span class="discount">31折</span></div></div></li></ul></div></div></div></div><div class="footer_nav"><div class="footer-tab"><a class="footer_nav_a" href="#"><i class="iconfont icon-sousuo"></i>首页</a><a class="footer_nav_a" href="#"><i class="iconfont icon-sousuo"></i>我要卖书</a><a class="footer_nav_a" href="#"><i class="iconfont icon-sousuo"></i>购物车</a><a class="footer_nav_a" href="#"><i class="iconfont icon-sousuo"></i>我的有路</a></div></div></body>
</html>

less

@vv:3.75vw;/*默认样式重置(css reset)*/
body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin: 0;font-size: 12/@vv; /* font-family: xx; 也可以设置字体 */
}
ol,ul {list-style: none; /* 去除列表样式 */padding: 0;margin: 0;
}a {color: #464646;text-decoration: none;
}a:hover {color: #f60;text-decoration: underline;
}.com-header-area {background: #f0f0f0;padding: 6 / @vv 10 / @vv 6 / @vv 10 / @vv;.search-box {background: #fff;display: flex;align-items: center;input {font-size: 12/@vv; padding: 5 / @vv 0;margin: 0;border: 0;width: 100%;color: #999;margin-left: 12 / @vv;}span{font-size: 12/@vv; }}
}.com-content {background: #e1e5ee;box-shadow: 0 0 10 / @vv #000;.hot-search ul {display: flex;align-items: center;background: #fff;padding: 2 / @vv 2 / @vv;li {margin: 0 6 / @vv;.hot {color: #ddb496;}a {color: #ccc;}}}.slide {img {width: 375 / @vv;height: 187.5 / @vv;}}.guarantee-g {display: flex;justify-content: center;background: #fff;.guarantee-span {margin: 6 / @vv;.check {color: red;}}}.tab {display: flex;justify-content: space-around;background: #fff;a {display: flex;flex-direction: column;align-items: center;padding: 6 / @vv;img {width: 26 / @vv;height: 26 / @vv;}}}.book-items {background: #fff;color: #757070;.item {line-height: 42 / @vv;display: flex;font-weight: bold;.book_recommend {font-size: 14 / @vv;margin-left: 14 / @vv;}.left-arrow {margin-left: 20 / @vv;}a {margin-left: auto;margin-right: 20 / @vv;}}.list-recommend ul {display: flex;li {display: flex;flex-direction: column;align-items: center;flex: 1;img {max-width: 80 / @vv;margin-bottom: 10 / @vv;}.priceVip {color: #f28181;}}}.book-refresh {display: flex;justify-content: center;line-height: 40 / @vv;}.bookInfo {font-size: 14/@vv;.bi_li {display: flex;padding: 10 / @vv;align-items: center;.bi-l img {max-height: 90 / @vv;width: 80 / @vv;}.bi-r {margin-left: 12 / @vv;.priceVip {color: #f28181;}.price {display: flex;line-height: 14 / @vv;span {flex: 1 1 auto;margin-left: 6 / @vv;}span:first-child {margin-left: 0;}span:last-child {color: #f28181;border-color: #f28181;display: flex;align-items: center;padding: 0 6 / @vv;font-weight: 400;border: 0.5/ @vv solid #f28181;border-radius: 4 / @vv;}}}}}}
}.footer_nav {width           : 100%;position        : fixed;bottom          : 0;background-color: #fcfcfc;z-index         : 99;.footer-tab {display        : flex;justify-content: space-between;a {height         : 50/@vv;display        : flex;flex-direction: column;justify-content: center;align-items    : center;flex           : 1;.icon-sousuo{font-size: 20/@vv;}}}
}

这篇关于HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第11章有路网移动端主页实战的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:https://blog.csdn.net/douyh/article/details/107976587
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/267230

相关文章

基于Python开发Windows屏幕控制工具

《基于Python开发Windows屏幕控制工具》在数字化办公时代,屏幕管理已成为提升工作效率和保护眼睛健康的重要环节,本文将分享一个基于Python和PySide6开发的Windows屏幕控制工具,... 目录概述功能亮点界面展示实现步骤详解1. 环境准备2. 亮度控制模块3. 息屏功能实现4. 息屏时间

CSS place-items: center解析与用法详解

《CSSplace-items:center解析与用法详解》place-items:center;是一个强大的CSS简写属性,用于同时控制网格(Grid)和弹性盒(Flexbox)... place-items: center; 是一个强大的 css 简写属性,用于同时控制 网格(Grid) 和 弹性盒(F

CSS实现元素撑满剩余空间的五种方法

《CSS实现元素撑满剩余空间的五种方法》在日常开发中,我们经常需要让某个元素占据容器的剩余空间,本文将介绍5种不同的方法来实现这个需求,并分析各种方法的优缺点,感兴趣的朋友一起看看吧... css实现元素撑满剩余空间的5种方法 在日常开发中,我们经常需要让某个元素占据容器的剩余空间。这是一个常见的布局需求

CSS Anchor Positioning重新定义锚点定位的时代来临(最新推荐)

《CSSAnchorPositioning重新定义锚点定位的时代来临(最新推荐)》CSSAnchorPositioning是一项仍在草案中的新特性,由Chrome125开始提供原生支持需... 目录 css Anchor Positioning:重新定义「锚定定位」的时代来了! 什么是 Anchor Pos

CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比

《CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比》CSS中的position属性用于控制元素的定位方式,不同的定位方式会影响元素在页面中的布... css 中的 position 属性用于控制元素的定位方式,不同的定位方式会影响元素在页面中的布局和层叠关

HTML5 getUserMedia API网页录音实现指南示例小结

《HTML5getUserMediaAPI网页录音实现指南示例小结》本教程将指导你如何利用这一API,结合WebAudioAPI,实现网页录音功能,从获取音频流到处理和保存录音,整个过程将逐步... 目录1. html5 getUserMedia API简介1.1 API概念与历史1.2 功能与优势1.3

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一,通过合理使用其属性和样式自定义方法,可以为用户提供丰富多样的交互体验,这篇文章给大家介绍HTML5中C... 在html5中,Checkbox(复选框)是一种常用的表单元素,允许用户在一组选项中选择多个项目。本

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具,能够有效提升用户体验,通过结合自动补全功能和适当的样式,可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框(Search Box)详解搜索框是一个用于输入查询内容的控件,通常用于网站或应用程

Python并行处理实战之如何使用ProcessPoolExecutor加速计算

《Python并行处理实战之如何使用ProcessPoolExecutor加速计算》Python提供了多种并行处理的方式,其中concurrent.futures模块的ProcessPoolExecu... 目录简介完整代码示例代码解释1. 导入必要的模块2. 定义处理函数3. 主函数4. 生成数字列表5.

Python实例题之pygame开发打飞机游戏实例代码

《Python实例题之pygame开发打飞机游戏实例代码》对于python的学习者,能够写出一个飞机大战的程序代码,是不是感觉到非常的开心,:本文主要介绍Python实例题之pygame开发打飞机... 目录题目pygame-aircraft-game使用 Pygame 开发的打飞机游戏脚本代码解释初始化部