HTLM技术中的常用10个技巧

2019-09-10 郑州网站建设  

一、将填充和边距都设置为零

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}

也有使用通配符*{padding:0;margin:0;}网站利弊端都各有其说法,对于*号这种,是把所有元素的内外边距都设置为了0,可能有些会出现些小细节的问题,所以选择你适用的方法吧

二、重置浏览器的字体大小

body {

font:12px "宋体", Arial, Helvetica, sans-serif;

color: #000;

}

不保证所有的用于都安装有你设置的字体,所以通常会在后面加上几个通用的web安全字体

三、元素/标签选择器

h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal;}

table { border-collapse:collapse; border-spacing:0;}

img { border:0;}

ol,ul { list-style:none; }

p{word-wrap:break-word}

四、站点链接

站点链接的样式必须保持此顺序,包括用于创建悬停效果的选择器组在内

a:link {

color: #42413C;

text-decoration: none;

}

a:visited {

color: #6E6C64;

}

a:hover, a:active, a:focus {

text-decoration: underline;

}

五、设置水平居中

1)固定宽度大多数的网站目前都是固定宽度的代码如下:

#container { width:1000px;margin: 0 auto;}

2)如果是用百分百来定义宽度的话,可以这样使用:

#container {

width: 80%;

max-width: 1260px; /* 最大宽度,IE6 不遵循max-widthmin-width 此声明。 */

min-width: 780px; /* 最小宽度 */

margin: 0 auto; /* 如果将 #container 宽度设置为 100%,则不需要此设置。 */

}

HTML/CSS十条网页设计中实用的技巧!

六、可以重复利用的规则

.left {float: left;}

.right {float: right;}

七、在同一元素上使用多种类

加粗的红色字体,使用了两种类

CSS代码:

.red {color: red;}

.bold {font-weight: bold;}

Html代码:

<p class="red bold">同一元素使用两种类</p>

八、隐藏水平滚动条

为了避免出现水平滚动条,在body里加入 overflow-x:hidden

body{overflow-x:hidden}

九、解决IE6 的浮动元素的双倍边距问题

对一个div设置了float:left margin-left:100px 那么在IE6中,这个bug就会出现。您只需要多设置一个display即可,代码如下:

div {float:left;margin:40px;display:inline;}

IE6下图片也会产生3像素的空白距离,也用到display

img{display:block}

十、简单的导航菜单

html5 css3 的新语义标签来写一下这段导航菜单代码

html代码:

<nav>

<ul>

<li><a href=http://www.divcss5.com/html/"http:/www.yangqq.com/" >网站首页</a></li>


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/seo/1693.html转载请标明出处,谢谢合作!
标签:
  • HTLM
  • 设置
  • 填充
  • е
  • 10
  • 边距都