摘要: #首页推荐模块制作 ##主要知识点:浮动&结构伪类选择器&亲儿子选择器&页面布局 ###HTML结构 <!-- 今日推荐模块 --> <div class="suggest"> <div class="left"> <img src="./images/时钟.png" alt=""> <h5>今日推 阅读全文
posted @ 2021-04-23 20:54 Ben-studying 阅读(143) 评论(0) 推荐(0)
摘要: #一、首页焦点图focus制作 ##主要知识点:圆角边框&定位 ###HTML结构 <div class="focus"> <ul> <li><img src="./upload/focus.png" alt=""></li> </ul> <div class="dotted"> <li></li> 阅读全文
posted @ 2021-04-22 19:53 Ben-studying 阅读(271) 评论(0) 推荐(0)
摘要: #mod_service底部服务栏制作 ##主要知识点:亲儿子选择器&浮动与定位&圆角边框 ###HTML结构 <!-- footer底部制作 --> <div class="footer"> <div class="top w"> <div class="mod_service"> <div cl 阅读全文
posted @ 2021-04-16 21:48 Ben-studying 阅读(150) 评论(0) 推荐(0)
摘要: #nav导航栏 ##一、dropdown下拉导航栏 ###主要知识点::hover的应用&伪元素选择器&内容的居中 ####HTML结构 <div class="dropdown"> <div class="dt"> <dt>全部商品分类</dt> </div> <div class="dd"> < 阅读全文
posted @ 2021-04-14 22:05 Ben-studying 阅读(204) 评论(0) 推荐(0)
摘要: #一、logo区 ##主要知识点:LOGO SEO优化 ###HTML结构 <div class="logo"> <h1> <a href="index.html" title="品优购">品优购商城</a> </h1> </div> ###结构解释: ####1.给logo盒子嵌套h1标签是为了提 阅读全文
posted @ 2021-04-14 15:50 Ben-studying 阅读(97) 评论(0) 推荐(0)
摘要: #快速导航栏制作 ##主要知识应用:1. 浮动布局 2. 字体图标的引用 3. 伪类选择器以及伪元素选择器 ####HTML结构 <!-- 快捷导航栏shortcut --> <div class="shortcut"> <div class="cut"> <ul class="left"> <li 阅读全文
posted @ 2021-04-13 22:52 Ben-studying 阅读(389) 评论(0) 推荐(0)
摘要: ##小米图标转换 ####transition:需要过渡的属性 花费时间 (运动曲线 何时开始); Tips: 1.第二个属性值必须跟上单位(s) 2.谁要过渡给谁加 图标转换最终效果:当鼠标划过图标时,缓慢转换成另一个图标 ####步骤 #####一、准备一个大盒子,大盒子里有一个小盒子,小盒子里 阅读全文
posted @ 2021-04-11 18:55 Ben-studying 阅读(64) 评论(0) 推荐(0)
摘要: ####margin负值实现细边框 我们先准备五个div盒子,并设置好浮动和2px的实线黑色边框,看看效果 中间的边框线挨在了一起致使边框变粗成了4px,这时使用margin负值就可以解决这个问题 <style> * { margin: 0; padding: 0; } div { float: l 阅读全文
posted @ 2021-04-10 14:50 Ben-studying 阅读(65) 评论(0) 推荐(0)