《基础网页制作》一个超简单的div布局,制作静态网页很简单

DIV界面布局

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Div布局</title>
</head>

<body>
<!-整个div布局大小->
<div style="width:800px">

<!-顶部布局->
<div style="height:100px ; width:600px ; background:#0FC ; float:left">
<p style="text-align:center ; line-height:50px">主要应用于网站首页公告和标签</p>
</div>

<!-右侧状态栏布局->
<div style="height:350px ; width:200px ; background:#FF0 ; float:right">
<P style="text-align:center ; line-height:200px">附加推荐菜单</P>
</div>

<!-左侧布局->
<div style="height:200px ; width:100px ; background:#6C6 ; float:left">
<h3>首页</h3>
<bl>
<li>衣服</li>
<li>裤子</li>
<li>鞋子</li>
<li>头饰</li>
</bl>
</div>

<!-右侧上布局->
<div style="width:500px ; background:#9C0 ; height:100px ;float:left">
<p style="text-align:center ; line-height:50px">第一页面显示板块</p>
</div>

<!-右侧下布局->
<div style="width:500px ; background:#CF0 ; height:100px ;float:left">
<p style="text-align:center ; line-height:50px">第二页面显示板块</p>
</div>

<div style="height:50px ; width:600px ; background:#F90 ; float:left">
<p style=" text-align:center">底部网站信息布局</p>
</div>

</div>
</body>

ifram框架效果

<iframe src="file:///D|/HTML/网页布局/div简单布局1.html" frameborder="0" width="400" height="200"></iframe>

画布绘制


<!-平分线->
<canvas id="oneCanvas" width="200" height="200"
style="border:1px solid #000000;">
</canvas>
<!-圆->
<canvas id="twoCanvas" width="200" height="200"
style="border:1px solid #000000;">
</canvas>

<script>
var c=document.getElementById("oneCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,200);
ctx.stroke();
</script>

<script>
var c=document.getElementById("twoCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,100,40,0,2*Math.PI);
ctx.stroke();
</script>

插入文字


cv.font="20px Arial";
cv.fillText("Hello 我的世界",0,50);

渐变色


//渐变坐标位置
var clg=cv.createLinearGradient(0,0,200,0);
clg.addColorStop(0,"green");
clg.addColorStop(1,"white");
//填充渐变
cv.fillStyle=clg;
cv.fillRect(0,0,200,200);






发布了2 篇原创文章 · 获赞 39 · 访问量 3万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览