以制作360网页为例(只做到了静态网页)

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

悬浮窗:

源代码:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="360网页css第二遍.css" rel="stylesheet" type="text/css" />
</head>


<body>
<div id="搜索栏">
<div id="综合搜索"><img src="360小图标/好搜logo.png"/></div>
<div><input type="text" id="文本框"></div>
<div><input type="button" value="好搜一下" id="按钮" class="font1" /></div>


</div>


<div id="左上"><table height="300px" width="230px" cellpadding="4">
<tr>
<td><a href="http://www.people.com.cn">&nbsp;&nbsp;新闻</font></a><span>•</span><a href="http://www.xinhuanet.com">视频</a></td>
<td><a href="http://www.people.com.cn">电影</a><span>•</span><a href="http://www.xinhuanet.com">电视剧</a></td>
</tr>
<tr >
<td><a href="http://www.people.com.cn">&nbsp;&nbsp;购物</a><span>•</span><a href="http://www.xinhuanet.com">团购</a></td>
<td><a href="http://www.people.com.cn">彩票</a><span>•</span><a href="http://www.xinhuanet.com">理财</a></td>
</tr>
<tr >
<td><a href="http://www.people.com.cn">&nbsp;&nbsp;活期</a><span>•</span><a href="http://www.xinhuanet.com">基金</a></td>
<td><a href="http://www.people.com.cn">小说</a><span>•</span><a href="http://www.xinhuanet.com">海淘</a></td>
</tr>
<tr>
<td><a href="http://www.people.com.cn">&nbsp;&nbsp;游戏</a><span>•</span><a href="http://www.xinhuanet.com">小游戏</a></td>
<td><a href="http://www.people.com.cn">动漫</a><span>•</span><a href="http://www.xinhuanet.com">直播秀</a></td>
</tr>
<tr >
<td><a href="http://www.people.com.cn">&nbsp;&nbsp;搞笑</a><span>•</span><a href="http://www.xinhuanet.com">解梦</a></td>
<td><a href="http://www.people.com.cn">教育</a><span>•</span><a href="http://www.xinhuanet.com">度假</a></td>
</tr>
<tr >
<td><a href="http://www.people.com.cn">&nbsp;&nbsp;查询</a><span>•</span><a href="http://www.xinhuanet.com">星座</a></td>
<td><a href="http://www.people.com.cn">机票</a><span>•</span><a href="http://www.xinhuanet.com">火车票</a></td>
</tr>
<tr >
<td><a href="http://www.people.com.cn">&nbsp;&nbsp;手机</a><span>•</span><a href="http://www.xinhuanet.com">娱乐</a></td>
<td><a href="http://www.people.com.cn">商城</a><span>•</span><a href="http://www.xinhuanet.com">好药</a></td>
</tr>
</table>
</div>




<div id="左中">
<table height="120px" width="230px" cellpadding="0">
<tr><td><img src="360小图标/左中广告.png" height="60px" width="230px"/></td></tr>
<tr><td>子韬杨幂游戏秀恩爱单身狗哭了</td></tr>
<tr><td>装备靠打,玩就知道</td></tr>
</table>
</div>


<div id="左下">
<div id="左下分1">
<table height="30px" width="230px">
<tr><td align="left">猜你爱看</td><td align="right">换一下</td></tr>
</table>
</div>
<div id="左下分2">
<table height="30px" width="230px">
<tr align="center">
<td>头条</td><td>八卦</td><td>正能量</td><td>军事</td>
</tr>
</table>
</div>
<div id="左下图片"><img src="360小图标/左下广告.png" /></div>
<div id="左下分3">
<table height="30px"; width="230px">
<tr><td>工信部称完成提速降费年度目标</td></tr>
</table>
</div>
<div id="左下分4">
<table height="30px"; width="230px">
<tr><td>现金红包免费送 亚洲新楼王</td></tr></table>
</div>
</div>


<div id="右上">
<table height="360px" width="760px" cellpadding="10">
<tr align="center">

