天涯论坛

 找回密码
 立即注册
搜索
查看: 78|回复: 6

网页设计布局div+css代码实现一(附源文件)

[复制链接]

3089

主题

2万

回帖

9909万

积分

论坛元老

Rank: 8Rank: 8

积分
99098770
发表于 2024-6-30 08:47:57 | 显示全部楼层 |阅读模式

Hi.今天起始第三课,重点说下怎样实现第1课画的网页布局样式。在这儿说下写网页代码和用什么软件关系,常用的软件有Dw、Vs、记事本、Hbuilder、Sublime等,我这边用的是Sublime。在制作前咱们先看下最初的设计稿,如下图:

第1步,确定网页的尺寸,这儿重点说下,网页的尺寸通常设计在1000p-1300px之间。在网页部分的板块能够用1920px做全铺延申效果,然则网页的内容最好是放到1000p-1300px之间。下面咱们就用1200px做为这次的网页效果。

第二步,咱们这新建咱们网页目录,要新建三个文件夹,照片文件夹images,css文件夹css,js文件夹js,这儿大众能够根据自己的需求来定义文件夹。

第三步,实现代码部分,代码在写法上要记得先定义大盒子,而后是小盒子。秉承从上往下的原则完成网页的代码编写过程。

1、在根目录下新建index.html文件,在css文件夹新建style.css。在编辑器打开index.html。完成网页的基本代码,如下:

<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> 这个放内容 </body> </html>

2、在html定义好每一个盒子的命名,并做好注释。代码如下:(这段代码是放到body标签里面。)

<!-- 头部代码起始 --> <div class="header"> <div class="logo"></div> <div class="nav"></div> </div> <!-- banner图代码起始 --> <div class="banner"> </div> <!-- 内容代码起始 --> <div class="content"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> <!-- 底部代码起始 --> <div class="footer"> </div>

3、定义css.css文件,把html里面命名的盒子写上相对应的属性,代码如下

*{ margin: 0; padding: 0; } body{ font-size: 14px; color: #333; font-family: 微软雅黑 } .header{ width: 1200px; margin: 0 auto; height: 50px; border: 1px solid #99CC66 } .logo{ float: left; width: 200px; border: 1px solid #99CC66; height: 50px; } .nav{ float: left; width: 800px; } .banner{ width: 1200px; margin: 10px auto; height: 350px; border: 1px solid #99CC66 } .content{ width: 1200px; margin: 10px auto; height: 450px; border: 1px solid #99CC66 } .content li{ float: left; width: 260px; margin-left: 30px; border: 1px solid #99CC66; list-style: none; height: 200px; margin-top: 20px; bac公斤round-color: #99CC66 } .footer{ width: 1200px; margin: 10px auto; height: 100px; border: 1px solid #99CC66 }

4、此刻咱们看到的效果如下图,是不是和咱们最初的效果同样,下一节课我咱们完成css美化网页及照片和文字内容的填充工作。

最后还有福利,必须源文件的私聊我就能够啦。





上一篇:从0.1初始学习CSS - 0 什么是CSS?
下一篇:运用DIV+CSS做成网页(1)
回复

使用道具 举报

0

主题

1万

回帖

1

积分

新手上路

Rank: 1

积分
1
发表于 2024-8-22 17:17:06 | 显示全部楼层
你的言辞如同繁星闪烁,点亮了我心中的夜空。
回复

使用道具 举报

1

主题

996

回帖

-3

积分

限制会员

积分
-3
发表于 2024-8-25 02:16:32 | 显示全部楼层
我完全同意你的看法,期待我们能深入探讨这个问题。
回复

使用道具 举报

0

主题

1万

回帖

1

积分

新手上路

Rank: 1

积分
1
发表于 2024-8-25 06:35:20 | 显示全部楼层
你的留言真是温暖如春,让我感受到了无尽的支持与鼓励。
回复

使用道具 举报

3069

主题

2万

回帖

9913万

积分

论坛元老

Rank: 8Rank: 8

积分
99138952
发表于 2024-10-20 03:43:51 | 显示全部楼层
在遇到你之前,我对人世间是否有真正的圣人是怀疑的。
回复

使用道具 举报

2945

主题

2万

回帖

9997万

积分

论坛元老

Rank: 8Rank: 8

积分
99979431
发表于 2024-10-21 06:44:34 | 显示全部楼层
这夸赞甜到心里,让我感觉温暖无比。
回复

使用道具 举报

2945

主题

2万

回帖

9997万

积分

论坛元老

Rank: 8Rank: 8

积分
99979431
发表于 19 小时前 | 显示全部楼层
楼主的文章深得我心,表示由衷的感谢!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站点统计|Archiver|手机版|小黑屋|天涯论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-11-22 19:43 , Processed in 0.167098 second(s), 21 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.