项目需求

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制作自己定义形状的更多相关文章

  1. 利用DIV+CSS制作网页过程中常用的基本概念及标签使

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  2. 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  3. Div+Css制作圆

    Div+Css制作四分之一圆主要是使用Css3.0中的border-radius这个圆角隐藏属性.利用这一属性,我们可以画圆,画半圆,四分之三圆,四分之一圆等.以后我会更新…… 如何使用border- ...

  4. DIV+CSS制作二级横向弹出菜单，略简单

    没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...

  5. 纯Div+Css制作的漂亮点击按钮和关闭按钮

    纯Div+Css制作的漂亮点击按钮和关闭按钮,单击点击按钮也有效果.这些都不是图片.

  6. 使用div+css制作简单导航 以及要注意问题

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. DIV+CSS制作斜线效果记录

    DIV+CSS 斜线效果很简单,只需设置一下CSS Border 的边框就能有斜线效果.代码分享给大家,你可以自己变通. 提示要注意两点:1.DIV宽高的定义.2.DIV在 IE6 中默认是有高度的. ...

  8. div+css 制作表格

    <div class="table"> <h2 class="table-caption">花名册:</h2> <di ...

  9. div+css制作表格

    html: <div class="table"> <h2 class="table-caption">花名册:</h2> ...

随机推荐

  1. Java中的反射--Reflect

    在张孝祥老师的Java讲解中,学习到了Java反射的一部分知识,觉得有必要好好学习一下哈. 一.反射的理解 经典总结:反射就是把Java类中的各种成分映射成为相应的Java类 例如:一个Java类中用 ...

  2. 获得Dictionary所有key和value值

    Dictionary<string, string> dc = new Dictionary<string, string>(); dc.Add("code" ...

  3. Python Socket详细介绍

    Socket 类型 套接字格式: socket(family,type[,protocal]) 使用给定的地址族.套接字类型.协议编号(默认为0)来创建套接字. socket类型 描述 socket. ...

  4. 导出csv文件（php实现）

    <?php namespace App\Library\lib; class CsvLib { /** * [构造函数] * */ public function __construct() { ...

  5. 第二章：C++简单程序设计

    主要内容: 1.C++语言概述 2.基本数据类型和表达式 3.数据的输入与输出 4.算法的基本控制结构 5.自定义数据类型 1.数据类型default is double 2.自定义数据类型就是bui ...

  6. Tomcat server.xml配置文件

    server.xml配置文件: <?xml version="1.0" encoding="UTF-8"?> <!-- Licensed to ...

  7. Django框架基础知识02-路由及渲染

    1.URL(Uniform Resoure Locator)统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址.互联网上的每个文件都有一个唯一的URL ...

  8. 5.12-leepcode 作业详解

    leepcode 作业详解 1.给定一个整数数组,判断是否存在重复元素.如果任何值在数组中出现至少两次,函数返回 true.如果数组中每个元素都不相同,则返回 false. 正确解答 class So ...

  9. 跟http相关的

    http http 中     请求: 请求行    请求方式   采用协议   版本号     网址    请求头    客户端可以接受数据类型    可以接受语言     可以接受的压缩格式 请求 ...

  10. 杭电 1069 Monkey and Banana

    Description A group of researchers are designing an experiment to test the IQ of a monkey. They will ...