您的位置：首页 > Web前端 > CSS

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

2015-12-25 01:59 726 查看

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

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

悬浮窗:

源代码：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>无标题文档</title>
<linkhref="360网页css第二遍.css"rel="stylesheet"type="text/css"/>
</head>

</div>

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

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

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

<divid="右上">
<tableheight="360px"width="760px"cellpadding="10">
<tralign="center">

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

</tr>
<tralign="center">

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

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

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

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

CSS表

@charset"utf-8";
/*CSSDocument*/
<styletype="text/css">
*
{
margin:0px;
padding:0px;
}
body{
background-image:url(360小图标/白灰渐变.png)
}
#搜索栏
{
border:1pxsolid#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:1pxsolid#999;
height:300px;
width:230px;
left:10px;
top:80px;
position:absolute;
}
#左中
{
background-color:#FFF;
border:1pxsolid#999;
height:120px;
width:230px;
left:10px;
top:390px;
position:absolute;
}

#左下
{
background-color:#FFF;
border:1pxsolid#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:1pxsolid#999;
height:360px;
width:760px;
left:250px;
top:80px;
position:absolute;
}
#右下
{
background-color:#FFF;
border:1pxsolid#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:5pxsolid#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>

总结

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航