前端设计

网页设计技巧

word-wrap break-word使文本自动换行

在内容属性那里加上word-wrap: break-word; 如果右边留白太多的话,可以用word-break : break-all; 《使用word-wrap:break-word使文本自动换行》 文本框连续输入 数字”111111111111111111″或者 英文单词”adkjsakfjsalfkjsalkdjaslkfjsalkf” 会造成什么结果呢?—文字溢出,一般的处理方法是用overflow:hidden隐藏文字,有没有更好的解决文案呢?QA的童鞋要求自动换行. 用word-wrap:break-word即可 css手册上的解释 word-wrap 基本特性 兼容性: IE5.5+专有属性 基本语法 word-wrap : normal | break-word 语法取值 normal: 默认值。允许内 ...

Chrome强制显示最小字体为12px

要调整字体的时候发现,把字体调整为12px以下的时候,都显示的是12px,不会更低了。不管是设置成pt或者百分比为单位的字体大小都不管用。而在IE、Firefox、Opera、Safari下都是正常显示的。IE的话还可以用CSS HACK来解决,但是谷歌游览器就没有一点办法了。在网上找到了一个解决办法和例子,可以看看你有没有设置成功哦。 font-size:18px; font-size:17px; font-size:16px; font-size:15px; font-size:14px; font-size:13px; font-size:12px; font-size:11px; font-size:10px; font-size:9px; font-size:8px; font-size:7px; font-siz ...

关于ul下li内插入span标签自动换行不在同一行问题

前提, li span {float:right;} 如果这么写 小戴2009.05.23 这个日期就会窜到下一行去 而如果这样 2009.05.23小戴 日期和文字就会同行显示 问题出来了, 第一:这是为啥呢? 第二:如何给span定义属性让他能够在第一种html写法下不换行? 当初来看,比较诡异的现象 仔细分析一下,原来是这样 Span本身虽然是内联元素,但加上浮动后它就变成了块级元素了,所以才会自动换行, 浮动元素的顶端不能高于先于它出现的浮动元素或段落的顶端 看下面这个例子就清楚了: 测试 span#test{float:left; width:300px; height:200px ...

INDEX, NOINDEX, FOLLOW和 NOFOLLOW及优化和特点

INDEX, NOINDEX, FOLLOW和 NOFOLLOW及优化和特点 The Robots META tag放于后台HTML源代码的标头区(HEAD区)中。 我举一个例子: <HTML> <HEAD> <META NAME=”ROBOTS” CONTENT=”NOINDEX,NOFOLLOW”> <META NAME=”DESCRIPTION” CONTENT=”THIS PAGE ….”> <TITLE>…</TITLE> </HEAD> <BODY> … Robot Meta Tag选项: 在一个Robots Meta Tag 中可使用的指令有四个:INDEX, NOINDEX, FOLLOW和 NOFOLLOW,以“,”分隔。其中: ...

并排的两个div自适应高度

早就听说布局很麻烦,天天听他们吆喝“定不住啦”“跑啦……”之类的。今天也实验了一小把,也没那么困难吧,嘿嘿。只是最后这个“并排的两个div自适应高度”有点难搞,无奈求助于无敌的搜索引擎,解决之……

网上应该还有很多办法,听说的有纯CSS方法、js实现div自适应高度。可是我没一个试验成功的。想来应该是可以的,高手快现身赐教吧- -!嘿嘿

用于显示隐藏内容的demo

准备做一个小静态网站,其中要做一个答题的功能,类似于英语的完形填空,点显示答案按钮以后,可以显示答案在上面,由于还没学过javascript,这个小功能也得请教同学啦。展示如下: ————–代码————– var hiddenOrShow = 0; function clickMe() { var div = document.getElementById('answerDiv'); var button=document.getElementById('aButton'); if (hiddenOrShow % 2 == 0) { div.style.display = "block"; button.setAttribute("value", "Hi ...

网页加载进度显示功能

首先要给网页加上进度条的代码。如 aw 所言,进度条的位置很重要。如果你的 <head> 部分要加载的东西太多,导致网页迟迟显示不出来,那进度条也没必要加了。用户可能等不及进度条显示出来就关闭页面了。针对这个问题,我作了手动的优化,让自己的页面在 <head> 部分只加载 CSS 和 favicon,至于 javascript 统统挪到后面。这样打开网页的时候就能迅速地显示出进度条,起到提示的作用。

HTML 代码我加在 <body> 的后面了,内容如下,这个“载入中”的提示也可以用 Javascript 输出(有利于SEO)

<div id=”progressbar”>
<span id=”progressdone”></span>
<span id=”progressing”></span>
<span id=”progresstip”>载入中&hellip;</span>
</div>