前端
BigDippers
这个作者很懒,什么都没留下…
展开
-
制作一个京东平台的优惠卷
效果图:思路:我们吧整个盒子大体拆分成3部分图片—价格—以及最后的红色部分然后吧价格分为三部分:价格—优惠力度–优惠卷简介红色部分分为3部分:连个半圆–以及白色的文字然后创建结构:<div class="yhj1"> <div class="yhj_photo"> </div> <div class="yhj_discrib"> <div class="discrib1">原创 2021-02-28 20:08:17 · 406 阅读 · 0 评论 -
写一个斜边框的盒子
需要使用到的语句:transform:skewX()transfrom:skewY()首先创建结构: <div class="box1"> <div class="box2"> <span>box2</span> </div> </div>然后创建css样式: .box1{ width:50px; height:20px; margin:auto; border:1px solid原创 2021-02-28 16:52:45 · 1948 阅读 · 0 评论 -
利用css写一个固定在屏幕上的元素
创建结构 <div class="box1"> 客服服务 </div>插入样式 .box1{ width:20px; height:85px; color:white; background-color:red; word-wrap:break-word; position:fixed;/*设置固定在屏幕上*/ right:0px;/*固定的位置*/ top:50%; }...原创 2021-02-28 10:50:20 · 572 阅读 · 0 评论 -
利用css做一个子菜单
首先创建好结构:注意子集和父级必须是嵌套关系 <div class="box"> 重庆 <div class="box1"> <p>北京</p> <p>天津</p> <p>上海</p> <p>广州</p> <p>四川</p> </div> </div>然后是css样式首先设置好父级和子集的样原创 2021-02-28 10:38:15 · 258 阅读 · 0 评论 -
css实现简易的一个导航栏(横排)
创建结构: <div class="nav"> <ul> <li>A1</li> <li></li> <li>A2</li> <li></li> <li>A3</li> <li></li> <li>A4</li> <li></li> <l原创 2021-02-28 00:11:43 · 1935 阅读 · 0 评论 -
css实现图文混排
创建盒子结构: <div class="box1"> <div class="box2"> <img src="C:\Users\吉吉国王\Desktop\寒假大作业\photo\pdgc3.webp"> </div> <span>图片文字</span> </div>思路:在一个大盒子里面放图片以及文字css样式设置: .box1{ width:100px;/*设置大盒子的大小*/原创 2021-02-27 23:51:53 · 3106 阅读 · 0 评论 -
css实现超出文本用省略号来表示
<div class="word"> <span>ABCDEFGHIGKLMN</span></div>我们创建一个盒子在里面加入文字,然后设置样式.word{ width:60px;/*固定盒子的大小*/ height:30px; line-height:20px;/*允许文本占用20的高度*/ word-wrap:nowrap;/*禁止文本自动换行*/ overflow:hidden;/*将超出部分隐藏*/ text-overflow原创 2021-02-27 22:27:15 · 124 阅读 · 0 评论 -
HTML+CSS实现搜索框
HTML+CSS实现搜索框首先:<div class="box"> <input type="text" class="input" placeholder="请输入商品"> <!--placeholder是文本框中的提示文字--> <input type="button" value="搜索" class="button"></div>我们先放置一个大盒子,里面嵌套1个文本框,一个按钮。然后我们使用css设置样式: .box{原创 2021-02-27 22:11:57 · 41516 阅读 · 4 评论