码迷,mamicode.com
首页 > Web开发 > 详细

HTML&&css练习

时间:2015-12-24 23:28:56      阅读:470      评论:0      收藏:0      [点我收藏+]

标签:

技术分享
<!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="Untitled-2.css" rel="stylesheet" type="text/css" />
</head>

<body background="未标题-1.png">

<div id="a1">
<tr>
<td ><img src="QQ截图247.png" id="a11"></td>
<td ><input type="text"/ id="a12"></td>
<td><form action="http://www.baidu.com/"><input type="submit" value="好搜一下"S  id="a13"  /></form></td>
</tr></div>
<div id="a2">
<table width="240" height="240">
<tr align="center">
<td><a href="http://www.zhenai.com/">新闻</a>&nbsp;&nbsp;<a href="http://www.zhenai.com/">视频</a></td>
<td><a href="http://www.zhenai.com/">电影</a>&nbsp;&nbsp;<a href="http://www.zhenai.com/">电视剧</a></td>
</tr>
<tr align="center">
<td><a href="http://www.zhenai.com/">购物</a>&nbsp;&nbsp;<a href="http://www.zhenai.com/">团购</a></td>
<td><a href="http://www.zhenai.com/">彩票</a>&nbsp;&nbsp;<a href="http://www.zhenai.com/">理财</a></td>
</tr>
<tr align="center">
<td><a href="http://www.zhenai.com/">活期</a>&nbsp;&nbsp;<a href="http://www.zhenai.com/">基金</a></td>
<td><a href="http://www.zhenai.com/">小说</a>&nbsp;&nbsp;<a href="http://www.zhenai.com/">海淘</a></td>
</tr>
<tr align="center">
<td><a href="http://www.zhenai.com/">游戏</a>&nbsp;&nbsp;<a href="http://www.zhenai.com/">小游戏</a></td>
<td><a href="http://www.zhenai.com/">动漫</a>&nbsp;&nbsp;<a href="http://www.zhenai.com/">直播秀</a></td>
</tr>
<tr align="center">
<td><a href="http://www.zhenai.com/">搞笑</a>&nbsp;&nbsp;<a href="http://www.zhenai.com/">解梦</a></td>
<td><a href="http://www.zhenai.com/">教育</a>&nbsp;&nbsp;<a href="http://www.zhenai.com/">度假</a></td>
</tr>
<tr align="center">
<td><a href="http://www.zhenai.com/">查询</a>&nbsp;&nbsp;<a href="http://www.zhenai.com/">星座</a></td>
<td><a href="http://www.zhenai.com/">机票</a><a href="http://www.zhenai.com/">火车票</a></td>
</tr>
<tr align="center">
<td><a href="http://www.zhenai.com/">手机</a>&nbsp;&nbsp;<a href="http://www.zhenai.com/">娱乐</a></td>
<td><a href="http://www.zhenai.com/">商城</a>&nbsp;&nbsp;<a href="http://www.zhenai.com/">好药</a></td>
</tr>