<td><a href="http://www.people.com.cn">好搜</a><span>•</span><a href="http://www.xinhuanet.com">360商城</a></td>
<td><a href="http://www.people.com.cn">新浪</a><span>•</span><a href="http://www.xinhuanet.com">微博</a></td>
<td><a href="http://www.people.com.cn">天猫</a><span>•</span><a href="http://www.xinhuanet.com">圣诞狂欢</a></td>
<td><a href="http://www.people.com.cn">搜狐</a><span>•</span><a href="http://www.xinhuanet.com">视频</a></td>
<td><a href="http://www.people.com.cn">网易</a><span>•</span><a href="http://www.xinhuanet.com">邮箱</a></td>
<td><a href="http://www.people.com.cn">凤凰</a><span>•</span><a href="http://www.xinhuanet.com">军事</a></td>
</tr>
<tr align="center">
<td><a href="http://www.people.com.cn">360游戏</a></td>
<td><a href="http://www.people.com.cn">淘宝网</a></td>
<td><a href="http://www.people.com.cn">购物</a><span>•</span><a href="http://www.xinhuanet.com">团购</a></td>
<td><a href="http://www.people.com.cn">百度</a><span>•</span><a href="http://www.xinhuanet.com">热搜</a></td>
<td><a href="http://www.people.com.cn">360</a><span>•</span><a href="http://www.xinhuanet.com">手机卫士</a></td>
<td><a href="http://www.people.com.cn">携程旅游</a></td>

</tr>
<tr align="center">

<td><a href="http://www.people.com.cn">爱淘宝</td>
<td><a href="http://www.people.com.cn">360影视</a></td>
<td><a href="http://www.people.com.cn">聚划算</td>
<td><a href="http://www.people.com.cn">国美在线</a></td>
<td><a href="http://www.people.com.cn">东财</a><span>•</span><a href="http://www.xinhuanet.com">理财</a></td>
<td><a href="http://www.people.com.cn">央视网</a><span>•</span><a href="http://www.xinhuanet.com">直播</a></td>
</tr>
<tr align="center">

<td><a href="http://www.people.com.cn">人民</a><span>•</span><a href="http://www.xinhuanet.com">新华</a></td>
<td><a href="http://www.people.com.cn">人民</a><span>•</span><a href="http://www.xinhuanet.com">新华</a></td>
<td><a href="http://www.people.com.cn">人民</a><span>•</span><a href="http://www.xinhuanet.com">新华</a></td>
<td><a href="http://www.people.com.cn">人民</a><span>•</span><a href="http://www.xinhuanet.com">新华</a></td>
<td><a href="http://www.people.com.cn">人民</a><span>•</span><a href="http://www.xinhuanet.com">新华</a></td>
<td><a href="http://www.people.com.cn">人民</a><span>•</span><a href="http://www.xinhuanet.com">新华</a></td>
</tr>
<tr align="center">
<td><a href="http://www.autohome.com.cn">汽车之家</a></td>
<td><a href="http://zibo.bitauto.com">易 车 网</a></td>
<td><a href="http://www.pcauto.com.cn">太平洋汽车</a></td>
<td><a href="http://www.anjuke.com">安 居 客</a></td>
<td><a href="http://out.zhe800.com">折800</a></td>
<td><a href="http://www.suning.com"><font color="#00CC33">苏宁易购</a></td>
</tr>
<tr align="center">
<td><a href="http://www.12306.cn">12306官网</a></td>
<td><a href="http://www.people.com.cn">人民</a><span>•</span><a href="http://www.xinhuanet.com">新华</a></td>
<td><a href="http://www.ganji.com">赶 集 网</a></td>
<td><a href="http://union.dangdang.com">当 当 网</a></td>
<td><img src="360小图标/途牛.jpg" width="15" /><a href="http://www.tuniu.com">途牛旅游网</a></td>
<td><a href="http://www.baidu.com"><font color="#00CC33"><i><b>1号店</b></i></a>&nbsp;<a href="http://www.baidu.com"><img src="360小图标/抢福袋.jpg" width="40"/></a></td>
</tr>
<tr align="center">
<td><a href="http://www.zhenai.com">真爱婚恋网</a></td>
<td><a href="http://www.moonbasa.com">梦 芭 莎</a></td>
<td><a href="http://www.baidu.com">亚 马 逊</a></td>
<td><a href="http://www.baidu.com">艺 龙 网</a></td>
<td><a href="http://www.baidu.com">去哪儿网</a></td>
<td><a href="http://www.baidu.com">美 丽 说</a></td>
</tr>
<tr align="center" >
<td><a href="http://www.baidu.com">美 团 网</a></td>
<td><a href="http://www.baidu.com">乐视视频</a></td>
<td><img src="360小图标/唯品会.jpg" width="15"/><a href="http://www.baidu.com">唯 品 会</a></td>
<td><a href="http://www.baidu.com"><font color="#CC6600">聚美优品</a></td>
<td><a href="http://www.baidu.com">搜 房 网</a></td>
<td><a href="http://www.baidu.com">蘑 菇 街</a></td>
</tr>
<tr align="center">
<td><a href="http://www.baidu.com">猎 聘 网</a></td>
<td><a href="http://www.baidu.com">1 药 网</a></td>
<td><a href="http://www.baidu.com">陆金所理财</a></td>
<td><a href="http://www.baidu.com">六 间 房</a></td>
<td><a href="http://www.baidu.com">携程机票</a></td>
<td><a href="http://www.baidu.com">12306·抢票</a></td>
</tr>
</table>


