郑州网站建设-凯讯公司网站宣传口号图片
郑州网站建设-凯讯公司网站电话标志图片
0371-53778175
15333818157
当前位置:网站首页 >> 建站知识 >> 网站技术 >>


DIV+CSS网页制作技术的几个常用的技巧


【来源:郑州凯讯网站    发布人:郑州凯讯公司    发布日期:2014-12-26】

在郑州网站建设的网页编码中,DIV+CSS网页制作技术是非常常用的技术,熟练使用DIV+CSS技术对网页制作非常重要。在本网页中,郑州网站建设整理了一些关于DIV+CSS网页制作技术的几个常用的技巧及其实现的代码,可供网站建设相关技术人员在网页制作中参考使用。

一、网页制作中div内边距padding属性用法:
padding属性用于定义元素的填充属性.可以设置填充距离.可以直接输入数值定义填充距离,也可以设auto为自动距离。需要注意的是,在设置padding值后一定要将该DIV趁的原width和heignt值减去相应设置里的padding值。padding属性定义可以采用简写的形式。padding属性的简写在默认状态下需要提供4个参数值。按顺序分别为上、右、下、左。如果元素上和下填充的是相同的值,左和右填充的是相同的值,则可以使用两个参数值定义.分别表示上下和左右。

二、实现一个层固定在底部,随滚动条滚动:
<body scroll="no" style="margin:0px">
<div style="height:expression(document.body.clientHeight);overflow:auto;">
<div style="height:2000px">大页面</div>
</div>
<div style="height:100px;background-color:#AAAAAA;position:relative;top:-100px;z-index:-1">bottom</div>
</body>

三、如何使用font设定文字字体、颜色、大小:
font-style设定斜体,比如font-style: italic;
font-weight设定文字粗细,比如font-weight: bold;
font-size设定文字大小,比如font-size: 12px;(或者9pt,不同单位显示问题参考CSS手册)
line-height设定行距,比如line-height: 150%;
color设定文字颜色(注意不是font-color),比如color: red;
font-family设定字体,比如font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;(这是通用的写法)
以上都可以写在一行font属性里(除了color属性需要单独写):
font: italic bold 12px/150% "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;

四、如何使用margin,text-align控制段落排版:
中文段落使用margin标签,左右(相当于缩进)、段前段后的空白,比如:
p{
margin: 18px 6px 6px 18px; /*分别是上、右、下、左,十二点开始的顺时针方向*/
}

文字的对齐方式用text-align,比如:
p{
text-align: center; /*居中对齐*/
}

对齐方式还有left、right和justify(两端对齐)

五、给行内元素定义宽度:
行内常用的元素包括:<span>,<a>,strong>和<em>。块元素包括<div>,<p>,<h1>,<form>和<li> 。我们不能定义行内元素的宽度,为了解决这个问题你可以将行内元素转变为块元素。
span { width: 150px; display: block }

六、如何让固定宽度的页面居中
为了让页面在浏览器居中显示, 需要相对定位外层div, 然后把margin设置为auto。
#wrapper {
margin: auto;
position: relative;
}

七、如何隐藏水平滚动条:
为了避免出现水平滚动条, 在body里加入 overflow-x:hidden .
body { overflow-x: hidden; }当你决定使用一个比浏览器窗口大的图片或者flash时, 这个技巧将非常有用。

八、如何去掉网页设计中超链接的下划线:
未被点击时超链接文字无下划线,显示为蓝色;当鼠标在链接上时有下划线,链接文字显示为红色;当点击链接后,链接无下划
线,显示为绿色。
实现方法很简单,在源代码的和之间加上如下的CSS语法控制:
<style type="text/css">
<!--
a:link { text-decoration: none;color: blue}
a:active { text-decoration:blink}
a:hover { text-decoration:underline;color: red}
a:visited { text-decoration: none;color: green}
-->
</style>
其中:
a:link 指正常的未被访问过的链接;
a:active 指正在点的链接;
a:hover 指鼠标在链接上;
a:visited 指已经访问过的链接;
text-decoration是文字修饰效果的意思;
none参数表示超链接文字不显示下划线;
underline参数表示超链接的文字有下划线
同样,如果把none替换成overline,则给超链接文字加上划线,而换成line-through给超链接文字加上删除线,blink则使文字在闪烁。

本站优惠活动图片



业务联系方式图片


本页页脚banner图片

咨询热线:0371-53778175,15333818157    业务QQ:业务联系QQ图标1765879842   业务联系QQ图标2632505191   业务联系QQ图标2236519391

版权所有:郑州凯讯通信科技有限公司    备案号:豫ICP备11027744号-2