如何快速用css加div做一个简单网页

html-css026

如何快速用css加div做一个简单网页,第1张

1

在桌面建立一个index.htm的文件和main.css的文件,当然你也可以不用main.css的文件,但是为了方便操作,还是建一个吧。只要把记事本另存为就可以了。

2

做好这两个文件后我们把网页的基础代码写上去,并使index文件受到main.css的控制,我们右键选择用记事本打开index文件输入代码,并在head里写上<link href="main.css" type="text/css" rel="stylesheet">使它受到main.css控制

<html>

<head>

<title></title>

</head>

<body>

</body>

</html>

3

下面我们去main.css写一些属性看看是不是能控制index文件。我希望整个页面是粉色的,看上去温馨,我在main.css里写上*{background:#FF66FF}看看。我们打开index文件看看是不是在浏览器上是不是粉色的。在浏览器上是粉色的,表示已经受到css样式表的控制了。

4

下面我们进行布局一般网页都是3层一级,所以我们需要div布局了在body里面写一般我会先分为3层

<html>

<head>

<title></title>

<link href="main.css" type="text/css" rel="stylesheet">

</head>

<body>

<div id="top">

<div id="top1"></div>

<div id="top2"></div>

<div id="top3"></div>

</div>

</body>

</html>

5

布局好后我们需要去定义属性了,这里我只是简单的定义了一下

*{background:#FF33FF}

#top{background:#FFFF99height:1000pxwidth:800pxmargin-left:automargin-right:auto}

#top1{background:#66FFFFheight:50pxwidth:800px}

#top2{background:#FF00CCheight:400pxwidth:800px}

#top3{background:#FF9933height:550pxwidth:800px}

定义好了我们打开预览一下看看,图片是不是居中和分成3块了。当然,颜色只是为了方便看清楚,可以不写。

6

其实做网页就是不断的画框,只要知道布局和定义属性就可以了,下面我们就整个做一下,因为我的有一些是一样的,可以用class调用,class=baidu这个只是随便写的,你爱等于什么就等于什么

<html>

<head>

<title></title>

<link href="main.css" type="text/css" rel="stylesheet">

</head>

<body>

<div id="top">

<div id="top1">这里都是我截图的照片</div>

<div id="top2">

<div class="baidu"></div>

<div class="baidu"></div>

</div>

<div id="top3">

<div class="baidujingyan"></div>

<div class="baidujingyan"></div>

</div>

</div>

</body>

</html>

7

下面我们再去定义他的属性,当然我只是简单的定义一下

*{background:#FF33FF}

#top{background:#FFFF99height:1000pxwidth:800pxmargin-left:automargin-right:auto}

#top1{background:#66FFFFheight:50pxwidth:800pxtext-align:centerline-height:50pxfont-size:30px}

#top2{background:#FF00CCheight:400pxwidth:800px}

#top3{background:#FF9933height:550pxwidth:800px}

.baidu{background:#FF6666height:380pxwidth:380pxfloat:leftmargin:10px}

.baidujingyan{background:#FFCC00height:530pxwidth:380pxfloat:leftmargin:10px}

8

因为我这个是我截图相册的网页,下面我们就放照片吧,这里我偷个懒,把照片都放在桌面了,所以不用连接照片地址了。

<html>

<head>

<title></title>

<link href="main.css" type="text/css" rel="stylesheet">

</head>

<body>

<div id="top">

<div id="top1">这里都是我老婆的照片</div>

<div id="top2">

<div class="baidu"><img src="QQ图片20141212090452.jpg"></div>

<div class="baidu"><img src="QQ图片20141212090346.jpg"></div>

</div>

<div id="top3">

<div class="baidujingyan"><img src="QQ图片20141212090224.jpg"></div>

<div class="baidujingyan"><img src="QQ图片20141212090255.jpg"></div>

</div>

</div>

</body>

</html>

如果图片不在同一层目录,就需要连接到图片地址

9

这样一个网页就做好了,如果需要制作精美的网页,就需要不断的进行div布局和css样式的规定了。

10

下面我来说说网页制作的定义,网页的制作只要会使用div不停的布局,不停的定义他的属性,基本静态的网页就是这样做出来的

建议展开阅读

新人如果想快速开发出响应式网站建议使用响应式框架Bootstrap,Foundation等等......

三个部分[Viewport][网格视图][媒体查询]

1.先在head里面设置Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

用户可以通过平移和缩放来看网页的不同部分。

2.很多响应式都基于网格视图设计

响应式网格视图通常是 12 列,宽度为100%,在网页自动伸缩

比如CSS里面写

* {

    box-sizing: border-box

}

[class*="col-"] {

    float: left

    padding: 15px

}

.col-1 {width: 8.33%}

.col-2 {width: 16.66%}

.col-3 {width: 25%}

.col-4 {width: 33.33%}

.col-5 {width: 41.66%}

.col-6 {width: 50%}

.col-7 {width: 58.33%}

.col-8 {width: 66.66%}

.col-9 {width: 75%}

.col-10 {width: 83.33%}

.col-11 {width: 91.66%}

.col-12 {width: 100%}

这样即可在html写

<div class="row">

<div class="col-3">

<ul>

<li>标题1</li>

<li>标题2</li>

<li>标题3</li>

<li>标题4</li>

</ul>

</div>

<div class="col-9">

<h1>2333333</h1>

<p>2333333333333333333333333333333333333333333333333333333333333333333333333333333333333333</p>

<p>2333333333333333333333333333333333323333333333</p>

</div>

达到简单的响应式效果[拖拽浏览器大小查看]

图片响应式方法

div {

width: 100%

height: 400px

background-image: url('url')

background-repeat: no-repeat

background-size: contain

border: 1px solid red

}

background-size 属性设置为 "contain", 图片比例会自动缩放。

3.媒体查询主要用于针对不同的媒体类型定义不同的样式

比如我在电脑显示图片1,但是在手机显示的是图片2

详细可以私信我

<html>

<head>

<title>CSS简单网页</title>

<style>

#box{width:500pxheight:500pxposition:relativelytop:50%left:50%margin-top:-250pxleft:-250pxbackground:#f00color:#fff}

</style>

</head>

<body>

<div id="box">这是一个简单的水平,垂直居中的盒子</div>

</body>

</html>