云课堂考试计算机类内容页

HTMLCSS十条网页设计中实用的技巧

2021-04-25 19:25:02计算机类232

  HTMLCSS十条网页设计中实用的技巧

  web开发。不管是在工作还是在学习中,掌握一些实用的开发小技巧,你的效率都会大大提升哦!下面就来和小编一起看看HTMLCSS十条网页设计中实用的技巧吧。

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

  body,p,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;

  tableborder-collapse:collapse; border-spacing:0;

  img border:0;

  ol,ullist-style:none;

  pword-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-width、min-width 此声明。 */

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

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

  六、可以重复利用的规则

  .leftfloat: left;

  .rightfloat: right;

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

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

  CSS代码:

  .redcolor: red;

  .boldfont-weight: bold;

  Html代码:

  同一元素使用两种类

  八、隐藏水平滚动条

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

  bodyoverflow-x:hidden

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

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

  p float:left;margin:40px;display:inline;

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

  imgdisplay:block

  十、简单的导航菜单

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

  html代码:

  网站首页

  个人博客模板

  慢生活

  CSS代码:

  navulli display:inline;margin-right:10px;

  navulli a color:#000;display:block;float:left;padding:5px;

  navullia:hoverbackground:#eee;color:black;

  如果想选中的导航能高亮显示,可以加上一段js代码:

  varobj=null;

  varAs=document.getElementById'nav'.getElementsByTagName'a';

  obj=As[0];

  fori=1;i=0

  obj=As[i];

  obj.id='nav_current'

  提示:为了让js能够获取到菜单的id取值,所以应该给html中的nav标签添加一个id

  高亮显示的样式nav_current也应该在css中写上一段代码,比如:

  #nav_currentbackground:#eee;color:red;

再来一篇
上一篇:简洁网页设计注意事项 下一篇:超实用的网页设计应急小技巧
猜你喜欢