项目实战之玩转div+css制作自己定义形状

最新推荐文章于 2021-08-04 00:34:01 发布
最新推荐文章于 2021-08-04 00:34:01 发布
阅读量440 收藏
点赞数
文章标签： javascript ViewUI

项目需求


要求制作上图所看到的的效果，能达到灵活可配的效果。

我想初步想法是用div+css来制作。

------------------------------------------------------------------------------------------------------

模型抽象

以下的这个模型是我抽象出来的一个简单的解决方式。div能够表示一个矩形。然后再加上一个旋转90度的div就能够组起来达到我们想要的效果了。使用div就能够非常方便地对应各种事件。使站点灵活可配。

------------------------------------------------------------------------------------------------------

技术难点

1、怎样做到让div旋转？

       -moz-transform: rotate(90deg);

       假设设置的值为正数表示顺时针旋转，假设设置的值为负数，则表示逆时针旋转

2、怎样设置div的层次关系？

       z-index

------------------------------------------------------------------------------------------------------

实践过程

HTML页：

-------------------------------------------------------------------------

<html>
    <head>
        <title>test</title>
        <link rel="stylesheet" type="text/css" href="css/chainselect.css">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="js/text.js"></script>
    </head>
    
    <body>
        <div id="rectangle1" οnmοusemοve="MouseMove(this)">新生报到流程</div>
        <div id="arrow1" οnmοusemοve="MouseMove(this)"></div>
        
        <div id="arrow21"></div>
        <div id="rectangle2">公约页</div>
        <div id="arrow22"></div>
        
        <div id="arrow31"></div>
        <div id="rectangle3">完好个人信息</div>
        <div id="arrow32"></div>
        
        <div id="arrow41"></div>
        <div id="rectangle4">选择缴费方式</div>
        <div id="arrow42"></div>
        
        <div id="arrow51">sss</div>
        <div id="rectangle5">新生报到流程</div>
    </html>

-------------------------------------------------------------------------

CSS页

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------


#rectangle1 {
  border:2px solid;
  border-right:none;
  background-color:#34B0D9;
  width:169px;
  height:29px;
  float:left;
  text-align:center;
  font-size:16px;
  padding-top:5px;
  }
#arrow1 {
  float:left;
  -moz-transform: rotate(45deg);
  border:2px solid;
  background-color:#34B0D9;
  width:25px;
  height:25px;
  position:relative;
  top:5px;
  left:-14px;
  border-bottom:none;
  border-left:none;
 
}
#arrow21{
    float:left;
    -moz-transform: rotate(45deg);
    border:2px solid;
    background-color:#FFFFFF;
    height:32px;
    width:32px;
  position:relative;
  left:-35px;
  top:5px;
  z-index:-1;
    border:none;
}  
#rectangle2 {
  border:2px solid;
  border-right:none;
  background-color:#34B0D9;
  width:169px;
  height:29px;
  float:left;
  text-align:center;
  font-size:16px;
  padding-top:5px;
  float:left;
  position:relative;
  left:-50px;
  z-index:-2;
  border-left:none;
  }
  #arrow22 {
  float:left;
  -moz-transform: rotate(45deg);
  border:2px solid;
  background-color:#34B0D9;
  width:25px;
  height:25px;
  position:relative;
  top:5px;
  left:-63px;
  border-bottom:none;
  border-left:none;
}
#arrow31{
    float:left;
    -moz-transform: rotate(45deg);
    border:2px solid;
    background-color:#FFFFFF;
    height:32px;
    width:32px;
  position:relative;
  left:-84px;
  top:5px;
  z-index:-1;
    border:none;
}  
#rectangle3 {
  border:2px solid;
  border-right:none;
  background-color:#34B0D9;
  width:169px;
  height:29px;
  float:left;
  text-align:center;
  font-size:16px;
  padding-top:5px;
  float:left;
  position:relative;
  left:-100px;
  z-index:-2;
  border-left:none;
  }
    #arrow32 {
  float:left;
  -moz-transform: rotate(45deg);
  border:2px solid;
  background-color:#34B0D9;
  width:25px;
  height:25px;
  position:relative;
  top:5px;
  left:-113px;
  border-bottom:none;
  border-left:none;
}