</table>
</div>
<div id="a3">
<table width="750" height="280">
<tr align="center">
<td><a href="http://www.zhenai.com/">好搜</a><a href="http://www.zhenai.com/">360商城</a></td>
<td><a href="http://www.zhenai.com/">新浪</a><a href="http://www.zhenai.com/">微博</a></td>
<td><a href="http://www.zhenai.com/">天猫</a><a href="http://www.zhenai.com/">圣诞狂欢</a></td>
<td><a href="http://www.zhenai.com/">搜狐</a><a href="http://www.zhenai.com/">视频</a></td>
<td><a href="http://www.zhenai.com/">网易</a><a href="http://www.zhenai.com/">邮箱</a></td>
<td><a href="http://www.zhenai.com/">凤凰</a><a href="http://www.zhenai.com/">军事</a></td>
</tr>
<tr align="center">
<td><a href="http://www.zhenai.com/">360游戏</a></td>
<td><a href="http://www.zhenai.com/">&nbsp;&nbsp;</a></td>
<td><a href="http://www.zhenai.com/">购物</a><a href="http://www.zhenai.com/">团购</a></td>
<td><a href="http://www.zhenai.com/">百度</a><a href="http://www.zhenai.com/">热搜</a></td>
<td><a href="http://www.zhenai.com/">360</a><a href="http://www.zhenai.com/">手机卫士</a></td>
<td><a href="http://www.zhenai.com/">携程旅游</a></td>
</tr>
<tr align="center">
<td><a href="http://www.zhenai.com/">&nbsp;&nbsp;</a></td>
<td><a href="http://www.zhenai.com/">360影视</a></td>
<td><a href="http://www.zhenai.com/">&nbsp;&nbsp;</a></td>
<td><a href="http://www.zhenai.com/">国美在线</a></td>
<td><a href="http://www.zhenai.com/">东财</a><a href="http://www.zhenai.com/">理财</a></td>
<td><a href="http://www.zhenai.com/">央视</a>网•<a href="http://www.zhenai.com/">直播</a></td>
</tr>
<tr align="center">
<td><a href="http://www.zhenai.com/">京东商城</a></td>
<td><a href="http://www.zhenai.com/">58&nbsp;&nbsp;</a></td>
<td><a href="http://www.zhenai.com/">太平洋电脑</a></td>
<td><a href="http://www.zhenai.com/">世纪佳缘</a></td>
<td><a href="http://www.zhenai.com/">同程旅游</a></td>
<td><a href="http://www.zhenai.com/">中关村在线</a></td>
</tr>
<tr>
<td colspan="6"><hr />
</td>
</tr>


