CSS网页设计中实用的技巧
网页设计不是请客吃饭,对必备技能的扎实掌控是你走向成功必由之路。下面小编来给大家分享CSS网页设计中实用的技巧,希望对大家有帮助!
一、将填充和边距都设置为零
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-width、min-width 此声明。 */
min-width: 780px; /* 最小宽度 */
margin: 0 auto; /* 如果将 #container 宽度设置为 100%,则不需要此设置。 */
}
六、可以重复利用的规则
{float: left;}
t {float: right;}
七、在同一元素上使用多种类
加粗的红色字体,使用了两种类
CSS代码:
{color: red;}
{font-weight: bold;}
Html代码:
同一元素使用两种类
八、隐藏水平滚动条
为了避免出现水平滚动条,在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代码:
网站首页
个人博客模板
慢生活
CSS代码:
nav ul li { display:inline;margin-right:10px;}
nav ul li a {color:#000;display:block;float:left;padding:5px;}
nav ul li a:hover {background:#eee;color:black;}
}
如果想选中的导航能高亮显示,可以加上一段js代码:
提示:为了让js能够获取到菜单的id取值,所以应该给html中的nav标签添加一个id
高亮显示的样式nav_current 也应该在css中写上一段代码,比如:
#nav_current{background:#eee;color:red;}
-
网页设计的布局
网页设计的工作目标,是通过使用更合理的颜色、字体、图片、样式进行页面设计美化,在功能限定的情况下,尽可能给予用户完美的视觉体验。以下是小编为您带来的网页设计的布局,看看吧!网页设计的布局11、响应式网页设计响应式网页设计是网页设计的一种技术,可在N多种浏...
-
wap和app手机网站的不同
手机功能的越来越强大,手机App的市场是越来越火爆,时代在更新随之而来的事物也在更新,不能更上时代的步伐是落后的表现,所以不仅仅是手机APP在完善,手机网站WAP也在不断的改进中,可是app和wap手机网站有什么不同呢?yjbys小编从五大方面分析app和wap手机网站的...
-
关于javascript使用isNaN()函数判断变量是否为数字
javascript中判断变量是否为数字的方法,这里主要介绍javascript里的isNaN()函数。功能:isNaN()函数用于检查其参数是否是非数字值。语法:isNaN(x)x必需。要检测的值。返回值:如果x是特殊的`非数字值NaN(或者能被转换为这样的值),返回的值就是true。如果x是其他值,则返...
-
JavaScript的课堂讲解
本文主要内容:1.分析函数的四种调用形式2.弄清楚函数中this的意义3.明确构造函对象的过程4.学会使用上下文调用函数一、函数调用形式函数调用形式是最常见的形式,也是最好理解的形式。所谓函数形式就是一般声明函数后直接调用即是。例如:复制代码代码如下://声明...