6个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=0,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Document</title>
<style>
*{ padding: 0;margin: 0; }
.clearfix:after{clear: both;content: ".";display: block;height: 0;visibility: hidden;}
.clearfix{display: block; *zoom:1;}
body{ background: #ccc;}
/* 右上导航 */
#all{ width: 100%; height: 100%;}
.Top_right{ width: 100%; padding-top: 1%;}
.Top_right span{margin:10px;}
.right{ float: right; }
/* 输入框 */
.Import{ margin: 0 auto; width: 50%; padding-top: 15%;}
.Img{ text-align: center; }
.box{ text-align: center; }
/* 底部版权 */
.Bottom{ width: 30%; margin: 0 auto;}
.copy{text-align: center; padding-top: 20%;}
</style>
</head>
<body>
<div id="all">
<div class="Top_right clearfix">
<div>
<span>导航1</span>
<span>导航2</span>
<span>导航3</span>
<span>导航4</span>
<span>导航5</span>
</div>
</div>
<div>
<div>
<img src="" alt="图片地址">
</div>
<div>
<textarea name="box1" rows="2" cols="100"></textarea>
</div>
</div>
<div>
<div>
<img src="" alt="二维码">
</div>
<div>{版权}</div>
</div>
</div>
</body>
</html>
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=0,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Document</title>
<style>
*{ padding: 0;margin: 0; }
.clearfix:after{clear: both;content: ".";display: block;height: 0;visibility: hidden;}
.clearfix{display: block; *zoom:1;}
body{ background: #ccc;}
/* 右上导航 */
#all{ width: 100%; height: 100%;}
.Top_right{ width: 100%; padding-top: 1%;}
.Top_right span{margin:10px;}
.right{ float: right; }
/* 输入框 */
.Import{ margin: 0 auto; width: 50%; padding-top: 15%;}
.Img{ text-align: center; }
.box{ text-align: center; }
/* 底部版权 */
.Bottom{ width: 30%; margin: 0 auto;}
.copy{text-align: center; padding-top: 20%;}
</style>
</head>
<body>
<div id="all">
<div class="Top_right clearfix">
<div>
<span>导航1</span>
<span>导航2</span>
<span>导航3</span>
<span>导航4</span>
<span>导航5</span>
</div>
</div>
<div>
<div>
<img src="" alt="图片地址">
</div>
<div>
<textarea name="box1" rows="2" cols="100"></textarea>
</div>
</div>
<div>
<div>
<img src="" alt="二维码">
</div>
<div>{版权}</div>
</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
实现网页布局的方式方法比较多，布局方式可以大概分为这几类。
布局种类：
1、table布局（网页的兴起，1995）
2、Flash布局（自由的黄金时代，1996）
3、div+css（CSS的诞生，1998）
4、栅格与响应式（移动端的兴起，2007与2010）
当前WEB前端开发使用DIV+CSS的布局方式会比较多也比较常用吧，网页布局看起来貌似简单，但是它需要综合使用很多HTML+CSS的知识，总的来说知识量是不小。如果想系统化的了解HTML+CSS方面的知识，建议你选择一本比较不错的HTML5相关书籍（主要看知识逻辑、知识的表达方式，比如《HTML5布局之路》）进行学习，让自己的知识更扎实一些，不然学的零零散散的。
Tips：学习好HTML+CSS有利于后面学习JavaScript，毕竟需要它们两者结合在一起才可以实现出可交互的前端页面。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
CSS英文全称：Cascading Style Sheets(层叠样式表)
是为了丰富网页布局的样式，在CSS没有出来之前，大家会用表格来进行分割布局，很不方便，CSS出来后就好多了。
我们平时所访问的都是服务器反馈到浏览器的HTML页面，但是正如上面说的，HTML无法满足新时代网站拥有者的表达需求，我们就会在HTML代码中加入适当的CSS代码来合理展现新的样式。
例如：
<html>
<head>
<title>测试页<title>
<style type="text/css">
.cs{width:100%;height:160px;text-align:center;line-height:160px;background:#f0f0f0;}
.csl{width:20%;height:160px;float:left;background:#fff;}
.csr{width:20%;height:160px;float:right;background:#fff;}
</style>
</head>
<body>
<div class="cs">
<div class="csl">
<p>左框内容</p>
</div>
<div class="csr">
<p>右框内容</p>
</div>
</div>
</body>
</html>
是为了丰富网页布局的样式，在CSS没有出来之前，大家会用表格来进行分割布局，很不方便，CSS出来后就好多了。
我们平时所访问的都是服务器反馈到浏览器的HTML页面，但是正如上面说的，HTML无法满足新时代网站拥有者的表达需求，我们就会在HTML代码中加入适当的CSS代码来合理展现新的样式。
例如：
<html>
<head>
<title>测试页<title>
<style type="text/css">
.cs{width:100%;height:160px;text-align:center;line-height:160px;background:#f0f0f0;}
.csl{width:20%;height:160px;float:left;background:#fff;}
.csr{width:20%;height:160px;float:right;background:#fff;}
</style>
</head>
<body>
<div class="cs">
<div class="csl">
<p>左框内容</p>
</div>
<div class="csr">
<p>右框内容</p>
</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
首先，如果你是练习这个布局的话， 没必要 按F12看源码， 因为百度的源码太多，主要是功能太多， 你看源码 你会很头疼， 你扒不出来 这一块的 布局 代码！
自己写就简单了
顶部定义一个导航 <nav> 居右
中间main 一个logo 一个input 整体居中
底部 图片 加声明 居中
如果你问具体到 写出来一个小demo ，那估计没有时间帮你，你可以先自己写，遇到问题再提问
自己写就简单了
顶部定义一个导航 <nav> 居右
中间main 一个logo 一个input 整体居中
底部 图片 加声明 居中
如果你问具体到 写出来一个小demo ，那估计没有时间帮你，你可以先自己写，遇到问题再提问
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
分三块。
上部分菜单一块
中间搜索框
下面声明。
或者按F12查看元素
上部分菜单一块
中间搜索框
下面声明。
或者按F12查看元素
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（4）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
|
广告 您可能关注的内容 |