<tr align="center">
<td><a href="http://www.autohome.com.cn/?pvareaid=100519">汽车之家</a></td>
<td><a href="http://www.bitauto.com/?WT.mc_id=360mz">易车网</a></td>
<td><a href="http://www.pcauto.com.cn/?ad=3958">太平洋汽车</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="#00FF00">苏宁易购</a></td>
</tr>
<tr align="center">
<td><a href="http://www.4399.com/">4399小游戏</a></td>
<td><a href="http://www.people.com.cn/">人民</a>&nbsp;&nbsp;<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="125.png" width="15"/>&nbsp;<a href="http://www.tuniu.com/">途牛旅游网</a></td>
<td><a href="http://www.yhd.com/"><font color="#00FF00"><b><i>一号店</i></b></a>&nbsp;<a href="http://cms.yhd.com"><font color="#FFFF00" size="-1"><b><i>抢福袋</i></b></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.amazon.cn/">亚马逊</a></td>
<td><a href="http://www.elong.com/">艺龙网</a></td>
<td><a href="http://www.qunar.com/">去哪儿网</a></td>
<td><a href="http://www.meilishuo.com/">美丽说</a></td>
</tr>
<tr align="center">
<td><a href="http://www.meituan.com/">美团网</a></td>
<td><a href="http://www.letv.com/">乐视视频</a></td>
<td><img src="124.png" width="15" />&nbsp;<a href="http://n.vip.com/">唯品会</a></td>
<td><a href="http://www.jumei.com/"><font color="#FFFF00">聚美优品</a></td>
<td><a href="http://www.fang.com/">搜房网</a></td>
<td><a href="http://www.mogujie.com/">蘑菇街</a></td>
</tr>
<tr align="center">
<td><a href="http://www.liepin.com/">猎聘网</a></td>
<td><a href="http://www.111.com.cn/">1药网</a></td>
<td><a href="http://t.lu.com/">陆金所理财</a></td>
<td><a href="http://www.6.cn/?src=z9weij928">六房间</a></td>
<td><a href="http://u.ctrip.com/">携程机票</a></td>
<td><a href="http://www.12306.cn/">12306</a>&nbsp;&nbsp;<a href="http://12306.360.cn/">抢票</a></td>
</tr></table>
</div>
<div id="a4">
<table width="240" height="120">
<tr>
<td rowspan="2"><a href="http//www.baidu.com/"><img src="QQ截图20sssss9.png" /></a></td>
</tr>
<tr></tr>
<tr>
<td><a href="http://www.baidu.com/">&nbsp;&nbsp;一切装备靠打&nbsp;非人民币玩家进</a></td>
</tr>
<tr>
<td><a href="http://www.baidu.com/">&nbsp;&nbsp;2015年新版传奇公测&nbsp;散人天堂</a></td>
</tr>
</table>
</div>
<div id="a5">
<table width="750" height="240" >
<tr>
<td><a href="http://t.lu.com/"><font color="#00FF00"><b>发现你喜</b></font></a></td>
<td></td>
</tr>
<tr>
<td><a href="http://t.lu.com/">&nbsp;&nbsp;影视</a></td>
<td><a href="http://t.lu.com/">360影视</a></td>
<td><a href="http://t.lu.com/">全球追剧</a></td>
<td><a href="http://t.lu.com/">美女主播</a></td>
<td><a href="http://t.lu.com/">69美女秀</a></td>
<td><a href="http://t.lu.com/">大秧歌</a></td>
<td><a href="http://t.lu.com/">三个奶爸</a></td>
<td><a href="http://t.lu.com/"><font size="-1" color="#999999">换一换</font></a></td>
</tr>
<tr>
<td><a href="http://t.lu.com/">&nbsp;&nbsp;购物</a></td>
<td><a href="http://t.lu.com/">蘑菇街</a></td>
<td><a href="http://t.lu.com/">易购9块邮</a></td>
<td><a href="http://t.lu.com/">一折网特价</a></td>
<td><a href="http://t.lu.com/">京东服装城</a></td>
<td><a href="http://t.lu.com/">360购物</a></td>
<td><a href="http://t.lu.com/">潮南派</a></td>
<td><a href="http://t.lu.com/"><font size="-1" color="#999999">换一换</font></a></td>
</tr>
<tr>
<td><a href="http://t.lu.com/">&nbsp;&nbsp;游戏</a></td>
<td><a href="http://t.lu.com/">我是大主宰</a></td>
<td><a href="http://t.lu.com/">每日轻松网游</a></td>
<td><a href="http://t.lu.com/">手机游戏中心</a></td>
<td><a href="http://t.lu.com/">游侠网</a></td>
<td><a href="http://t.lu.com/">太平洋游戏</a></td>
<td><a href="http://t.lu.com/">178游侠网</a></td>
<td><a href="http://t.lu.com/"><font size="-1" color="#999999">换一换</font></a></td>
</tr>
<tr>
<td><a href="http://t.lu.com/">&nbsp;&nbsp;热卖</a></td>
<td><a href="http://t.lu.com/">秋冬女装</a></td>
<td><a href="http://t.lu.com/">热解馋零食</a></td>
<td><a href="http://t.lu.com/">洗牙套餐3折</a></td>
<td><a href="http://t.lu.com/">香辣火锅刷肉</a></td>
<td><a href="http://t.lu.com/">限量版KTV团购</a></td>
<td><a href="http://t.lu.com/">儿童摄影1折</a></td>
<td><a href="http://t.lu.com/"><font size="-1" color="#999999">换一换</font></a></td>
</tr>
<tr>
<td><a href="http://t.lu.com/">&nbsp;&nbsp;小说</a></td>
<td><a href="http://t.lu.com/">不花钱看小说</a></td>
<td><a href="http://t.lu.com/">言情小说大全</a></td>
<td><a href="http://t.lu.com/">小说排行榜</a></td>
<td><a href="http://t.lu.com/">斗破苍穹</a></td>
<td><a href="http://t.lu.com/">奇幻仙侠</a></td>
<td><a href="http://t.lu.com/">最新武侠小说</a></td>
<td><a href="http://t.lu.com/"><font size="-1" color="#999999">换一换</font></a></td>
</tr>
<tr>
<td><a href="http://t.lu.com/">&nbsp;&nbsp;军事</a></td>
<td><a href="http://t.lu.com/">军事头条</a></td>
<td><a href="http://t.lu.com/">鼎盛军事</a></td>
<td><a href="http://t.lu.com/">铁血军事</a></td>
<td><a href="http://t.lu.com/">环球新军事</a></td>
<td><a href="http://t.lu.com/">军事装备</a></td>
<td><a href="http://t.lu.com/">航空网</a></td>
<td><a href="http://t.lu.com/"><font size="-1" color="#999999">换一换</font></a></td>
</tr></table>
</div>
<div id="a6">
<table width="240" height="150">
<tr>
<td colspan="3"><font color="#00FF00"><b>猜你爱看</b></font></td>

