浅谈网页制作

在开发一个完整的网页之前,我们首先应该做好一些相关的准备,例如切片,布局,测量网页版心等。准备工作完成之后,我们就可以进行网页开发了。

测量网页尺寸大小的准确性可以直接影响最后网页的布局,所以尽量细心一些。

对于布局,我觉得最关键的一点是,对网页大局观的认识。

布局完成后我们就可以使用css来控制网页的样式:

对于每个网页的制作我想都有一些相同的全局样式

例如(*{margin:0;padding:0;list-style:none等等})一般情况下在做正式的网页开发我们一般不用*通配符因为它的权重很低,所以我们应该把网页中可能涉及到的所有元素都写出来。

(body{font-size:12px;color:#ccc;}等等)给全局的网页设置字体的大小及它的颜色。制作网页后我们可以发现网页中不同的版块中很多地方的字体及颜色不一样,那就的单独控制局部的字体和颜色了。

(a:link,a:visited{color:#ccc;text-decoration:none;})(a:hover{color:red;text-decoration:underline;})

这是全局设置a标签的样式,当静态时候的a标签是灰色没有下划线的,当鼠标进入的时候a标签变成红色并带有下划线的,当然网页中其他地方a不同,可以进行单独的控制,且必须注意权重问题。

写完这些所有网页中都可以通用的样式后,我们就可以进行开发了。一般写完全局式样后,都必须换行,那样可以使在开发网页时格式清楚利于自己开发,且加上注释。

今天我主要想说几个方面的问题,我觉得这些是网页开发中的重点,也是一些基础知识

  1. 版心居中,及其文字居中问题
  2. 盒子模型
  3. float,溢出
  4. 相对及绝对定位

5.html中标签的合理化使用

6.网页中给标签的命名

第一:对于居中的问题可以分为块级元素和行内元素居中

块级元素主要使用margin:0 auto;(上下距离为0,左右距离自动)。(也可以用版心50%-div的width)

对于行内元素的居中:对于文字的居中主要使用text-align:center;对于img的居中我们使用vertical-align:middle;

当我们要使文字和图片(图片的尺寸大小不同时)居中在一条线上是,加上这两个属性就可以搞定了;

第二:盒子模型

有了盒子模型最直观的感受是能使每一个标签看起来更加的美观:内边距:padding;外边距:margin;

例如:使用div{原div实际大小为:width:100px;height:100px;}现在我们加上padding:20px;

那么padding会把我们盒子的实际大小撑大很多,为了使盒子的大小不变我们必须在原有的宽高上减去相应的值;

div:{width:60px;height:60px;padding:20px}这样就可以和原div一样大了 ,margin的使用也是一样的。

注意:一般情况来说:增加padding的值就必须减去相应的距离,而magrin一般不用减(magrin是外边距)。

padding的书写方式:padding:20px;padding:20px 20px; padding:20px 20px 20px; padding:20px 20px 20px 20px;

有四种书写方式分别代表:(1.上下左右)(2.上下,左右)(3.上,左右,下)4.(顺时针上,右,下,左)

第三:float:浮动      说起浮动首先从布局说起:布局一般情况是标准流布局(块级元素:自上而下,内联元素:从左到右)

浮动元素属性:float:left;  float:right(它可以使块级元素和内联元素都脱离标准流)在制作网页时,配合ul li能后快速的达到想要的效果,但是float后它也会影响后面的标准流所以我们一般使用clean:both;overflow:hidden;来清除float的影响;

这里顺便说说块级元素和行内元素的转换:display:block;(行内元素转化为块级元素)

display:inline-block;(块级元素转化为行内元素)

display:none;(隐藏元素)

第四:定位:(分为四种:静态定位,相对定位,绝对定位,固定定位)

这里说说相对定位和绝对定位

相对定位:position:relative;(以标准流中自身为参照物,如果脱离标准流后,会保留标准流原来的位置,属于半脱离状态)

绝对定位:position:abosolute;(完全脱离标准流,参照浏览器左上角来进行定位,但这样的参照一般无意义。它的主要用途是父级相对子级绝对,这样的定位方式才有实际的意义。)

第五:html标签的合理化使用:对于这点来说举个列子

<p>和<span>:当这两个标签同时控制一行文字时:一般情况p控制重要的文字,span控制无关紧要的文字和控制单独的文字。说这个的主要意思是:当制作网页的时候尽可能的多思考,用什么样的标签来描述网页最合适。

第六:网页中的命名:当网页制作中给元素制定id或class的时候,注意一定要使用稍微规范的命名:

例如:<div class="nav_div"></div>而尽量不要使用<div class="daohang"></div>让自己养成一个良好的习惯。

今天的分享结束,还有许多html和css的知识未涉及到例如css3,html5本人正在学习中,待整理后,会第一时间和大家分享,交流,也希望看了本人博客的朋友,给出学习意见和建议,博客中许多知识写的不好不深入,还请见谅。

时间: 2024-10-13 21:09:22

浅谈网页制作的相关文章

浅谈网页浏览器的发展

当谈到一些很生僻的软件时候,我很恐慌,因为不了解,所以惧怕:当谈到一些常用软件的时候,我想大多数人们都会有话要讲. 网页浏览器对于我们每一个人都很熟悉,因为根本没办法不去使用它,在我们的网络生活中有着举足轻重的作用.网页浏览器 是个显示网页服务器或档案系统内的文件,并让用户与此些文件互动的一种软件.非常关键,没有它我们就不能跟网络互动,可想可知,在现在的世界中,这是一种多么可怕的体验.网页浏览器用来显示在万维网或局部局域网路等内的文字.影像及其他资讯.这些文字或影像,可以是连接其他网址的超连结,

浅谈网页运行原理

我们知道打开一个网页的时候,浏览器会首先创建一个窗口,这个窗口就是一个window对象,也是javascript运行所依附的全局环境对象和全局作用域对象. 为了加载网页文档,当期的窗口将为要打开的网页创建一个document对象,然后将页面加载到这个document中,网页的内容就是在这这个过程中一边加载一边显示出来,javascript也是伴随着这个过程,一边加载一边执行的. 进行加载和执行的目的,就是建立文档对象模型(DOM)主框架,这个文档框架是由当前文档窗口的主线程来执行,并依照严格的顺

Android应用安全开发之浅谈网页打开APP

一.网页打开APP简介 Android有一个特性,可以通过点击网页内的某个链接打开APP,或者在其他APP中通过点击某个链接打开另外一个APP(AppLink),一些用户量比较大的APP,已经通过发布其AppLink SDK,开发者需要申请相应的资格,配置相关内容才能使用.这些都是通过用户自定义的URI scheme实现的,不过背后还是Android的Intent机制.Google的官方文档<Android Intents with Chrome>一文,介绍了在Android Chrome浏览

Android安全开发之启动私有组件漏洞浅谈

0x00 私有组件浅谈 android应用中,如果某个组件对外导出,那么这个组件就是一个攻击面.很有可能就存在很多问题,因为攻击者可以以各种方式对该组件进行测试攻击.但是开发者不一定所有的安全问题都能考虑全面. ? 对于这样的问题,最方便的修复方式就是在确定不影响业务的情况下,将这个存在问题的组件不对外导出变成私有组件.这样做的确很有效,私有组件也很安全.但是,如果存在某个私有组件能被导出组件启动的话,那么这个私有组件其实就不再是私有了.如果攻击者可以通过控制导出的组件对私有组件进行控制,那么攻

浅谈控件(组件)制作方法一(附带一delphi导出数据到Excel的组件实例)(原创)

来自:http://blog.csdn.net/zhdwjie/article/details/1490741 ------------------------------------------------------------------- 从99年学习delphi开始,我就被它的快速开发迷上了,那时候刚接触编程,对可视化开发特别来劲,原因嘛,不外乎是比C更快的实现啦,这几年来,从delphi的C/S到三层B/S,大大小小也写过一些软件,自认为这delphi也就这么些功能吧,自从最近偶得一

浅谈视频的制作

摘 要:在当今社会视频已经成为人们生活和工作日以追求的物质和精神需求.视频让人们的生活更富客观性和真实性.它记录了人生的美好,当回望过去时,它就是见证.它也是生活中的一抹调味剂,可以使人们愉悦身心,缓解工作.生活的压力.这些可以运用Adobe Premiere Pro CS3来制作完成,刻录成VCD.DVD等等.下面我就简单介绍一下如何运用Adobe Premiere Pro CS3. 关键词:视频:Adobe Premiere Pro CS3:制作: 视频技术最早是为了电视系统而发展,但是现在

图标字体化浅谈[转]

在做手机端Web App项目中,经常会遇到小图标在手机上显示比较模糊的问题,经过实践发现了一种比较好的解决方案,图标字体化.在微社区项目中,有很多小的Icon(图标),如分享.回复.赞.返回.话题.访问.箭头等,这些Icon(图标)一般都是纯色的.开始制作时考虑用双倍大小的Sprite图,通过CSS样式设置只显示二分之一尺寸,这样在Retina屏上显示的大小是正常的,一旦放大屏幕后图标又变得模糊不清,测试的效果不是很理想,后来又考虑多套图标适配方案.SVG矢量图等,都因为种种原因放弃掉了(如多套

浅谈web前端开发

有部分同学和朋友问到过我相关问题.利用周末我就浅浅地谈谈我对web前端开发的理解和体会,仅仅能浅浅谈谈,高手请自己主动跳过本篇文章. 毕竟我如今经验并非非常足,连project师都算不上,更不用说大牛了.今天也不谈技术.技术非常多人比我掌握得更好,也大同小异.可是每一个人的理解体会是不一样的. 对前端开发的三个整体理解和体会 我对前端开发的整体体会有三: 第一:杂而难,难度甚至超过了一般的后台开发,假设有人认为前端开发简单仅仅能说明他还没有入门. 第二:web前端开发正在向响应式和移动端方向大步

流媒体网站开发技术浅谈

流媒体网站开发技术浅谈(2012-02) 2012-03-02    新闻来源:武汉广电网 张方东 (黄陂区广播影视局事业技术科) 摘 要:随着有线和无线网络宽带的高速发展,人们不再满足于因特网中仅有的文字.图片等简单信息,而越来越希望看到更直观.更丰富的影视节目,流媒体网站因此应运而生.本文从流媒体概念.流媒体格式.流媒体文件制作.流媒体文件传输.流媒体文件发布及流媒体网站部署等方面对开发流媒体网站作了详细阐述. 关键词:流媒体 网站开发 部署 技术 1.概述 在网络上传输多媒体有下载和流式传