7.浮动布局实战&网站结构制作实战

最新推荐文章于 2022-08-09 10:40:39 发布

无足舞者

最新推荐文章于 2022-08-09 10:40:39 发布

阅读量343

点赞数 1

分类专栏：前端工程师【基础篇】文章标签：浮动实例网站结构制作实例布局布局实战 CSS DIV

本文链接：https://blog.csdn.net/u010567918/article/details/79240332

版权

前端工程师【基础篇】专栏收录该内容

14 篇文章 0 订阅

订阅专栏

实战一

题目

1. 要求将下图变成一个网页

答

1. 第一步：分析主体结构

2. 第二步：编写结构代码

a) 将”第一步”的分析转变为代码，如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

<dl>

<dd>主演：姚晨孙红雷</dd>

</dl>

</div>

<li><a href="#">海清张嘉译演绎房奴生活《蜗居》</a></li>

<li>

<a href="#">琼瑶经典言情剧集锦</a>

<a href="#">梦露电影知多少</a>

</li>

</ul>

</div>

<li>

<strong>将爱情进行到底</strong>

</a>

</li>

<li>

</a>

</li>

</ul>

</div>

</body>

</html>

3. 第三步：样式重置

a) 对页面中用到的结构标签有默认样式的进行重置。

b) 在上面“第二步”的基础上，在“head”标签中添加样式代码

i. 添加前：

<head>

</head>

ii. 添加后：

<head>

<style>

body,dl,dd{margin:0;}

ul{list-style:none;margin:0;padding:0;}

a{text-decoration:none;color:#4f6c84;}

img{border:0;vertical-align:top;}

</style>

</head>

4. 第四步：结合PS一边测量（颜色值、行高、内外边距）、切图，一边写代码。

<!DOCTYPE html>

<html>

<head>

<style>

/* 重置样式 */

body,dl,dd{margin:0;}

ul{list-style:none;margin:0;padding:0;}

a{text-decoration:none;color:#4f6c84;}

img{border:0;vertical-align:top;}

/* 页面布局 */

.wrap{width:445px;margin:30px auto;padding:12px 8px 0 7px;

background:url(img/bg.gif) no-repeat 220px 0;}

.clear{zoom:1;} /* 清浮动IE6 */

.clear:after{content:"";display:block;clear:both;}/* 清浮动标准浏览器 */

.left{width:213px;float:left;}

.leftTop .pic{width:124px;padding-right:5px;float:left;

background:url(img/picBg.gif) no-repeat right 0;}

.leftTop .pic a{border:1px solid #c3cfd9;padding:3px;display:block;}

.leftTop dl{width:60px;padding-left:5px;font-size:12px;

line-height:20pz;color:#7190a6;float:left;}

.leftBottom{padding-top:10px;}

.leftBottom li{font-size:12px;line-height:20px;padding-left:10px;

background:url(img/liBg.gif) no-repeat 0 7px;}

.right{220px;float:right;}

.right li{padding-left:10px;width:100px;float:left;}

.right a{display:block;}

.right img{border:1px solid #c3cfd9;padding:3px;}

.right strong{display:block;padding-top:3px;

font:normal 12px/24px "宋体";text-align:center;}

</style>

</head>

<body>

</a>

</div>

<dl>

<dd>主演:姚晨孙红雷</dd>

</dl>

</div>

<li>

<a>海清张嘉译演绎房奴生活《蜗居》</a>

</li>

<li>

<a href="#">琼瑶经典言情剧集锦</a>

<a href="#">梦露电影知多少</a>

</li>

</ul>

</div>

<li>

<strong>将爱情进行到底</strong>

</li>

<li>

<strong>将爱情进行到底</strong>

</li>

</ul>

</div>

</body>

</html>

5. 开发过程中用PS切图获得的素材

a) pic.gif

b) bg.gif

c) liBg.gif

d) pic2.gif

e) picBg.gif

6. 效果

a) 标准浏览器

b) IE6/IE7

7. 小结

a) 将上面“第四步”中代码复制到一个空的html文件中，在此html文件同级文件夹下新建“img”文件夹，然后将上面“5”中的5张PS切图右键另存到“img”文件夹下，最后浏览器打开html页面即可看到完整的实战一效果。

小插曲——嵌套原则

1. 演示1

a) 代码

<!DOCTYPE html>

<html>

<head>

<style>

p{width:100px;height:100px;background:red;}

</style>

</head>

<body>

<p>

<div></div>

</p>

</body>

</html>

b) 效果

c) 小结

i. P元素中不能包含块元素，如果包含了则会被分割成两块。

2. 演示2

a) 代码

<!DOCTYPE html>

<html>

<head>

<style>

p{width:100px;height:100px;background:red;}

span{display:block;}

</style>

</head>

<body>

<p>

</p>

</body>

</html>

b) 效果

c) 总结

i. 块元素与我们将一个内嵌元素转为一个块元素在浏览器解析上还是有区别的，当然在我们写样式做布局时是没区别的。

实战二

题目

1. 要求将下图变成一个网页

答

1. 第一步：分析主体结构

2. 最后一步：完整代码（省去了像“实战一”中的中间过程如：编写结构、重置样式……）

<!DOCTYPE html>

<html>

<head>

<style>

body,h2,h3,p{margin:0;font-family:"宋体";}

