2 jassibel jassibel 于 2016.09.14 10:02 提问

怎么能看到一个网页布局就想到他的代码标签怎么布局,谢谢

怎么能看到一个网页布局就想到他的代码标签怎么布局,有很多网页布局虽然大同小异,但差异还是很多,我是新人,看了很多都是一片空白,想请教一下谢谢

6个回答

ruoworuoli
ruoworuoli   2016.09.14 10:06

谷歌浏览器 更多工具 开发者工具 里面的sourses

jassibel
jassibel 谢谢
接近 2 年之前 回复
zhuzige521888
zhuzige521888   2016.09.14 10:08

1.这都是经验,熟能生巧,当你懂原理了,你自然一眼就会看出来怎么布局了。
2.有的时候布局比较复杂,还是需要浏览器开发者工具F12来查看的.

zhuzige521888
zhuzige521888 不客气,采纳吧哈哈
接近 2 年之前 回复
jassibel
jassibel 谢谢
接近 2 年之前 回复
qq_19394755
qq_19394755   2016.09.14 10:10

一般的浏览器都有开发者帮助工具,用这个可以好点

jassibel
jassibel 谢谢
接近 2 年之前 回复
zuoyifeng1993
zuoyifeng1993   2016.09.14 10:14

首先要学会看图,你看一个网页,最新看整体的,
比如 头部、身体、底部,这样就是先写 三个最简单的div盒子

头部
身体
底部

然后一般头部有导航条、logo、之类的
然后你就忽略,身体和底部的div,只是在头部div里面再细分,比如:

LOGO
导航条

一次类推在里面细分>细分,都是从大到小的过程,
你前期学习布局就用div、ul、li、span等这些简单的标签,不要用很多偏门标签 hr font sup等等
布局多多用样式写,多练习样式,脑袋学会写了样式后,有思维图模拟出来;

现在你大致明白了吗?

zuoyifeng1993
zuoyifeng1993 回复木子李家的小提提: 不客气,希望能帮到你,有问题可以私信
接近 2 年之前 回复
jassibel
jassibel 回复左逸枫1993: 嗯嗯 谢谢
接近 2 年之前 回复
zuoyifeng1993
zuoyifeng1993 这里很多刚刚写的代码没有显示,你在头部外面加上<div>看,应该能看懂
接近 2 年之前 回复
ar31477
ar31477   2016.09.14 11:15

图片说明 chrome 的调试,火狐的调试模式等都 可以很方便的查看 代码

qq_19558705
qq_19558705   Ds   Rxr 2016.09.14 15:16

网站是一层一层搭建一起来的,直接看别人做好的网站是不建议的。H5的语法中很明确,同时也有利于收获引擎的捕获,比如头部就是header,导航就是nav,标题组就是hgroup,文章就是article,音频audio 。等等。告诉你怎么去用。有空可以看看这个:http://blog.csdn.net/qq_19558705/article/details/50488418

jassibel
jassibel 谢谢
接近 2 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
HTML5 网页布局的总结
可以通过 和 将 HTML 元素组合起来。 HTML 块元素 大多数 HTML 元素被定义为块级元素或内联元素。 编者注:“块级元素”译为 block level element,“内联元素”译为 inline element。 块级元素在浏览器显示时,通常会以新行来开始(和结束)。 例子:, , , HTML 内联元素 内联元素在显示时通常不会以新行开始。
HTML5布局和HTML5标签
一、新的文档类型声明(DTD)文档类型声明HTML 5的DTD声明为:    &amp;lt;!doctype html&amp;gt;    &amp;lt;!DOCTYPE html &amp;gt;等也是正确的,因为HTML语法是不区分大小写的。在编写HTML5文档时,要求指定文档类型,以确保浏览器能在HTML5的标准模式下进行渲染。二、新增的HTML5标签a,新增的HTML5标签-结构标签结构标签:(块状元素) 有意义的...
五种经典网页布局设计
不得不说,网页设计绝对是有套路的!网页布局虽然千变万化,但是如果你仔细观察,会发现有一些布局适用范畴相当广,经久不衰。今天的文章,我们就来聊一下5种经典的网页布局。在开始一个新的网页设计项目的时候,不知道你会不会有那么一瞬间的犹豫:“这个项目要从哪里着手呢?”伴随着这种犹豫的,是“做点前所未有的作品”的冲动。不过,很多时候,这些冲动和犹豫都在需求的磨合、设计的细化中,逐步淡化。相比大家也都发现了,...
请用html5标准完成以下页面布局(要求完整书写整个页面的html代码,不需要写CSS)
(1)、请用html5标准完成以下页面布局(要求完整书写整个页面的html代码,不需要写CSS)
精通DIV+CSS3网页布局与样式源代码
精通DIV+CSS3网页布局与样式的全部源代码
《基础网页制作》一个超简单的div布局,制作静态网页很简单
效果图附上 以下代码超简单的,就不解释啦 Div布局 主要应用于网站首页公告和标签 附加推荐菜单 首页 衣服 裤子 鞋子 头饰 第一页面显示板块 第二页面显示板块 底部网站信息布局
HTML5 使用结构元素进行网页布局
使用结构元素进行网页布局 .main{ width: 1000px; margin: 40px auto; } .main nav{ width: 1000px; height: 40px; background: #999; /*背景颜色*/ border-radius: 5px; /*圆角边框半径*/ } .main nav li{ widt
HTML框架集与布局
HTML框架集与布局 (1)html文档流:把元素从上到下,从左到右的顺序默认排列 (2)web页面布局的几种方式 Frameset框架集(框架布局) ①可以再同一个浏览器窗口显示多个HTML页面,每个HTML页面称为一个框架 ②框架集标签:使用了标签就不能再用标签(应为是同级的) 有属性rovs(横着分割)、rols(竖着分割)、border(设置边界)、bordercolor(设置
一个简单的网页布局案例(DIV+CSS)
网页布局简单案例 通过简单的更改几行样式实现通篇布局的调整
网页设计中常见的几种布局
1.一列布局,使用margin:0 auto属性 代码: 设置自动居中 body{ margin:0; padding:0; /*清除默认样式规则*/ font-size:30px; font-weight:bold; } #top,#bottom