项目需求

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> ...

随机推荐

luogu P4752
给定一个数字 A ,这个 A 由 a1,a2,...,aN 相乘得到. 给定一个数字 B ,这个 B 由 b1,b2,⋯,bM 相乘得到. 如果 A/B 是一个质数,请输出YES,否则输出NO. 输 ...
<Spring Cloud>入门二 Eureka Client
1.搭建一个通用工程 1.1 pom 文件 <?xml version="1.0" encoding="UTF-8"?> <project x ...
UART中RTS、CTS
RTS (Require ToSend,发送请求)为输出信号,用于指示本设备准备好可接收数据,低电平有效,低电平说明本设备可以接收数据. CTS (Clear ToSend,发送允许)为输入信号,用于 ...
MySQL 优化之 Copying to tmp table on disk
项目中遇到了慢查询问题 Sql语句 SELECT sum(price) AS price, `member_id` FROM `crm_upload` GROUP BY member_id ORDER ...
uC/OSii之任务划分
满足以下几个指标将会使软件设计比较简洁高效. 满足实时性指标任务数目合理简化软件系统降低资源需求设备依赖性划分:主要是对于一些输入输出设备进行划分,输入输出设备分为主动型和被动性.主动型有一个 ...
杭电 2553 N皇后问题（dfs）
Description 在N*N的方格棋盘放置了N个皇后,使得它们不相互攻击(即任意2个皇后不允许处在同一排,同一列,也不允许处在与棋盘边框成45角的斜线上. 你的任务是,对于给定的N,求出有多少种合 ...
spring的IOC和DI
https://blog.csdn.net/fuzhongmin05/article/details/55802816 (1)IOC:控制反转,把对象创建交给spring进行配置 (2)DI:依赖注入 ...
CentOS 中 YUM 安装桌面环境
CentOS 作为服务器的操作系统是很常见的,但是因为需要稳定而没有很时髦的更新,所以很少做为桌面环境.在服务器上通常不需要安装桌面环境,最小化地安装 CentOS(也就是 minimal CentO ...
CSU1350 To Add which?
题目链接: http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1350 这题目因为每一个数都跟相邻的数有关,所以可以从左到右和从右到左一次扫一遍即可代 ...
Genymotion 常见问题Unable to configure the network adapter for the virtual device解决
Genymotion 常见问题Unable to configure the network adapter for the virtual device解决参考:http://www.pczhis ...

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

项目需求

模型抽象

技术难点

实践过程

HTML页：

CSS页

实践效果

总结思考

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

随机推荐

热门专题