运用<div>布局页面练习
<!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>Stanford University</title>
<style type="text/css"> </style>
<link href="斯坦福.css" rel="stylesheet" type="text/css" />
</head> <body leftmargin="0"> <div class="A"><img src="../stanforduniversity-125@2x.png" width="467px" height="70px">
<div class="A1">
<font size="-1">
<form id="aa" method="post" action="http://www.baidu.com">
<table>
<tr>
<td width="350px" height="30px"> <input type="radio" name="aaa" id="aaa2" value="" />
web <input type="radio" name="aaa" id="aaa" value="" />people</td> <td> <input type="text" name="a1" id="" value="" placeholder="search web or people">
</div></td>
</tr>
</table>
</form>
</font>
</div>
</div>
<div class="B">
<table width="1000" height="29" style="position:absolute; left:185px; font-family:'仿宋'"> <tr>
<td width="94px" align="center">About Stanford</td>
<td width="10%" align="center" >Admission</td>
<td width="10%" align="center" >Academics</td>
<td width="10%" align="center">Research</td>
<td width="10%" align="center">Campus Life</td>
<td width="10%" align="center"> </td>
<td width="10%" align="center" style="font-size:xx-small" >STUDENTS</td>
<td width="10%" align="center" style="font-size:xx-small">FACULTY / STAFF</td>
<td width="10%" align="center" style="font-size:xx-small">PARENTS </td>
<td width="10%" align="center" style="font-size:xx-small">ALUMNI</td>
</tr> </table>
</div>
<div class="C">
<img src="../2016-04-22_ht_ug_Ellie_5029.jpg" width="1000px" height="350px"/>
<div class="C1">
<img src="../QQ截图20161225092422.png" />
</div>
</div>
<div class="D">
Top Stories<hr color="#000000" />
</div>
<div class="E">
<img src="../2016-12-23_holiday_hp.jpg" width="218" height="174" />
</div>
<div class="F">
<img src="../2016-12-22_drell_hp.jpg" width="237" height="175" />
</div>
<div class="G">
<img src="../2016-12-20_oilsands_home.jpg" width="219" height="172" />
</div>
<div class="H"><font color="#990000">MORE HEADLINES</font><br /><br /> Q&A with Norman Naimark: The<br> history of genocide<br><br>
Research locates absence epilepsy<br> seizure 'choke point' in brain<br /><br />
Stanford's East Asian Studies major adds Korean track
</div>
<div class="I"><b>Making spirits bright</b><br><br />
Before many head home for the holidays,<br>
the campus celebrates the season's<br />
traditions with music and fun.
</div>
<div class="J"> <b>Sidney Drell dies</b><br />
Drell, a theoretical physicist and national <br>
security expert at Stanford, was 90.
</div>
<div class="K"><b>Ocean threat</b><br />
Unexamined risks from tar sands oil may threaten environment.
</div>
<div class="L">MORE NEWS</div>
<div class="M">
<img src="../QQ截图20161225151410.png" width="1045" />
</div>
<div class="N">Events<hr />
</div>
<div class="O">AtStanford<hr />
</div>
<div class="P">Athletic<hr />
</div>
<div class="Q">
<img src="../QQ截图20161225184001.png" width="269" height="280" />
</div>
<div class="R">
<div class="R1">
<img src="../QQ截图20161225175355.png" width="305" height="44" />
</div>
<div class="R2">
<img src="../QQ截图20161225175408.png" width="36" height="207" />
</div> <div class="R3">Christmas Eve Family Service<br />4 p.m.<br /><br />
Thursday Nights at the Anderson: Film Screening:<br /> Peggy Guggenheim: Art Addict<br />
6 p.m.<br /><br />
Men's Basketball vs. Arizona<br />
5 p.m.
</div>
</div>
<div class="S">
<div class="S1">MORE</div>
</div>
<div class="T">
<div class="T1" style="line-height:24px">
<font color="#FF0000">RESOURCES
</font><br />
A - Z Index<br />
Campus Map<br />
Directory<br />
Stanford Profiles
</div>
<div class="T2" style="line-height:24px">
<font color="#FF0000">ABOUT STANFORD
</font><br />
Facts<br />
History<br />
Accreditation<br /><br />
<font color="#FF0000">ADMISSION
</font><br />
Undergraduate<br />
Graduate<br />
Financial Aid<br />
</div>
<div class="T3" style="line-height:24px">
<font color="#FF0000">HEALTH CARE
</font><br />
Stanford Health Care<br />
Stanford Children's Health<br />
<font color="#FF0000">ONLINE LEARNING
</font><br />
Stanford Online<br />
</div>
<div class="T4" style="line-height:24px">
<font color="#FF0000"> DEPARTMENTS
</font><br>
Departments A - Z<br />
Interdisciplinary Programs<br /><br />
<font color="#FF0000" > RESEARCH
</font><br />
Research Centers A - Z<br />
Interdisciplinary Research<br />
Libraries<br /> </div>
<div class="T5" style="line-height:24px">
<font color="#FF0000">SCHOOL
</font><br>
Business<br />
Earth, Energy & Environmental Sciences<br />
Education<br />
Engineering<br />
Humanities & Sciences<br />
Law<br />
Medicine<br />
</div>
<div class="T6">
<img src="../QQ截图20161225195046.png" width="145" height="219" /> </div>
</div>
<div class="U"><img src="../QQ截图20161225192417.png"></div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
*{
color:#999
}
.A{
width:100%;
height:80px;
background-color:#900;
font:"微软雅黑";
font-size:2.5em;
font-weight:bold;
color:#FFF;
text-indent:100px;
position:relative; }
.A1{
width: 500px;
height: 46px;
background-color: #900;
position: absolute;
right: "0px";
left: 846px;
top: 20px; }
.B{
width:100%;
height:30px;
background-color:#CCC;
font-size:smaller
} .C{
width:1000px;
height:350px;
margin:0px auto;
margin-top:5px;
}
.C1{
width: 483px;
height: 109px;
position: absolute;
left: 200px;
top: 140px; }
.D{
width: 1000px;
height: 50px; margine-top: 20px;
left: 173px;
position: absolute;
top: 539px;
}
.E{
width: 220px;
height: 195px; margin-left: 160px;
position: absolute;
left: 14px;
top: 594px;
} .F{
width: 237px;
height: 195px; margin-left: 20px;
position: absolute;
left: 413px;
top: 595px;
}
.G{
width: 223px;
height: 195px; margin-left: 20px;
position: absolute;
left: 685px;
top: 596px;
}
.H{
width: 269px;
height: 195px;
margin-left: 20px;
position: absolute;
left: 924px;
top: 595px;
}
.I{
width: 219px;
height: 195px;
margin-left: 160px;
margin-top: 200px;
position: absolute;
left: 18px;
top: 578px;
}
.J{
width: 233px;
height: 195px;
margin-left: 20px;
margin-top: 200px;
position: absolute;
left: 414px;
top: 578px;
}
.K{
width: 219px;
height: 195px;
margin-left: 20px;
margin-top: 200px;
position: absolute;
left: 689px;
top: 580px;
}
.L{
width: 211px;
height: 161px;
margin-left: 20px;
margin-top: 200px;
position: absolute;
left: 943px;
top: 616px;
}
.M{
width: 1158px;
height: 50px;
margin-top: 10px;
position: relative;
left: 187px;
margin-top: 400px;
position: absolute;
top: 534px;
}
.N{
width: 300px;
height: 50px;
position: absolute;
margin-top: 10px;
left: 542px;
top: 1010px;
}
.O{
width: 300px;
height: 50px;
position: absolute;
margin-top: 10px;
left: 183px;
top: 1007px;
}
.P{
width: 300px;
height: 50px;
position: absolute;
margin-top: 10px;
left: 911px;
top: 1008px;
}
.Q{
width: 300px;
height: 316px;
position: absolute;
margin-top: 10px;
left: 912px;
top: 1061px; }
.R{
width: 300px;
height: 310px;
position: absolute;
margin-top: 10px;
left: 542px;
top: 1063px;
}
.R1{
width: 302px;
height: 49px;
position: absolute;
left: -3px;
top: 3px;
}
.R2{
width: 60px;
height: 249px;
position: absolute;
left: -2px;
top: 56px;
}
.R3{
width: 236px;
height: 249px;
position: absolute;
left: 62px;
top: 56px; }
.S{
width: 300px;
height: 317px;
position: absolute;
margin-top: 10px;
left: 183px;
top: 1060px;
}
.S1{
width: 300px;
height: 20px;
position: absolute;
left: 0px;
top: 250px;
}
.T{
width: 1330px;
height: 300px;
position: absolute;
top: 1386px;
left: -2px;
background: #CCC
}
.T1{
width: 149px;
height: 257px;
position: absolute;
top: 29px;
left: 891px;
}
.T2{
width: 149px;
height: 257px;
position: absolute;
top: 29px;
left: 704px;
}
.T3{
width: 163px;
height: 257px;
position: absolute;
top: 31px;
left: 515px;
}
.T4{
width: 167px;
height: 257px;
position: absolute;
top: 31px;
left: 331px;
}
.T5{
width: 149px;
height: 257px;
position: absolute;
top: 30px;
left: 144px;
}
.T6{
width: 149px;
height: 257px;
position: absolute;
top: 30px;
left: 1075px;
}
.U{
width: 100%;
height: 100px;
position: absolute;
top: 1688px;
left: 0px;
}
运用<div>布局页面练习的更多相关文章
- div 布局
转:http://blog.csdn.net/mercop/article/details/7882000 HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理 ...
- table布局与div布局
DIV与TABLE本身并不存在什么优缺点,所谓web标准只是推荐的是正确的使用标签,好比说:DIV用于布局,而TABLE则本来就是转二维数据的.让TABLE做该做的事,并不是说页面里不出现TABL ...
- 利用Div+CSS(嵌套+盒模型)布局页面完整实例流程
Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head> <meta charset="UT ...
- 小div布局之卡片堆叠（card-stacking）
前端的页面布局和各种效果真是让人眼花缭乱,公司的设计师恨不得在一个网站上把前端的布局和样式效果都用一遍. 如何实现下面这种布局效果?我给这种布局效果起了个名字,叫做小div布局之卡片堆叠.然后我百度了 ...
- DIV布局之道二：DIV块的嵌套，DIV盒子模型
本文讲解DIV块布局的第二种使用方式:嵌套.“DIV嵌套”在有些文献中也被称为“盒子模型”,说的通俗一点就是嵌套(一个大的DIV块内部又包含一个或多个DIV块). 请看如下代码: CSS部分: CSS ...
- 利用css来让一个div在页面中垂直居中的方法
一.如何让一个div在页面中垂直居中(请至少列出三种) 1.距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%,最后将该DIV分别左移和上移,左移和上移的大小就 ...
- (转)盒子概念和DiV布局
CSS盒子和DIV布局 (2013-11-24 16:17:29) 转载▼ 一.认识div层 1.<DIV>标记是一个区块容器标记,在标记之间可以放置其他一些HTML元素,例如p,h1,t ...
- [译]ASP.NET Core 2.0 布局页面
问题 如何在ASP.NET Core 2.0项目中共享可见元素.代码块和指令? 答案 新建一个空项目,首先添加GreetingService服务和UserViewModel模型: public int ...
- 用table布局和div布局的区别
table布局的渲染是将整个table全部渲染出来,如果网路不给力的情况下,整个table会卡死在页面div布局的话,页面渲染,会一个一个的div渲染,网页出现会一个一个出来,不管网速怎样,不会全局卡 ...
随机推荐
- MJRefresh 源码解读 + 使用
MJRefresh这个刷新控件是一款非常好用的框架,我们在使用一个框架的同时,最好能了解下它的实现原理,不管是根据业务要求在原有的基础上修改代码,还是其他的目的,弄明白作者的思路和代码风格,会受益匪浅 ...
- ASP.NET Core 中文文档 第四章 MVC（4.3）过滤器
原文:Filters 作者:Steve Smith 翻译:刘怡(AlexLEWIS) 校对:何镇汐 ASP.NET MVC 过滤器 可在执行管道的前后特定阶段执行代码.过滤器可以配置为全局有效.仅对控 ...
- C#日志
参考页面: http://www.yuanjiaocheng.net/Entity/first.html http://www.yuanjiaocheng.net/Entity/jieshao.htm ...
- Autofac - 属性注入
属性注入不同于通过构造函数方式传入参数. 这里是通过注入的方式, 在类创建完毕之后, 资源释放之前, 给属性赋值. 这里, 我重新弄一些类来演示这一篇吧. public class ClassA { ...
- WinForm设置控件焦点focus
winform窗口打开后文本框的默认焦点设置,进入窗口后默认聚焦到某个文本框,两种方法: ①设置tabindex 把该文本框属性里的tabIndex设为0,焦点就默认在这个文本框里了. ②Winfor ...
- iOS app内存分析套路
iOS app内存分析套路 Xcode下查看app内存使用情况有2中方法: Navigator导航栏中的Debug navigator中的Memory Instruments 一．Debug navi ...
- TFS 生成发布代理
下载Agent 后,执行配置命令 参考 安装TFS(2015)工作组模式代理服务器(Agent)
- Help Hanzo (素数筛+区间枚举)
Help Hanzo 题意:求a~b间素数个数(1 ≤ a ≤ b < 231, b - a ≤ 100000). (全题在文末) 题解: a~b枚举必定TLE,普通打表MLE,真是头疼 ...
- grunt配置任务
这个指南解释了如何使用 Gruntfile 来为你的项目配置task.如果你还不知道 Gruntfile 是什么,请先阅读 快速入门 指南并看看这个Gruntfile 实例. Grunt配置 Grun ...
- 【腾讯Bugly干货分享】React Native项目实战总结
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/577e16a7640ad7b4682c64a7 “8小时内拼工作,8小时外拼成长 ...