Ben-studying - 博客园

2021年4月23日

摘要： #首页推荐模块制作 ##主要知识点：浮动&结构伪类选择器&亲儿子选择器&页面布局 ###HTML结构  <div class="suggest"> <div class="left"> <img src="./images/时钟.png" alt=""> <h5>今日推阅读全文

posted @ 2021-04-23 20:54 Ben-studying 阅读(143) 评论(0) 推荐(0)

2021年4月22日

仿京东静态网站制作之首页焦点图和快报模块

摘要： #一、首页焦点图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)

2021年4月16日

仿京东静态网站制作之底部服务栏

摘要： #mod_service底部服务栏制作 ##主要知识点：亲儿子选择器&浮动与定位&圆角边框 ###HTML结构  <div class="footer"> <div class="top w"> <div class="mod_service"> <div cl 阅读全文

posted @ 2021-04-16 21:48 Ben-studying 阅读(150) 评论(0) 推荐(0)

2021年4月14日

仿京东静态网站制作之导航栏

摘要： #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)

2021年4月13日

仿京东静态网页制作之快速导航栏

摘要： #快速导航栏制作 ##主要知识应用：1. 浮动布局 2. 字体图标的引用 3. 伪类选择器以及伪元素选择器 ####HTML结构  <div class="shortcut"> <div class="cut"> <ul class="left"> <li 阅读全文

posted @ 2021-04-13 22:52 Ben-studying 阅读(389) 评论(0) 推荐(0)

2021年4月11日

CSS3过渡应用

摘要： ##小米图标转换 ####transition:需要过渡的属性花费时间（运动曲线何时开始）； Tips： 1.第二个属性值必须跟上单位（s） 2.谁要过渡给谁加图标转换最终效果：当鼠标划过图标时，缓慢转换成另一个图标 ####步骤 #####一、准备一个大盒子，大盒子里有一个小盒子，小盒子里阅读全文

posted @ 2021-04-11 18:55 Ben-studying 阅读(64) 评论(0) 推荐(0)

2021年4月10日

CSS中margin负值巧布局

摘要： ####margin负值实现细边框我们先准备五个div盒子，并设置好浮动和2px的实线黑色边框，看看效果中间的边框线挨在了一起致使边框变粗成了4px，这时使用margin负值就可以解决这个问题 <style> * { margin: 0; padding: 0; } div { float: l 阅读全文

posted @ 2021-04-10 14:50 Ben-studying 阅读(65) 评论(0) 推荐(0)

公告