初步设计网页

最新推荐文章于 2024-07-16 16:43:05 发布

chujulu7854

最新推荐文章于 2024-07-16 16:43:05 发布

阅读量179

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/4090401/blog/3020980

版权

一.首先进行网页的整体布局分析设计

补：先对网页有一个大体的设计，然后在接下来的时间对其进行完善。

1.先设计好box这一整体，在其内分为banner,menu,main（left,right）,footer这4部分。

2. div标签：

Html的标签，成对出现<div></div>

<div>定义页面上的一块区域，对整个页面划分区域用

常用的有id和class属性：<div id=“menu”></div>

3.在css中，通过各自的id设置其属性，设置各个部分的属性值：

Css样式：

引用方式-外链式：<link href="style.css" rel="stylesheet" type="text/css" />

css样式写法：选择器{ 属性1:属性1的值;… }

选择器分为：id选择器（#id）、class选择器（.class）、标签选择器（div）

二.Banner的实现
图片标签<img>：

<img>标签属于单标签：<img />

<img>标签有两个必要的属性：

src属性：图像文件的路径

alt属性：图片说明。当图片找不到不能显示时，会显示这个文字内容

例如：

1.源代码实现：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

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

</head>

<body>
<div id="box">
<div id="banner">
<img src="images/bg.jpg" alt="我的图片不见了" /> 

</div>
<div id="menu">
我是菜单
</div>
<div id="main">

<div id="left">
左边区域
</div>
<div id="right">
右边区域
</div>

</div>
<div id="footer">
footer
</div>

</div>

</body>
</html>

2.css代码：

@charset "utf-8";
/* CSS Document */
#box{
background-color:#F00;
   width:1024px;
   height:1300px;
   margin:0 auto;/*居中*/
   margin:0,200px,0,200px;/*上右下左*/
}

/*放图片，设置的高度和图片一样高*/
#banner{
   background-color:#66F;
   height:209px;

}

#menu{
background-color:#C3F;
height:50px;
}

#main{
   background-color:#6F0;
   height:1000px;
}
#left{
background-color:#33C;
   height:1000px;
   width:250px;
   float:left;/*可以使div横向排排坐*/
}
#right{
   background-color:#F3F;
   height:1000px;
   width:774px;
   float:right;/*可以使div横向排排坐*/
}
#footer{
   background-color:#F63;
   height:80px;
}

转载于:https://my.oschina.net/u/4090401/blog/3020980

chujulu7854

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初步设计网页

一.首先进行网页的整体布局分析设计补：先对网页有一个大体的设计，然后在接下来的时间对其进行完善。 1.先设计好box这一整体，在其内分为banner,menu,main（left,right）,footer这4部分。 2.div标签： ...
复制链接

扫一扫

初步设计网页

“相关推荐”对你有帮助么？