#arrow41{
    float:left;
    -moz-transform: rotate(45deg);
    border:2px solid;
    background-color:#FFFFFF;
    height:32px;
    width:32px;
  position:relative;
  left:-134px;
  top:5px;
  z-index:-1;
    border:none;
}  
#rectangle4 {
  border:2px solid;
  border-right:none;
  background-color:#34B0D9;
  width:169px;
  height:29px;
  float:left;
  text-align:center;
  font-size:16px;
  padding-top:5px;
  float:left;
  position:relative;
  left:-148px;
  z-index:-2;
  border-left:none;
  }
    #arrow42 {
  float:left;
  -moz-transform: rotate(45deg);
  border:2px solid;
  background-color:#34B0D9;
  width:25px;
  height:25px;
  position:relative;
  top:5px;
  left:-161px;
  border-bottom:none;
  border-left:none;
}


#arrow51{
    float:left;
    -moz-transform: rotate(45deg);
    border:2px solid;
    background-color:#FFFFFF;
    height:32px;
    width:32px;
  position:relative;
  left:-180px;
  top:5px;
  z-index:-1;
    border:none;
}  
#rectangle5 {
  border:2px solid;
  background-color:#34B0D9;
  width:169px;
  height:29px;
  float:left;
  text-align:center;
  font-size:16px;
  padding-top:5px;
  float:left;
  position:relative;
  left:-196px;
  z-index:-2;
  border-left:none;
  }

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

实践效果


总结思考

1、面对复杂的问题。要学会抽象当前的问题。

2、不将就是发现的原动力。



