运用<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渲染,网页出现会一个一个出来,不管网速怎样,不会全局卡 ...
随机推荐
- PHP之用户验证和标签推荐的简单使用
本篇主要是讲解一些最简单的验证知识 效果图 bookmark_fns.php <?php require_once('output_fns.php'); require_once('db_fns ...
- thinkphp数据的查询和截取
public function NewsList(){ $this->assign('title','news'); $p = I('page',1); $listRows = 6; $News ...
- hbase集群安装与部署
1.相关环境 centos7 hadoop2.6.5 zookeeper3.4.9 jdk1.8 hbase1.2.4 本篇文章仅涉及hbase集群的搭建,关于hadoop与zookeeper的相关部 ...
- linux之查看系统命令
cpu信息 1.查看逻辑cpu核数 # cat /proc/cpuinfo| grep "processor"| wc -l 2.查看物理cpu个数 # cat /proc/cpu ...
- [转]NopCommerce How to add a menu item into the administration area from a plugin
本文转自:http://docs.nopcommerce.com/display/nc/How+to+code+my+own+shipping+rate+computation+method Go t ...
- caffe的python接口学习（7）：绘制loss和accuracy曲线
使用python接口来运行caffe程序,主要的原因是python非常容易可视化.所以不推荐大家在命令行下面运行python程序.如果非要在命令行下面运行,还不如直接用 c++算了. 推荐使用jupy ...
- servlet使用入门
创建web工程servlet,然后新建TestServlet.java package com.xmyself.servlet; import java.io.IOException; import ...
- 《徐徐道来话Java》（2）：泛型和数组，以及Java是如何实现泛型的
数组和泛型容器有什么区别 要区分数组和泛型容器的功能,这里先要理解三个概念:协变性(covariance).逆变性(contravariance)和无关性(invariant). 若类A是类B的子类, ...
- Hadoop4 利用VMware搭建自己的hadoop集群
前言: 前段时间自己学习如何部署伪分布式模式的hadoop环境,之前由于工作比较忙,学习的进度停滞了一段时间,所以今天抽出时间把最近学习的成果和大家分享一下. 本文要介绍的是如 ...
- 完成C++不能做到的事 - Visitor模式
拿着刚磨好的热咖啡,我坐在了显示器前.“美好的一天又开始了”,我想. 昨晚做完了一个非常困难的任务并送给美国同事Review,因此今天只需要根据他们提出的意见适当修改代码并提交,一周的任务就完成了.剩 ...