</div>
<div id="右下">
<div id="右下1"></div>
<table>
<tr><td align="left">猜你喜欢</td></tr>
</table>
<div id="右下2">
<table height="240px" width="760px" cellpadding="2">
<tr align="center"><td>游戏</td><td>永久免费游戏</td><td>全部装备靠打</td><td>非人民币玩家</td><td>传奇公益服</td><td>2015新版传奇</td><td>传奇单机版</td></tr>
<tr align="center"><td>财经</td><td>金钱</td><td>信用卡</td><td>软件</td><td>p2p</td><td>理财</td><td>赚钱</td></tr>
<tr align="center"><td>汽车</td><td>买车</td><td>低价</td><td>品牌</td><td>舒适</td><td>二手车</td><td>违章</td></tr>
<tr align="center"><td>生活</td><td>理财</td><td>信用卡</td><td>低价</td><td>信贷</td><td>物流</td><td>赚钱</td></tr>
<tr align="center"><td>购物</td><td>食品</td><td>酒水</td><td>递减</td><td>清仓</td><td>苏宁</td><td>京东</td></tr>
<tr align="center"><td>旅游</td><td>途牛</td><td>去哪</td><td>携程</td><td>驴妈妈</td><td>机票</td><td>火车</td></tr>
</table>
</div>


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

 

CSS表


