项目需求

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

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

我想初步想法是用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" onmousemove="MouseMove(this)">新生报到流程</div>

       <div id="arrow1" onmousemove="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、不将就是发现的原动力。

项目实战之玩转div+css制作自己定义形状的更多相关文章

利用DIV+CSS制作网页过程中常用的基本概念及标签使
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
Div+Css制作圆
Div+Css制作四分之一圆主要是使用Css3.0中的border-radius这个圆角隐藏属性.利用这一属性,我们可以画圆,画半圆,四分之三圆,四分之一圆等.以后我会更新…… 如何使用border- ...
DIV+CSS制作二级横向弹出菜单，略简单
没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...
纯Div+Css制作的漂亮点击按钮和关闭按钮
纯Div+Css制作的漂亮点击按钮和关闭按钮,单击点击按钮也有效果.这些都不是图片.
使用div+css制作简单导航以及要注意问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
DIV+CSS制作斜线效果记录
DIV+CSS 斜线效果很简单,只需设置一下CSS Border 的边框就能有斜线效果.代码分享给大家,你可以自己变通. 提示要注意两点:1.DIV宽高的定义.2.DIV在 IE6 中默认是有高度的. ...
div+css 制作表格
<div class="table"> <h2 class="table-caption">花名册:</h2> <di ...
div+css制作表格
html: <div class="table"> <h2 class="table-caption">花名册:</h2> ...

随机推荐

shim和polyfill的区别
今天看vue的响应原理,突然被提到shim这个词,翻阅些许资料然后整理出以下这些内容. 在JavaScript的世界里,有两个词经常被提到,shim和polyfill. 首先理解这两个词之前我们先来了 ...
洛谷 P1518 两只塔姆沃斯牛
P1518 两只塔姆沃斯牛 The Tamworth Two 简单的模拟题,代码量不大. 他们走的路线取决于障碍物,可以把边界也看成障碍物,遇到就转,枚举次,因为100 * 100 * 4,只有4个可 ...
openwrt vsftp
vsftp: very security ftp openwrt配置:make menuconfig ==> network ==> file transfer ==> vsftp ...
Android 图片设置圆角方法之二
Android中经常会遇到对图片进行二次处理,例如加圆角,或者显示圆形图片.接下来我们再介绍一种方法. 首先, 自定义ImageView: android:id="@+id/iv" ...
Uva 12325 Zombie's Treasure Chest （贪心，分类讨论）
题意: 你有一个体积为N的箱子和两种数量无限的宝物.宝物1的体积为S1,价值为V1:宝物2的体积为S2,价值为V2.输入均为32位带符号的整数.你的任务是最多能装多少价值的宝物? 分析: 分类枚举, ...
xtu字符串 D. 病毒侵袭
D. 病毒侵袭 Time Limit: 1000ms Memory Limit: 32768KB 64-bit integer IO format: %I64d Java class nam ...
Leetcode 236.二叉树的最近公共祖先
二叉树的最近公共祖先给定一个二叉树, 找到该树中两个指定节点的最近公共祖先. 百度百科中最近公共祖先的定义为:"对于有根树 T 的两个结点 p.q,最近公共祖先表示为一个结点 x,满足 x ...
使用dd命令快速生成大文件或者小文件的方法
使用dd命令快速生成大文件或者小文件的方法转载请说明出处:http://blog.csdn.net/cywosp/article/details/9674757 在程序的测试中有些场 ...
【BFS+优先级队列】Rescue
https://www.bnuoj.com/v3/contest_show.php?cid=9154#problem/I [题意] 给定一个n*m的迷宫,A的多个小伙伴R要去营救A,问需要时间最少的小 ...
【数学】codeforces A. Success Rate
http://codeforces.com/contest/773/problem/A [思路] 用 (x+a)/(y+b) = p/q 来表示其核心思想,其中a 为做对的题目,b为做的题目,则有x+ ...

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

项目需求

模型抽象

技术难点

实践过程

HTML页：

CSS页

实践效果

总结思考

项目实战之玩转div+css制作自己定义形状的更多相关文章

随机推荐

热门专题