<td><a href="http://t.lu.com/"><font size="-1" color="#999999">换一下</font></a></td>
</tr>
<tr align="center">
<td><a href="http://t.lu.com/">头条</a></td>
<td><a href="http://t.lu.com/">八卦</a></td>
<td><a href="http://t.lu.com/">正能量</a></td>
<td><a href="http://t.lu.com/">军事</a></td>
</tr>
<tr>
<td rowspan="3" colspan="4" align="center"><a href="http://t.lu.com/"><img src="QQ截图20151224212442.png" /></a></td>
</tr>
<tr></tr>
</table>
</div>
<div id="a7"><a href="htpp://www.baidu.com/"><img src="QQ9.png"/></a></div>

</body>
</html>
HTML
技术分享
@charset "utf-8";

/* CSS Document */
<style tyle=text/scc>
*
{
    margin:0px;
    padding:0px;}
a:link
{
    color:#000;
    text-decoration:none}
a:visited
{
    color:#000;
    text-decoration:none}
a:hover
{
    color:#F00;
    text-decoration:underline}
a:active
{
    color:#FF0;
    text-decoration:underline}
#a1
{
    background-color:#FFF;
     width::1000px;
     height:60px;
    
     position:absolute;}
#a2
{
    background-color:#FFF;
     width:240px; 
     height:240px; 
     border:1px solid #ccc; 
     left:170px; 
     top:80px;
     background-repeat:repeat;
     position:absolute; }
#a3
{
    background-color:#FFF;
     width:750px; 
     height:280px;
     border:1px solid #ccc; 
     left:420px; 
     top:80px; 
      background-repeat:repeat;
     position:absolute;}
#a4
{
    background-color:#FFF;
     width:240px; 
     height:120px; 
     border:1px solid #ccc; 
     left:170px; 
     top:330px;
     background-repeat:repeat; 
     position:absolute;}
#a5
{
    background-color:#FFF;
    width:750px;
    height:240px; 
    border:1px solid #ccc; 
    left:420px; 
    top:370px;
    font-size:14px;
    text-align:left;
    background-repeat:repeat;
    position:absolute;}
#a6
{
    background-color: #FFF;
    width: 233px;
    height: 260px;
    border: 1px solid #FFF;
    left: 170px;
    top: 460px;
    
    background-position:center;
    position: absolute;
}
#a7
{
    
    margin:10px;
    width:40px;
    height:265px;
    left:1180px;
    top:200px;
    position:fixed;}
#a11
{
    width::1000px;
     height:60px;
     background-repeat:no-repeat;
     height:30px;
     width:100px;
     left:300px;
     top:15px; 
     position:absolute;}
#a12
{
    width::1000px;
     height:60px;
     width:480px;
     height:25px;
     font-size:24px;
     
     left:440px;
     top:15px; 
     position:absolute;}
#a13
{
    width::1000px;
     height:60px;
     height:30px;
     
     left:940px;
     top:15px; 
     position:absolute;;}

</style>
CSS

技术分享

HTML&&css练习

标签:

原文地址:http://www.cnblogs.com/cuikang/p/5074446.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!