@charset "utf-8";
/* CSS Document */
<style type="text/css">
*
{
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>

 

总结

CSS样式表——布局练习(制作360网页)的更多相关文章

  1. HTML——CSS样式表&布局页面

    CSS样式表: 一.作用:美化网页,页面布局. 二.分类: 内联,写在body里标签style=""里面的样式,优点是控制精确,可重用性差. 内嵌,嵌在网页的head里面,可重用性 ...

  2. css样式表:样式分类,选择器。样式属性,格式与布局

    样式表分类: 1.内联样式表, 和html联合显示,例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独 ...

  3. 网页 CSS样式表

    昨天,我主要是对CSS样式表进行了一下复习. CSS样式表主要有三类:内联样式表.内嵌样式表.外部样式表,我们平时一般使用第二种样式表. 选择器主要包括:标签选择器.class选择器.ID选择器.复合 ...

  4. HTML静态网页 css样式表

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/    此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...

  5. 在网页中插入CSS样式表的几种方法

    1. 链入外部样式表 链入外部样式表是把样式表保存为一个样式表文件,然后在页面中用<link>标记链接到这个样式表文件,这个<link>标记必须放到页面的<head> ...

  6. HTML静态网页(css样式表)

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/    此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...

  7. 2016/2/19 css样式表 Cascading Style Sheet 叠层样式表 美化HTML网页

    一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联 ...

  8. WEB入门 四 CSS样式表深入

    学习内容 Ø        CSS选择器深入学习 Ø        CSS继承 Ø        CSS文本效果 Ø        CSS图片效果 能力目标 Ø        掌握CSS选择器的组合声 ...

  9. WEB入门三 CSS样式表基础

    学习内容 Ø        CSS的基本语法 Ø        CSS选择器 Ø        常见的CSS样式 Ø        网页中3种使用CSS的方式 能力目标 Ø        理解CSS的 ...

随机推荐

  1. iOS AppIcon尺寸和上传ITunes构建版本尺寸和iPhone屏幕尺寸

    避免忘记. 记录一下 App Icon: 29X2940X4058X5876X7687X8780X80120X120152X152167X167180X180 ITunes构建版本: 1242 x 2 ...

  2. 老毛桃pe装机工具一键还原系统

    系统崩溃后,很多菜鸟朋友会六神无主,不知接下来怎么办.如果是老手,已经屡见不鲜了,因为只需一键还原系统就可以恢复到原来的工作状态.下面不妨跟小编一起继续看看怎么一键还原系统.  ①制作一个老毛桃win ...

  3. 面向对象程序设计(OOP设计模式)-结构型模式之装饰器模式的应用与实现

    课程名称:程序设计方法学 实验4:OOP设计模式-结构型模式的应用与实现 时间:2015年11月18日星期三,第3.4节 地点:理1#208 一.实验目的 加深对结构型设计模式的理解以及在开发中的实际 ...

  4. 超酷的Android 侧滑(双向滑动菜单)效果

    下面看看我们如何使用它,达到我们想要的效果 public class MainActivity extends Activity { /** * 双向滑动菜单布局 */ private SliderM ...

  5. java MessageFormat.format

    sql 语句中格式化,如果加入{}占位符,要替代的是整形变量,而恰好这个整形变量的位数超过4位, MessageFormat.format 会在这个整形变量中默认每隔三位加一个逗号,类似这样:1000 ...

  6. 程序猿修仙之路--数据结构之你是否真的懂数组? c#socket TCP同步网络通信 用lambda表达式树替代反射 ASP.NET MVC如何做一个简单的非法登录拦截

    程序猿修仙之路--数据结构之你是否真的懂数组?   数据结构 但凡IT江湖侠士,算法与数据结构为必修之课.早有前辈已经明确指出:程序=算法+数据结构  .要想在之后的江湖历练中通关,数据结构必不可少. ...

  7. server2012 配置SSL证书

    导入SSL证书: 开始 -〉运行 -〉MMC,启动控制台程序 -> 选择菜单“文件 -〉添加/删除管理单元”->列表中选择“证书”->点击“添加”-> 选择“计算机帐户” -& ...

  8. Spark1.4.1 编译与安装

    1.下载下载地址:http://spark.apache.org/downloads.html 选择下载源码 2.源码编译1)解压tar -zxvf spark-1.4.1.tgz2.编译spark有 ...

  9. Centos编译Hadoop 2.x 源码

    1. 前言 Hadoop-2.4.0的源码目录下有个BUILDING.txt文件,它介绍了如何在Linux和Windows下编译源代码,本文基本是遵照BUILDING.txt指示来操作的,这里再做一下 ...

  10. 《Effective Java》读书笔记四(泛型)

    Java1.5发行版本中增加了泛型(Generic).在没有泛型之前,从集合中读取到的每一个对象都必须进行转换.如果有人不小心插入了错误的类型对象,在运行时的转换处理就会出错.有了泛型之后,可以告诉编 ...