CSS
关注
分享
扫一扫
王子老师
即将成为世界大牛
展开
-
CSS-照片大风车
我希望我和我世界里的人都平安幸福健康快乐！主要知识点：1、透视效果添加给父元素2、3D 立体效果开启 添加给父元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content.原创 2021-11-07 01:44:44 · 90 阅读 · 0 评论 -
CSS-3D导航栏
每一次克制自己，都意味着比以往更强大。不去强求任何一段关系，及时很在意，很喜欢。3D导航栏主要知识点：1、li标签实现多个排列2、两个盒子，下面的盒子x轴旋转-90,再向y轴移动自身一半距离，前面的盒子向x轴移动自身一半的距离。3、给父盒子添加 transform-style 开启3d效果4、父元素添加perspective效果，近大远小<!DOCTYPE html><html lang="en"><head> <meta chars.原创 2021-11-06 23:05:33 · 507 阅读 · 0 评论 -
CSS-transform/rotate
念一场雪，念一段过往，四季轮回，沉淀安然，愿有衣暖身，有人暖心。主要知识点：1、transform-style: preserve-3d;立体效果开启2、transition: all 1s;动画过渡3、transform: rotateY(180deg);3d旋转4、子绝父相<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>.原创 2021-11-06 18:58:27 · 1909 阅读 · 0 评论 -
CSS-动画曲线步长
时间终会改变一个人，或好或坏。只有改变才会活得舒服，然后去熟悉这个世界的游戏规则，不被规则所淘汰。提前祝贺你在优秀这条道路上越走越好。animation动画进阶1、打字机效果2、使用图片 实现奔跑的小熊动画<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>王子老师CSS进阶</title></head>.原创 2021-11-06 17:15:09 · 323 阅读 · 0 评论 -
CSS-animation实操
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>王子老师CSS进阶</title> <style> div{ width: 100px; height: 100px; background-color: red;原创 2021-11-04 22:52:32 · 93 阅读 · 0 评论 -
CSS-scale\rotate实战
<div></div>div{ overflow: hidden; width: 200px; height: 200px; background-color: pink; margin: 100px auto;}div::before{ content: '王子最帅'; display: block; width: 200px; height: 200px; background-color: p原创 2021-11-02 13:37:34 · 126 阅读 · 0 评论 -
CSS-transform
这个年代还不需要靠聪明去赢过别人，靠努力就已经足够了。1、translate1、不会影响到其他元素的位置2、对于行内标签没有效果3、百分比是相对于自身元素的translate<div>王子最帅</div><div>老铁，没毛病</div>div:first-child { width: 100px; height: 100px; background-color: aqua; /* x/y坐标都移动50像.原创 2021-11-02 00:28:07 · 106 阅读 · 0 评论 -
CSS-html5_input属性和标签
慢慢来是一种诚意，从最开始的惊鸿一瞥，到现在慢慢了解。html5新增input属性和标签<form action=""> <h1>input标签</h1> <ul> <li>文本：<input type="text"></li> <li> 时间：<input type="time"></li> .原创 2021-10-30 23:31:04 · 387 阅读 · 0 评论 -
CSS-html5特殊语义标签
一定要做一个自律的人，活好自己的孤独和简单，外向是生活必须，孤独是自我享受。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, .原创 2021-10-29 01:43:10 · 125 阅读 · 0 评论 -
CSS-注册模块
时常不敢相信自己也走在了奔三的道路上，身边的好友一个个恋爱、结婚、生子、买房、买车，而我仿佛还是那个二十多岁的少年，时间让我长了年岁，却没有让我变成一个合格的大人。不过也不要紧，只要开始了，一切都还不算太晚，别给自己太多额外的压力，轻松一点，向善，向上，努力做那个自己一直想成为的男孩。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel=".原创 2021-10-25 22:50:00 · 192 阅读 · 0 评论 -
CSS-列表详情页
小时候总羡慕长大的人，过年回家拉着行李箱穿着漂亮的衣服。现在才知道，一个人提着行李箱的背后需要肩负着多大 的不容易。li标签设置浮动的时候，下方的元素会占据li元素原有的位置，导致布局变乱，解决办法：给父元素设置清除浮动li元素添加 hover 设置外部边框的时候，会有闪动的情况，原因是它本身就有一个边框，需要此时将其自己的边框设置为transparent透明.hd_l ul li a{ display: block; font-size: 16px; line-heig.原创 2021-10-24 14:56:35 · 452 阅读 · 0 评论 -
CSS-家用电器模块
没有动态的日子，都是在搬烫手的砖。一个人最美好的状态，那一定是知道自己想要什么，并且为之全力以赴。布局：头部文字左浮动，右侧盒子右浮动，右侧盒子内部的li标签左浮动a标签内部的|通过 margin-right 挤开身体:设置5个div盒子第一个盒子 上面li左浮动，下面直接插入img标签图片防止大小不合适，可以先给img设置一个大小小知识：如果a标签内部盒子有宽度，需要给a标签设置成块级元素。<div class="jiadian_hd"> .原创 2021-10-23 18:19:54 · 203 阅读 · 0 评论 -
CSS-今日推荐模块
喜欢的人好像都是突然出现的。左侧近日推荐和右侧推荐详情模块 分别添加左浮动左侧盒子 通过 i和p标签实现右侧盒子通过li标签添加浮动中间的小竖线 通过定位 子绝父相 同时这是高度和宽度 以及上下的距离 <div class="w recom"> <div class="recom_l"> <i></i> <p>今日推荐</p> &l.原创 2021-10-23 14:32:10 · 100 阅读 · 0 评论 -
CSS-快报模块/生活模块（一）
时刻提醒自己缺的是钱，别扯没用的情。始于钱，忠于钱，一切向钱看快报模块：生活服务模块（一）使用li标签的时候，会掉下来，因为ul的宽度不够。添加 ul{width:252px} 该长度和li标签的长度一样即可会出现部分超出ul的情况，对父盒子添加 overflow属性hidden即可 <div class="news"> <div class="news_hd"> <.原创 2021-10-22 09:49:35 · 176 阅读 · 0 评论 -
CSS-仿京东轮播图一
当你压力大到奔溃的时候，不要跟任何人讲，也不要觉得自己委屈，因为没有人会心疼你。无人问津也好，技不如人也罢，你都要试着安静下来，去做自己应该做的事，而不是让烦躁和焦虑毁掉你本就不多的热情和定力，这是一个成年人应有的素养。 <!-- 主体模块开始--> <div class="w"> <div class="main"> <div class="focus"> .原创 2021-10-21 09:44:42 · 139 阅读 · 0 评论 -
CSS-仿京东底部导航栏（二）
现在的我们考虑车子、房子、职业、背景，却唯独少了爱情。一位朋友说或许是年龄越大，越来越难遇见心动的人。也有可能是经历了越来越多的事情之后，逐渐开始把自己包装起来，不愿意再去经历之前的痛苦，即便遇到自己喜欢的人和事。人生一世，殊为不易，何不放开手脚大胆做事，为何要被自己的内心所束缚呢？CSS-仿京东底部导航栏（二）要点：文字之间行间距可以使用line-height 设置高度效果如下：/*底部帮助模块*/.mod_help{ height: 185px; padding-top.原创 2021-10-20 09:35:59 · 259 阅读 · 0 评论 -
CSS-底部导航栏的实现（一）
不管活成什么样子，都不要把责任推到别人身上。每一次的选择，都有它对应的筹码，愿赌服输，这是一个成年人该有的品质。左侧的图标通过设置浮动，可以使得右侧的文字自动环绕文字<footer class="footer"> <div class="w"> <div class="mod_service"> <ul> <li> &l.原创 2021-10-19 00:01:45 · 2027 阅读 · 0 评论 -
CSS-商品分类实现
我告诉我喜欢你并不是说一定要和你在一起，我只是希望你以后能记住，在你人生低谷的时候，不要灰心，曾经有人被你的魅力所吸引，曾经是，以后也会是。CSS-商品分类实现全部商品分类和商品列表展示，鼠标滑过的时候全部展示放在一个盒子里面上面的盒子占满全部，下面的盒子就只能到下面了。 <nav class="nav"> <div class="w"> <div class="dropdown"> .原创 2021-10-18 09:41:56 · 482 阅读 · 0 评论 -
CSS-购物车计数模块
最近在忙在开心在调整最好的状态在找寻最好的自己CSS-购物车计数模块父盒子：shopcar 已有绝对定位，i标签需要用绝对定位定位至右上角，子绝父绝dorder-radius的运用 左下角是radius是0<div class="shopcar">购物车 <i class="count">4111</i> </div>.count{ position: absolute; top.原创 2021-10-18 08:54:16 · 202 阅读 · 0 评论 -
CSS-logo/search/shopcar
其实来人间一趟，就是想和喜欢的人一起吹吹风，赏赏花，看山河远阔，观人间秀色，感受星河滚烫，人间值得！input button属于行内块元素会有间隙，解决方法：添加浮动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>王子商城</title> <link rel="stylesheet" href="css/.原创 2021-10-14 09:47:03 · 117 阅读 · 0 评论 -
CSS-王子老师的商业帝国
小南辰王,少年领兵,未尝败绩,虽遭剔骨之刑,却依然至死不悔.人的一生,得有多幸运,才能遇到一个见不得你受一点委屈护你一世周全的人呐!王子商城:源代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>王子商城</title> <link rel="stylesheet" href="css/base.css.原创 2021-10-13 09:49:56 · 73 阅读 · 0 评论 -
CSS-SEO优化
岁月渐深，时光渐老，很多以前不相信的东西现在都信了，比如缘分。SEO优化-提高网站排名<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>王子商城</title> <link rel="stylesheet" href="css/base.css"> <link rel="shortcut.原创 2021-10-12 09:29:44 · 186 阅读 · 0 评论 -
CSS-favicon图标制作
其实自己也不用变的太外向，内向也挺好的，需要自己说话的时候，一定要勇敢！CSS-favicon图标制作1、保存想要的图片2、利用网站将图片处理成favicon图标 https://www.bitbug.net/3、将生成的图标图片放到项目的根目录下4、引入图标最后的下效果如下：...原创 2021-10-12 09:16:53 · 149 阅读 · 0 评论 -
CSS-transition
相由心生，心善则面善，有风骨，才有美人骨transition过渡效果谁过渡给谁加！！！<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>过渡效果</title></head><style> div { width: 200px; height: 200p.原创 2021-10-11 09:07:45 · 82 阅读 · 0 评论 -
CSS-图片模糊
一生太短暂了，遇到喜欢的人一定要认认真真的喜欢CSS-图片模糊<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片模糊</title> <style> img{ filter: blur(2px); } .father{ .原创 2021-10-10 11:50:41 · 281 阅读 · 0 评论 -
CSS3-盒子模型
请保持你心里的光，因为你不知道谁会借此走出黑暗盒子模型添加边框 默认撑大盒子使用 box-sizing: border-box;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>盒子模型</title> <style> div{ width: 200px;.原创 2021-10-10 11:30:50 · 58 阅读 · 0 评论 -
CSS-结构选择器/伪类选择器
好好生活，慢慢相遇，爱自己是终身浪漫的开始。CSS-结构选择器/伪类选择器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>王子学css</title> <style> /* 结构选择器 */ ul li:nth-child(even){ backg.原创 2021-10-10 10:50:50 · 160 阅读 · 0 评论 -
CSS-HTML5
HTML5 新增语义化标签IE9中，需要把这些元素转化为块状元素。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>王子CSS学习</title> <style> header,nav,aside,footer,article,section{ width: 50px;原创 2021-10-08 00:25:00 · 102 阅读 · 0 评论 -
CSS-特殊三角形
对我而言，你的出现，就是一道光。利用盒子的宽度和高度为0 实现下面的图形.ddd{ height:0; width: 0; border-color:blue red green black; border-style: solid; border-width: 10px 10px 10px 10px; }直角三角形：.ddd{ he.原创 2021-09-28 01:42:00 · 94 阅读 · 0 评论 -
CSS-布局技巧
人生不能太过圆满，求而不得也未必是遗憾。margin负值巧妙应用现在每个盒子中间的边框宽度是2px添加属性：margin-left:-1px鼠标滑过的时候显示红色的边框：右边的被覆盖了解决方法1：如果li都有定位，z-index:1提高层级方法2：使用相对定位，占有原来的位置<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title.原创 2021-09-28 00:35:43 · 99 阅读 · 0 评论 -
CSS-溢出文字省略号显示
健身和读书，是世界上成本最低的两种升值方式。强制一行内显示文本溢出的部分隐藏溢出的用省略号显示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>王子CSS学习</title> <style> .ddd{ width: 100px; .原创 2021-09-27 23:38:29 · 118 阅读 · 0 评论 -
CSS-表单轮廓线outline
乐观和爱，才是生活的解药，迎着阳光，温暖前行。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>王子CSS学习</title> <style> input,textarea{ #去除聚焦时的边框的样式 outline: none; }.原创 2021-09-27 23:03:19 · 177 阅读 · 0 评论 -
CSS-vertical-align
未来有光，你要努力，你要积极向上，因为你要的东西要自己给。 慢慢变好，你也是！希望有一天，能追上你。图片、表单、和文字对齐图片、表单都属于行内块元素，默认的是基线对齐<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>王子CSS学习</title> <style> .sanjiao img.原创 2021-09-27 22:43:42 · 68 阅读 · 0 评论 -
CSS-鼠标样式
初见乍欢，久处任怦然。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>王子CSS学习</title> <style> </style></head><body> <div class="sanjiao"> <div.原创 2021-09-27 01:59:34 · 86 阅读 · 0 评论 -
CSS-小三角的使用
我本将心向明月，奈何明月照沟渠。 终有弱水替沧海，再把相思寄巫山。主要通过设置一个高度和宽度为0的空盒子，然后设置边框实现，三角大小通过边框的大小实现。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>王子CSS学习</title> <style> .sanjiao{ .原创 2021-09-27 01:51:32 · 230 阅读 · 0 评论 -
CSS-小图标使用
这世间，青山灼灼，星光杳杳，秋雨淅淅，晚风慢慢，都不如你使用地址：https://icomoon.io复制下方的方框，到对应的span位置，然后添加样式即可显示效果如图：原创 2021-09-27 01:20:02 · 148 阅读 · 0 评论 -
CSS---元素的显示与隐藏
晓看天色，暮看云。行也思君，坐也思君。 春赏百花冬观雪。行亦念卿，梦亦念卿。元素的显示与隐藏display:不保留元素位置visibility:保留元素位置overflow：auto：超出显示滚动框visible--默认的属性scroll：超出和不超出都显示滚动框hidden：超出部分隐藏...原创 2021-09-25 23:04:24 · 69 阅读 · 0 评论