搭建简单的HTML页面

   最近两天做了一个小的网页页面,发现也是有许多问题的对于网页,真的是需要多加练习的,下面就来说说网页中的那些事!

 1,页面的框架搭建

<div class="content">

<header></header>

<nav></nav>

<aside></aside>

<article>

<div>内容文档</div>

<figure>    //对元素进行组合。

<figcaption>**</figcaption>  //为元素组添加标题。

</figure>

</article>

</div>


2,做网页的一般流程步骤

1,先找好文字图片,建好目录images,css,js等文件夹

2,在dw中新建TXT文档把文字先粘贴进去的

3,把HTML基本元素加到不同的文字中去

4,将HTML的头,导航,左侧,主题,尾部元素加上去

5,再单独用个文件先写好公共的样式,在写中心的样式文件(原则是从大到小,从外到内,从上到下)

6,不断的调试设置直到效果出现


3,制作过程中出现的问题与解决

1,在设置header时,一般是将h1的内容隐藏掉的,是使用display:none;进行的可以;也可以如下

<div class=“logo”><h1><a href="#">**</a></h1></div>

其次,在处理代码的同时要利用CSS进行修饰下。如下边所示:  .logo h1{padding:0px;}  .logo h1 a{display:block;width:170px;height:50px;background:url(images/logo.gif) scroll no-repeat 0 40px;text-indent:-9999em;}

2,在设置导航的过程中的,对于下方内容会飘上来是因为木有清除浮动的clear:both;不是none;对于设置<a>标签的时候先是要进行display:block;为块状元素才能设置样式的,对于设置导航的响应区域设置最好是设置宽度,先计算好再平均下的,不推荐设置margin,为了使得文字居中的话,设置好text-align和line-hegiht就可以的;

3,在aside过程中的话,对于设置背景图片出现了不显示的问题,是因为背景的图片是不能设置大小的,只能设置相对位置,所以说是先把图片的大小设置好,否则就会不显示的;不论是什么先要是在总的元素框架中设置width,可以设置百分比的;

4,其他的技术问题,设置圆角矩形的话,border-radius,一般是设置宽度的一半是圆形的,其余自控;而网页标题的左侧图标是在head中加入<link rel="**" href="**" type="image/x-icon">,设置透明度test {

background-color:transparent;/*设置背景色为透明*/

color:#000; /*设置字体颜色为黑色,根据需要修改颜色*/

}  还有的话就是div设置宽高


4,总结

多思考,多调试,多搜索,多动手,提前完成!及时总结与反馈!

下面是网页界面:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,189评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,577评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,857评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,703评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,705评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,620评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,995评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,656评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,898评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,395评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,982评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2 342

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,726评论 1 92
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 2,616评论 0 30
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    程序员poetry阅读 16,511评论 32 459
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 3,197评论 0 5
  • 一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css...
    KunMitnic阅读 925评论 0 1