weixin_34080903
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
div+css实战项目：有道云页面
08-14
这个是培训学校老师讲的div+css实战项目，做前端开发的可以参考。对网页切图，布局都有涉及。
项目实战之玩转div+css制作自定义形状
不忘初心
08-16 4734
项目需求： 要求制作上图所示的效果，能达到灵活可配的效果。我想初步想法是用div+css来制作。 抽象模型： 面对复杂的问题，要学会抽象当前的问题。下面的这个模型是我抽象出来的一个简单的解决方案。 这样我们就可以用各种css效果来组合出我们需要的效果，放到网站中可以灵活配置图形的各种样式。 技术难点： 1、如何做到让div旋转？        -moz-transform:
DIV+CSS实战系列课程附实例源码
xrl2012的专栏
01-23 888
教程目录： 1._固定大小圆角边框. 2._.不固定大小圆角边框. 3.灵活的图片边框. 4.div.css视频教程--.ul横向菜单. 5.div.css视频教程_文字排版. 6.div.css视频教程_制作简单页面之ps布局. 7.div.css视频教程_.制作简单页面之css布局. 8.div.css视频教程_.制作简单页面之填充内容. 9.div.css视频教程_.
css 自定义 形状 图形,CSS自定义形状椭圆形
weixin_31983133的博客
08-04 261
3 个答案:答案 0 :(得分：2)这是你在寻找什么？.oval {background: #363636 none repeat scroll 0 0;border: 2px solid #fff;border-radius: 100%;height: 170px;margin-top: 5%;transform: rotate(-8deg);width: 400px;}.blackfriday...
div+css js
04-03
有关div+css的类容，网页的基本制作，网页的特效
div+css制作圆角矩形的原理示例解读
09-25
在网页设计中，使用div+CSS来创建圆角矩形是一种常见的方法，它利用了CSS的边框和背景属性来模拟圆角效果。在没有CSS3之前，由于浏览器的兼容性问题，这种方法尤为流行。本篇文章将深入解析如何通过div+CSS实现圆角...
DIV+CSS简单登录界面模板
06-06
在网页设计领域，`DIV+CSS`是一种广泛使用的布局技术，它通过定义不同的`Div`（Division，分块）元素并应用相应的`CSS`（Cascading Style Sheets，层叠样式表）样式来构建页面结构和外观。标题提到的“DIV+CSS简单...
div+css实战案例html整站模板下载
04-02
3. **实战案例**：通过实际的项目案例，学习者可以更好地理解`div+css`在构建网站时的应用。这些案例可能包含多种网页布局，如网格系统、响应式设计、导航栏、滑动效果、浮动元素等，有助于提升实践能力。 4. **整...
div+css布局制作横向带箭头步骤流程样式
11-08
在网页设计中，`div+css`布局是构建页面结构和样式的重要技术。它通过HTML的`<div>`元素作为容器来组织内容，并利用CSS（层叠样式表）来定义这些容器的外观、位置和样式。`div+css`布局能够实现灵活、可维护的网页...
DIV+CSS制作仿百度联盟广告代码.rar
05-11
本资源“DIV+CSS制作仿百度联盟广告代码.rar”显然是一个教学或示例项目，旨在教授如何使用`DIV+CSS`来创建类似百度联盟广告的样式效果。下面我们将深入探讨`DIV+CSS`技术及其在制作此类广告代码中的应用。 `DIV`...
html 形状div,div+css实现各种形状（精心整理）
weixin_30444517的博客
06-03 3488
1.正方形.div {width: 100px;height: 100px;background: red;}2.矩形.div {width: 200px;height: 100px;background: red;}3.圆形.div {width: 100px;height: 100px;background: red;-moz-border-radius: 50px;-webkit-borde...
html div 不规则形状,css如何设置不规则div？
weixin_28730403的博客
06-03 2830
一般在我们用html写出来的div都是方形的div，如果我们要写不规则的div要怎么办呢？我们可以使用css3的transparent或者border-radius或者transform来实现。css设置不规则div的方法示例：1、设置圆形的div 代码展示：.div1{width: 100px;height: 100px;background: red;border-radius: 50%;te...
如何实现不规则的Div外部形状？
热门推荐
qq_42988963的博客
09-03 1万+
如何实现不规则的Div外部形状？ 一般在我们用html写出来的div都是方形的div，如果我们要写不规则的div要怎么办呢？我们可以使用css3的transparent或者border-radius或者transform来实现。 1、设置圆形的div 代码展示： &lt;style&gt; .div1{ width: 100px; height: 100px; bac...
css自定义形状(clip-path)
罪无囚
07-19 983
示例 接下来的操作以以下div为例 基本图形：inset inset() : 定义一个矩形 。注意，定义矩形不是rect，而是 inset。 inset()可以传入5个参数，分别对应top,right,bottom,left的裁剪位置,round radius（可选，圆角） //示例 clip-path：inset clip-path: inset(2em 1em 5em 2em round 3...
CSS实现各种形状
weixin_33910137的博客
10-07 257
CSS3的一个非常酷的特性是允许我们创建各种规则和不规则形状的图形，从而可以减少图片的使用。以前只能在Photoshop等图像编辑软件中制作的复杂图形现在使用CSS3就可以完成了。通过使用新的CSS属性，像transform和border-radius，我们可以创建非常漂亮和复杂的图形效果。  圆形   要使用CSS来制作一个圆形，我们需要一个div，被给它设置一个ID。 ...
html中形状代码,用css与div代码绘制一些常见的各种形状的图形
weixin_39652658的博客
06-03 1185
在制作网页的时候我们为了增添页面的美观性，会在页面中添加一些图案或者将页面部分区块设置为特殊形状.如果全部使用图片会使页面体积增大，造成加载速度慢等问题,那么怎样使用div+css实现一些简单的图形绘制呢？在div+css布局时，我们一般是在页面中绘制一个个矩形，然后使用浮动来控制页面中矩形所在的位置代码如下：.juxing {width: 500px;height: 100px;}需要用css绘...
DIV+CSS基础入门与实战项目指导
《网页设计与制作(DIV+CSS)》实训指导书是一套旨在帮助学习者深入理解和实践网页布局与样式的教材。该系列教程包含了四个具体的实训项目，分别是：从基础开始、摄影师个人网站布局、生物研究中心网站布局和教育公司...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值