用css样式和div画出田字格


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<style>

.header{

width: 200px;

height: 200px;

background: blue;

float: left

}

.main{

width: 200px;

height: 200px;

background: red;

float: left

}

.footer{

width: 200px;

height: 200px;

clear: left;

float: left;

background: green

}

.bootom{

width: 200px;

height: 200px;

float: left;

background: black

}

</style>

<body>

<div class="header"></div>

<div class="main"></div>

<div class="footer"></div>

<div class="bootom"></div>

</body>

</html>

时间: 2024-08-04 16:28:28

用css样式和div画出田字格的相关文章

用css控制一个DIV画图标。

在实际开发中,我们会用到一些小图形,图标.大多数情况下都是用图片来实现的,同时对图片进行处理使图片大小尽可能的缩小.但是图片在怎么处理也是按KB来算的.但是要是用CSS画,只要用很少的空间就能完成同样的效果了,而且还方便后期的维护.我们今天画四个图形,一个三角形,一个直角三角形,两种方法画多边框正方形,同心圆,分享图标. 三角形 首先,我们先画一个三角形 代码如下: 1 <div id="duo1"></div> 对 就是用一个DIV来画. 我们可以把这幅图补脑

用div 画出三角形

画三角形的代码: border-top: 10px solid rgba(0,0,0,0); border-bottom: 10px solid rgba(0,0,0,0); border-right: 10px solid rgba(0,0,0,0); border-left: 10px solid #009d6f; 这段代码也能画出三角形,底色为白色,三角形为绿色的.但这有一个问题,就是虽然设置了边框为透明,但边框还是会遮挡底部的元素,且如果底部元素为红色,你会看到一张白色图片上放着一个绿色

WEB前端面试题 分别使用2个、3个、5个DIV画出一个大的红十字

[html] view plain copy <!DOCTYPE html> <!--两个DIV--> <html> <body> <div style="width:100%;height:200px;margin-top:500px;location:center;border:none;background-color:red;position:absolute"> </div> <div style=

如何查看DIV被设置什么CSS样式

如何查看DIV被设置什么CSS样式呢?可以扩展到了解查看任何HTML标签被设置什么CSS样式.DIVCSS5教大家掌握如何使用谷歌浏览器查找网页中某局部DIV布局结构以及对应设置什么CSS样式. 一.直接观察div标签被设置什么样式   -   TOP 比较简单的布局,我们直接从浏览器上观察效果就能分析一下地方被设置什么样式. 简单直观分析DIV CSS布局用什么样式图 如上图,可以大致分析对应样式有哪些,比如使用背景图片,设置宽度多少.设置CSS高度多少.字体大小.文字靠左.距离左多少. 以上

HTML文件中css样式的引用

1.1.直接在div中使用css样式制作div+css网页 如: <div style="font-size:14px; color:#FF0000;">内容</div> 1.2.html中使用style标签 在html头部head部分内style标签插入css样式代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w

CSS样式四种引入方式

第一种将样式代码写在页面<style>......</style>标签之中,用<style>......</style>标签将body设置一个灰色的背景: <!DOCTYPE html> <html>  <head>   <meta charset="utf-8">   <title></title>   <style>    body{     back

python 中增加css样式的三种方式

增加css样式的三种方式: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <!--head中style是第一处写css样式的地方--> 7 <style> 8 .cl{ 9 /*背景色*/ 10 background-color

利用css样式画各种图形--初步、进阶、高级(一)

转文请注明:穆乙 http://www.cnblogs.com/pigtail/archive/2013/02/17/2914119.html 利用css画图形,是个有利有弊的写法,好处是不用画图,且节省了一些流量,坏处是要写长串的css样式,而且有可能流量并没有减少,用与否视情况而定,个人选择. 下面是我做测试的一些图形,也是参考了一些网站,简单的注解一下和归纳了一下,其中并没涉及到复杂的css画图形. 其中用了css3.0的一些属性,所以这里声明:请用支持css3.0的浏览器看此文章! 正方

如何用css画出三角形

看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及颜色. 如果你将宽度调的足够大,改变不同方向的颜色,你就可以发现盒模型的border是四个梯形一样的线条. 这个时候如果将盒模型内部的height,width调为0px,则三角形就形成了. 1 border:100px solid transparent //边框100px,实线,透明颜色,下面三行