CSS样式表——布局练习（制作360网页）-白红宇

CSS样式表——布局练习（制作360网页）

阅读量：6203 次

发布时间：2019-06-21

本文共 10281 字，大约阅读时间需要 34 分钟。

以制作360网页为例（只做到了静态网页）

提纲：1.总共分为7部分

悬浮窗:

源代码：

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

<head>

<title>无标题文档</title>

</head>

<body>

</div>

<tr>

</tr>

<tr >

</tr>

<tr >

</tr>

<tr>

</tr>

<tr >

</tr>

<tr >

</tr>

<tr >

</tr>

</table>

</div>

<tr><td>子韬杨幂游戏秀恩爱单身狗哭了</td></tr>

</table>

</div>

</table>

</div>

</tr>

</table>

</div>

<tr><td>工信部称完成提速降费年度目标</td></tr>

</table>

</div>

<tr><td>现金红包免费送亚洲新楼王</td></tr></table>

</div>

</tr>

</tr>

</tr>

</tr>

<td><a href="http://www.pcauto.com.cn">太平洋汽车</a></td>

</tr>

<td><img src="360小图标/途牛.jpg" width="15" /><a href="http://www.tuniu.com">途牛旅游网</a></td>

</tr>

<td><a href="http://www.zhenai.com">真爱婚恋网</a></td>

</tr>

</tr>

<td><a href="http://www.baidu.com">陆金所理财</a></td>

</tr>

</table>

</div>

<table>

</table>

<tr align="center"><td>游戏</td><td>永久免费游戏</td><td>全部装备靠打</td><td>非人民币玩家</td><td>传奇公益服</td><td>2015新版传奇</td><td>传奇单机版</td></tr>

</table>

</div>

<div id="悬浮窗">这是一个广告</div>

</body>

</html>

CSS表

@charset "utf-8";

/* CSS Document */

{

margin:0px;

padding:0px;

}

body{

background-image:url(360小图标/白灰渐变.png)

}

#搜索栏

{

border:1px solid #999;

height:60px;

width:1000px;

position:absolute;

}

#综合搜索

{

width:100;

height:60px;

left:200px;

top:10px;

position:absolute;

}

#文本框/*难点一：修改文本框高和宽*/

{

width:400px;

height:40px;

top:8px;

left:320px;

position:absolute;

}

#按钮/*难点二：修改按钮高和宽，也可以直接在style里面改*/

{

width:100px;

height:40px;

top:10px;

left:730px;

position:absolute;}

.font1/*难点三：修改按钮里面的字体——用class引用*/

{

font-family:"宋体";

font-size:15px;}

#左上

{

background-color:#FFF;

border:1px solid #999;

height:300px;

width:230px;

left:10px;

top:80px;

position:absolute;

}

#左中

{

background-color:#FFF;

border:1px solid #999;

height:120px;

width:230px;

left:10px;

top:390px;

position:absolute;

}

#左下

{

background-color:#FFF;

border:1px solid #999;

height:240px;

width:230px;

left:10px;

top:520px;

position:absolute;

}

#左下分1

{

height:30px;

width:230px;

left:0px;

position:absolute;

}

#左下分2

{

height:30px;

width:230px;

left:0px;

top:30px;

position:absolute;

}

#左下图片

{

height:120px;

width:230px;

top:60px;

left:10px;

position:absolute;

}

#左下分3

{

height:30px;

width:230px;

left:0px;

top:180px;

position:absolute;

}

#左下分4

{

height:30px;

width:230px;

left:0px;

top:210px;

position:absolute;

}

#右上

{

background-color:#FFF;

border:1px solid #999;

height:360px;

width:760px;

left:250px;

top:80px;

position:absolute;

}

#右下

{

background-color:#FFF;

border:1px solid #999;

height:280px;

width:760px;

left:250px;

top:450px;

position:absolute;

}

#右下1

{

height:40px;

width:760px;

left:250px;

top:0px;

position:absolute;}

#右下2

{

height:240px;

width:760px;

left:0px;

top:40px;

position:absolute;}

#悬浮窗

{

border:5px solid #999;

width:150px;

height:80px;

margin:10px;

background-color:#666;

right:30px;

bottom:20px;

position:fixed;

}

a:link

{

color:#000;

text-decoration:none;}/*下划线*/

a:visited

{

color:#000;

text-decoration:none}

a:hover

{

color:#F00;

text-decoration:underline;}

a:active

{

color:#F60;

text-decoration:underline;}

</style>

总结

转载地址：http://fwqca.baihongyu.com/

你可能感兴趣的文章

数论概论(Joseph H.Silverman) 定理39.1 连分数的递归公式

查看>>

Extjs表单输入框异步校验的插件实现

查看>>

Query on a tree——树链剖分整理

查看>>

博客园作业4--数组

查看>>

马凯军201771010116《面向对象程序设计（java）》第四周学习总结

查看>>

[NOI2004]郁闷的出纳员

查看>>

安装mysql-connector-python

查看>>

【C语言】15-预处理指令1-宏定义

查看>>

火鸡堂对基于云的胜利冲锋队为了交项目干杯的 Beta 产品测试报告

查看>>

DataTable.ImportRow()与DataTable.Rows.Add()的区别

The Master of Science degree in Computer Scienc

查看>>

使用Docker镜像

查看>>

Web前端学习第十四天·fighting_JavaScript概述

查看>>

创建wifi热点---让手机共享笔记本网络