0371-53778175
15333818157
15333818157
在郑州网站建设的网页编码中，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则使文字在闪烁。
1765879842 2632505191 2236519391
