网页设计排版技巧

1.网页设计中文字排版的技巧和细节。

1.字体大小与行距：将文字的字号设置为14px或者更大的16px会更加合理。一般文字的行距设置为1.5em或者1.7em之间比较好，最好不要高于2em。

 

2.段落间距：通过修改p标签的margin属性或者padding属性来修改段落间距，相比较而言，段落间距占一行文字的距离是比较合理的，所以通常设置段落间距为1em。eg：p { padding:0.5em 0 0.5em 0; }

2.解决ie10下鼠标点击页面的a标签出现矩形的虚线框的问题：

1.<a href="#" hidefocus="true" title="XX">没有虚线框</a> //添加hidefocus 属性。 2. 添加a:focus { outline:none; } 样式

3.实现placeholder改变颜色的css样式。

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #999;
}
4.修改checkbox的大小：
<input type="checkbox" name="check2" style="zoom: 150%;margin-right:8px;">

5.使用fontawesome 字体时，若只用到几个图标不想添加全部的css。

@font-face {
  font-family: 'FontAwesome';
  src: url('../font/fontawesome-webfont.eot?v=3.2.1');
  src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
  font-weight: normal;
  font-style: normal;
}
 [class^="icon-"], [class*=" icon-"] {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
display: inline;
width: auto;
height: auto;
line-height: normal;
vertical-align: baseline;
background-image: none;
background-position: 0 0;
background-repeat: repeat;
margin-top: 0;
}

.icon-thumbs-up:before {

content: "\f087";
}

.icon-star:before { content: "\f005"; }
 .icon-tablet:before { content: "\f10a"; } //.icon-tablet .只需添加需要的图标的content内容。

6.

<a href="#"><img src="images/1.jpg" width="100%"></a>  //使图片自适应屏幕宽度。

想让高度自适应全屏高度，设置height：100%；

 

7.做出来的1920像素的大图片想在1366像素的小屏幕上显示，对应的css代码：    

<div class="pic-bg" id="page_04">
    <div class="pic-cover" id="pic_04">
        
        </div>
</div>


.pic-bg {
position: relative;
min-width: 960px;
width: 100%;
height: 100%;
overflow: hidden;
top: 100px;
margin-top: -6px;
left: 0;
}
.pic-bg #pic_04 {
width: 1914px;
height: 920px;
overflow: hidden;
background: url(../images/home/page_05.png);
}
.pic-bg .pic-cover {
position: relative;
display: inline-block;
margin: 0 auto;
clear: both;
left: 50%;                          //这一句及下一句最关键。使其居中显示
margin-left:-960px;
)