HTML5+CSS3设计界面
近期在做一个关于房屋装修的手机上的项目，前台是用H5+C3完毕的，挂在微信上。全部相对来说不是非常难。
这段时间通过敲Html5+Css3。分享一些自己觉得值得学习的知识。
都非常easy。自己操作一遍就会了。前台说简单简单。说难也难。刚開始画的时候。各种调试，各种不熟练。可是自己敲几个demo,完毕几个页面，效率满满就提升了。看着自己画的美美哒界面。心里也是美美哒。
怎样绘制一个锯齿状的矩形：如图
我们知道绘制图形能够用canvas ，canvas是HTML5出现的新标签，用于在网页上绘制图形，H5的canvass使用Javascript在网页上绘制图形。
如上锯齿状的矩形，就是用canvas绘制的。
实现代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>锯齿图</title>
<script type="text/javascript">
window.addEventListener("load", eventWindowLoaded, false);
function eventWindowLoaded(){
var x,y;
var theCanvas = document.getElementById("canvas");
var context = theCanvas.getContext("2d");
context.strokeStyle = '#CB9A61';
context.lineWidth=10;
context.strokeRect(10, 10, theCanvas.width-20, theCanvas.height-20);
context.fillStyle = "#FFFFFF";
for(x=5;x<=canvas.width;x=x+10){
context.beginPath();
context.arc(x,5,5,0,Math.PI*2,true);
context.arc(x,canvas.height-5,5,0,Math.PI*2,true);
context.closePath();
context.fill();
}
for(y=5;y<=canvas.height;y=y+10){
context.beginPath();
context.arc(5,y,5,0,Math.PI*2,true);
context.arc(canvas.width-5,y,5,0,Math.PI*2,true);
context.closePath();
context.fill();
}
}
</script>
</head>
<body>
<div style="position: absolute; top: 100px; left: 100px;">
<canvas id="canvas" width="400" height="170" top=50px; left=50px;>
</div>
</body>
</html>
怎样写例如以下这样一个形状，一个矩形分成两部分，用斜线隔开，两种颜色。如图：
起初是这么一个思路，用一个div,中间画个斜线，分成两部分，两种颜色。可是没有实现。因为前台薄弱，能力有限，想到了第二种方案。
用三个div,左右是两个div,设置宽和高，起重要作用的事实上是这一部分：
事实上就是一个矩形。分成两个三角形，最后实现了如上效果。
换个思路，实现起来so easy，不能在一棵树上吊死。
代码例如以下：
<!DOCTYPE HTML>
<html lang="en"> <body style="margin: 0 0 0 0;">
<div id="1" style="background-color:#727171;width:50px;height:20px;float:left" ></div>
<div id="2" style="float:left;border-width:10px;border-color:#727171 #9fa0a0 #9fa0a0 #727171;border-style:solid"></div>
<div id="3" style="background-color:#9fa0a0;width:50px;height:20px;float:left" ></div>
</body>
</html>
兴许继续总结有关HTML和CSS的一些知识，前台的知识看上去简单。事实上是个仔细活。能够锻炼一个人的耐心。从简单到复杂，从入门到深入，一点点提高自己。
HTML5+CSS3设计界面的更多相关文章
- HTML5+CSS3从入门到精通随书光盘 ISO 镜像视频教程
HTML5+CSS3从入门到精通(清华社“视频大讲堂”大系)通过基础知识+中小实例+综合案例的方式,讲述了用HTML5+ CSS3设计构建网站的必备知识,相对于权威指南.高级程序设计.开发指南同类图书 ...
- HTML5+CSS3从入门到精通 中文pdf版
HTML5+CSS3从入门到精通是通过基础知识+中小实例+综合案例的方式,讲述了用HTML5+ CSS3设计构建网站的必备知识,相对于专业指南.高级程序设计.开发指南同类图书,本书是一本适合快速入手的 ...
- html5/css3响应式布局介绍及设计流程
html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...
- 15个前卫的 HTML5 & CSS3 网页设计作品
今天,我们编译收集一组使用 HTML5 和 CSS3 制作的精美网站.在此集合中,你可以看到平面设计,网页设计,作品集和企业网站设计实例. 响应式设计和基于 HTML5 & CSS3 编码的网 ...
- 12款界面精美的 HTML5 & CSS3 网站模板
这里分享的12款完全采用响应式设计的 HTML5 & CSS3 网站设计模板.每一个细节都精心设计,以创建一个美妙的用户体验.这些响应主题和模板最适合用于电子商务,商业门户网站,个人作品集以及 ...
- 16个时髦的扁平化设计的 HTML5 & CSS3 网站模板
创建网站最好办法之一是使用现成的网站模板或使用开源 CMS 应用程序.所以,今天这篇文章给大家带来的是16款基于 HTML5 & CSS3 的精美的扁平风格网站模板,大家可以借助这些优秀的网站 ...
- HTML5+CSS3的响应式网页设计：自动适应屏幕宽度
这几天都在修改博客上面的样式.本来用的是d83.0的模板.自己又修改了许多地方,其中自己修改的一些地方在手机里面显示的效果不是很理想,于是想改成自适应的效果.对CSS3不是特别的熟练,只能去网上找找案 ...
- 采用CSS3设计的登录界面，动态效果（动画）
与上一篇的“采用CSS3设计的登陆界面”的相同,只是样式style添加了CSS3的动画元素. style内容如下: <style> html,body,div{ margin:0; pad ...
- 32+激发灵感的HTML5/CSS3网页设计教程
HTML5是寄托在HTML4基础上取得了的广泛成就.这不仅意味着你不必完全放弃现有的一些标记,而是可以借鉴,以加强 它. CSS3也以同样的方式在互联网内容的安排下,提供了它的柔韧性.CSS3是开 ...
随机推荐
- element-ui iview-admin 都是基于vue的ui框架
element-ui iview-admin 都是基于vue的ui框架
- viewstate 与 session 区别
Session存在于服务器端可以跨页面.耗费服务器资源.ViewState载体是页面文件,消耗带宽. EG: viewstate是存储在客户端的隐藏信息,当服务器接受请求回传时可以将viewstate ...
- jquery ajax 同步异步的执行
jquery ajax 同步异步的执行 大家先看一段简单的jquery ajax 返回值的js 代码 function getReturnAjax{ $.ajax({ type:" ...
- 笔试算法题（54）：快速排序实现之单向扫描、双向扫描（single-direction scanning, bidirectional scanning of Quick Sort）
议题:快速排序实现之一(单向遍历) 分析: 算法原理:主要由两部分组成,一部分是递归部分QuickSort,它将调用partition进行划分,并取得划分元素P,然后分别对P之前的部分和P 之后的部分 ...
- http返回状态码错误
415 数据格式不正确 415 Unsupported Media Type 服务器无法处理请求附带的媒体格式 后台用json接收 1.将表单数据转换成json数据 2.设置contentType:& ...
- java1.8学习-什么样的匿名内部类能被lambda语法代替？
java1.8学习-什么样的匿名内部类能被lambda语法代替? java1.8好多新的特性真的很有意思,特别是Lambda.在学习的时候发现并不是所有的匿名内部类都可以用Lambda代替. lamb ...
- JavaScript之作用域和闭包
一.作用域 作用域共有两种主要的工作模型:第一种是最为普遍的,被大多数编程语言所采用的词法作用域,另外一种叫作动态作用域: JavaScript所采用的作用域模式是词法作用域. 1.词法作用域 词法作 ...
- Python中面向对象初识到进阶
面向对象初识到进阶 # 面向对象结构: # class 类名: # def __init__(self,参数1,参数2): # self.对象的属性1 = 参数1 # self.对象的属性2 = 参数 ...
- form 表单onclick事件 禁止表单form提交
最近遇到一次处理form数据的过滤,采用了button的onclick事件来检查,发现return false后表单仍然提交了. 于是仔细研究了下onclick.onsubmit.submit集合函数 ...
- LeetCode（6） ZigZag Conversion
题目 The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of rows li ...