项目实战之玩转div+css制作自己定义形状
项目需求
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> ...
随机推荐
- iOS之绘制像素到屏幕
译注:这篇文章虽然比较长,但是里面的内容还是很有价值的. 像素是如何绘制到屏幕上面的?把数据输出到屏幕的方法有很多,通过调用很多不同的framework和不同的函数.这里我们讲一下这个过程背后的东西. ...
- vue在传值的时候经常遇到的问题
在我用vue编写程序的时候,在传值的时候,经常会遇到些问题,像今天遇到了两个问题,在用父传子的方法去传值,当父组件中的要传的数据是for循环出来的或者是列表的时候,你想每次运行的事件,都去传某一行,或 ...
- java 图片合成文字或者awt包下的对话框引入自定义字体库
成就卡图片字体问题:1.下载 xxx.ttf 文件2.mkdir /usr/local/jdk1.6.0_11/jre/lib/fonts/fallback. 在jre/lib/fonts 下 ...
- JavaScript基础对象---Number
一.创建Number实例对象 /** * new Number(value); * value 被创建对象的数字值 * * Number 对象主要用于: 如果参数无法被转换为数字,则返回 NaN. 在 ...
- 条款3：尽可能使用const(use const whenever possible)
1.只要这(某值保持不变)是事实,就应该确实说出来,这样可以获得编译器的协助,确保这条约束不被违反. 2.keyword const 有很多种用法,但都简单易用. 2.1classes 外部修饰glo ...
- 读书笔记之《编程小白的第1本Python入门书》
本书电子版下载地址:百度网盘 写在前面:你需要这本书的原因 有没有那一个瞬间,让你想要放弃学习编程? 在我决心开始学编程的时候,我为自己制定了一个每天编程1小时的计划,那时候工作很忙,我只能等到晚上9 ...
- python str.format 中文对齐的细节问题
写了一个练手的爬虫...在输出的时候出现了让人很不愉♂悦的问题 像这样: 令人十分难受啊! #----------------------------------------------------- ...
- 用cpp写对拍程序
#include <bits/stdc++.h> using namespace std; int main() { while(true) { puts(""); p ...
- 将树莓派3B+变成WiFi热点
我有一个树莓派3B+,安装的是官方的Raspbian Stretch操作系统,该系统和Debian 9很类似,很多命令都是通用的. 接下来我将演示如何利用树莓派搭建WiFi热点,此热点就和家里的无线路 ...
- HDU 4405 飞行棋上的数学期望
突然发现每次出现有关数学期望的题目都不会做,就只能找些虽然水但自己还是做不出的算数学期望的水题练练手了 题目大意: 从起点0点开始到达点n,通过每次掷色子前进,可扔出1,2,3,4,5,6这6种情况, ...