近期在做一个关于房屋装修的手机上的项目，前台是用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设计界面的更多相关文章

  1. HTML5+CSS3从入门到精通随书光盘 ISO 镜像视频教程​

    HTML5+CSS3从入门到精通(清华社“视频大讲堂”大系)通过基础知识+中小实例+综合案例的方式,讲述了用HTML5+ CSS3设计构建网站的必备知识,相对于权威指南.高级程序设计.开发指南同类图书 ...

  2. HTML5+CSS3从入门到精通 中文pdf版​

    HTML5+CSS3从入门到精通是通过基础知识+中小实例+综合案例的方式,讲述了用HTML5+ CSS3设计构建网站的必备知识,相对于专业指南.高级程序设计.开发指南同类图书,本书是一本适合快速入手的 ...

  3. html5/css3响应式布局介绍及设计流程

    html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...

  4. 15个前卫的 HTML5 & CSS3 网页设计作品

    今天,我们编译收集一组使用 HTML5 和 CSS3 制作的精美网站.在此集合中,你可以看到平面设计,网页设计,作品集和企业网站设计实例. 响应式设计和基于 HTML5 & CSS3 编码的网 ...

  5. 12款界面精美的 HTML5 & CSS3 网站模板

    这里分享的12款完全采用响应式设计的 HTML5 & CSS3 网站设计模板.每一个细节都精心设计,以创建一个美妙的用户体验.这些响应主题和模板最适合用于电子商务,商业门户网站,个人作品集以及 ...

  6. 16个时髦的扁平化设计的 HTML5 & CSS3 网站模板

    创建网站最好办法之一是使用现成的网站模板或使用开源 CMS 应用程序.所以,今天这篇文章给大家带来的是16款基于 HTML5 & CSS3 的精美的扁平风格网站模板,大家可以借助这些优秀的网站 ...

  7. HTML5+CSS3的响应式网页设计：自动适应屏幕宽度

    这几天都在修改博客上面的样式.本来用的是d83.0的模板.自己又修改了许多地方,其中自己修改的一些地方在手机里面显示的效果不是很理想,于是想改成自适应的效果.对CSS3不是特别的熟练,只能去网上找找案 ...

  8. 采用CSS3设计的登录界面，动态效果（动画）

    与上一篇的“采用CSS3设计的登陆界面”的相同,只是样式style添加了CSS3的动画元素. style内容如下: <style> html,body,div{ margin:0; pad ...

  9. 32+激发灵感的HTML5/CSS3网页设计教程

      HTML5是寄托在HTML4基础上取得了的广泛成就.这不仅意味着你不必完全放弃现有的一些标记,而是可以借鉴,以加强 它. CSS3也以同样的方式在互联网内容的安排下,提供了它的柔韧性.CSS3是开 ...

随机推荐

  1. webpack的详细介绍和使用

    // 一个常见的`webpack`配置文件 const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-we ...

  2. 使用github作为maven仓库

    本文介绍的这种使用 github 作为 maven 仓库的思路主要为: github的项目上创建mvn-repo分支,使用mvn-repo分支作为maven仓库 配 置 pom.xml 使用 targ ...

  3. 用字符串对列表赋值，一个字符串对应一个列表元素，eg: my @escaped = "asteriskasterisk hash access unpack_func";

    my @escaped = "asteriskasterisk hash access unpack_func";     # 是一个元素的赋值 25 unless( $escap ...

  4. php使用命名空间时自动加载机制

    命名空间主要为了解决用户编写的代码与PHP内部的类/函数/常量或第三方类/函数/常量之间的名字冲突.不过并不是你定义了使用命名空间的类,就可以在任何地方随意使用了,需要在程序运行时将定义命名空间的类文 ...

  5. [Python3网络爬虫开发实战] 3.1.2-处理异常

    前一节我们了解了请求的发送过程,但是在网络不好的情况下,如果出现了异常,该怎么办呢?这时如果不处理这些异常,程序很可能因报错而终止运行,所以异常处理还是十分有必要的. urllib的error模块定义 ...

  6. js 技巧 （十）广告JS代码效果大全 【3】

    3.[允许关闭]     与前面两个代码不同的是,广告图下方增加了一个图片按纽,允许访客点击关闭广告图片,下面文本框中就是实现效果所需代码: var delta=0.015;     var coll ...

  7. element-UI 多表单重置的时候的坑

    问题细化一下是这样的:比如我有一个用来修改数据的表单,第一条数据是{name: 'Xixi', age: 12},打开表单后就有两个输入框分别填的是Xixi和12,此时我修改Xixi为Haha,调用t ...

  8. Spring 事物注解属性

    @Transactional属性 . propagation 事物的传播属性 . isolation 事物的隔离属性 . readonly 设置只读属性 . timeout 设置超时属性 . roll ...

  9. IDEA常用插件记录

    让我们来记录一下常用的IDEA插件:(从其他博客中取了许多图片,出处见图片水印) 1.JRebel for IntelliJ 热部署神器2.Free MyBatis plugin 实现dao层方法与x ...

  10. HDU 2897 经典巴什博弈

    从n个石子中每次取p~q个,求先手能否获胜 可以先列举一部分数据,然后观察可得总是在p+q中循环,所以只要用n对p+q取模就好了 #include <cstdio> #include &l ...