ul{list-style:none;margin:0;padding:0;}

img{border:none;}

a{text-decoration:none;}

.wrap{width:366px;background:#f4fafb;margin:30px auto;}

.head{height:23px;background:url(img/headBg.gif) no-repeat;}

.title{background:url(img/titleBg.gif) no-repeat 6px 4px;

line-height:22px;font-size:12px;color:#294852;padding-left:30px;

}

.list{padding:0 7px 2px 5px;}

/* li本身不浮动，内容浮动，则清浮动 , 这里偷懒用overflow:hidden和zoom来清浮动，

并且使用vertical-align:top 来去除IE6下li之间的几像素的间隙bug */

.list li{overflow:hidden;zoom:1;vertical-align:top;padding:13px 0 9px 0;}

.list .pic{width:95px;height:60px;float:left;

border:1px solid #c8c4d3;padding:2px;background:#FFF;}

.list .text{width:240px;float:right;}

.list h3{line-height:24px;font-size:12px;}

.list h3 a{color:#333;}

.list p{line-height:20px;font-size:12px;color:#666;}

.list p a{color:#666;}

</style>

</head>

<body>

<h2 class="title">外媒评论精选</h2>

</div>

<li>

</a>

<h3><a href="#">《加勒比海盗4》-- 商业味浓郁</a></h3>

<p>本集《加勒比海盗》讲述了杰克船长受英王所托寻找不老泉，与他...[<a href="#">详细</a>]</p>

</div>

</li>

<li>

</a>

<h3><a href="#">《加勒比海盗4》-- 商业味浓郁</a></h3>

<p>本集《加勒比海盗》讲述了杰克船长受英王所托寻找不老泉，与他...[<a href="#">详细</a>]</p>

</div>

</li>

<li>

</a>

<h3><a href="#">《加勒比海盗4》-- 商业味浓郁</a></h3>

<p>本集《加勒比海盗》讲述了杰克船长受英王所托寻找不老泉，与他...[<a href="#">详细</a>]</p>

</div>

</li>

</ul>

</div>

</body>

</html>

3. 效果

a) 标准浏览器

b) IE6

4. 开发过程中用PS切图获得的素材

a) headBg.gif

b) titleBg.gif

c) pic.gif

5. 总结

a) 将上面“最后一步”中代码复制到一个空的html文件中，在此html文件同级文件夹下新建“img”文件夹，然后将上面“4”中的3张PS切图右键另存到“img”文件夹下，最后浏览器打开html页面即可看到完整的实战一效果。

实战三

题目

1. 将下图变成一个网页

答

1. 第一步：分析主体结构

2. 最后一步：完整代码（省去了像“实战一”中的中间过程如：编写结构、重置样式……）

<!DOCTYPE html>

<html>

<head>

<style>

body,h2{margin:0;font-family:"宋体";}

ul{margin:0;padding:0;list-style:none;}

a{text-decoration:none ;color:#333;}

img{border:none;vertical-align:top;}

.clear{zoom:1;}

.clear:after{content:"";display:block ;clear:both;}

.wrap{width:376px;margin:30px auto;padding-top:11px;background:#f4fafb;}

.head{height:25px;background:url(img/headBg.gif) no-repeat;}

.title{line-height:24px;padding-top:1px;font-size:12px;color:#294852;

/* text-indent 距离左边距离,上面两个案例中用的是padding-left,都可以 */

text-indent:33px; background:url(img/titleBg.gif) no-repeat 9px 6px;}

.picList{padding-top:16px;}

.picList li{width:91px;padding-right:17px;margin:0 8px;float:left;

display:inline;background:url(img/liBg.gif) no-repeat right 17px;}

.picList a{display:block;}

.picList img{border:1px solid #c8c5c5;padding:2px;background:#fff;}

.picList strong{display:block;text-align:center;padding-top:4px;

font:normal 12px/22px "宋体";}

.textList{padding:0 27px;line-height:22px;font-size:12px;}

.textList li{background:url(img/textListBg.gif) no-repeat 0 10px;

text-indent:14px;}

</style>

</head>

<body>

</div>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

<li>

<a href="#">化妆，还是伪装？港三区美亚版《最强喜事》</a>

</li>

<li>

<a href="#">化妆，还是伪装？港三区美亚版《最强喜事》</a>

</li>

<li>

<a href="#">化妆，还是伪装？港三区美亚版《最强喜事》</a>

</li>

</ul>

</div>

</body>

</html>

3. 效果

a) 标准浏览器

b) IE6

4. 开发过程中用PS切图获得的素材

a) headBg.gif

b) titleBg.gif

c) pic.gif

d) liBg.gif

e) textListBg.gif

5. 总结

a) 将上面“最后一步”中代码复制到一个空的html文件中，在此html文件同级文件夹下新建“img”文件夹，然后将上面“4”中的5张PS切图右键另存到“img”文件夹下，最后浏览器打开html页面即可看到完整的实战一效果。

无足舞者

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
7.浮动布局实战&网站结构制作实战

实战一题目1. 要求将下图变成一个网页答1. 第一步：分析主体结构 2. 第二步：编写结构代码 a) 将”第一步”的分析转变为代码，如下：实战一 wrap"> left"> leftTop">
复制链接

扫一扫