html排版，样式

<style>

.box{

width: 600px;

height: 800px;

background-color: rgb(235, 233, 233);

}

.title{

width: 580px;

height: 50px;

line-height: 50px;

text-align: center;

background-color: #fff;

border: 10px solid rgb(235, 233, 233);

}

.content{

width: 578px;

background-color: red;

margin-left: 10px;

padding: 1px;

display: flex;

}

.content .cavs{

width: 100px;

height: 100px;

background-color: #fff;

margin: 10px;

}

.menu{

width: 570px;

background-color: #fff;

border: 10px solid rgb(235, 233, 233);

padding: 5px;

}

.menu ul{

margin:0 15px;

list-style-type:none;

padding-left:0px

}

.menu ul li{

line-height: 38px;

border-bottom: 1px solid #ccc;

}

.ptot{

width: 580px;

background-color: yellow;

border: 10px solid rgb(235, 233, 233);

}

.ptot dl{

display: flex;

}

.ptot dl dt{

width: 80px;

background-color: violet;

margin-left: 10px;

text-align: center;

line-height: 90px;

}

</style>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<div class="title">这是一个标题，需要居中</div>

<p class="cavs d">解决margin-top失效1父元素设padding</p>

<p class="cavs b">2父元素或自身display:

inline-block</p>

<p class="cavs c">3父元素overflow:

hidden</p>

<p class="cavs c">4父元素设border</p>

</div>

<ul>

<li>每天一条新闻联播</li>

<li>带来精彩内容不断</li>

<li>每天一条新闻联播</li>

<li>每天都是新的一天</li>

<li>每天一条新闻联播</li>

<li>人生没有彩排，每天都是现场直播</li>

</ul>

</div>

<dl>

<dt>

照片

</dt>

<dd>

<p>介绍：她是一个活泼爱动的小女孩，可爱又善良。</p>

</dd>

</dl>

</div>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

常见的问题：

1.margin-top失效

解决方法：
1、设置父元素或者自身的display:inline-block;
2、设置父元素的border:1px solid red; 如果不想要border显示的话，可以设置border:1px solid transprent;这样边框就是隐藏起来。
3、设置父元素的padding:1px;
4、给父元素设置overflow:hidden;
5、给父元素或者自身设置position:absolute;
6、设置父元素非空，填充一定的内容。

2.ul li 清除缩进和项目符

解决方法：

1、清除项目符和缩进：ul {list-style: none; padding-left:0px;}
2、清除缩进 ul {margin:7;list-style-type:disc;}
3、清除缩进 ul {margin-left:20px}
4、清除缩进 ul {margin-left: -24px;}

二、更换项目符漂亮小图标
下面有3种实现方法：
1、简单方法
ul{list-style-image:url(/images/icon.gif);}
这种方法不同的浏览器的显示效果会有一些差异，主要是在图片的垂直位置上。有些浏览器会使图片和列表项文本的中部位置平齐，有的又会显示得高一些，总之就是有些不一致。
2、复杂方法
ul {list-style:none;}
li{background: url(/images/icon.gif) no-repeat 0px 50%; padding-left:17px;}
可以解决上面的浏览器不兼容的问题。首先，清除默认的项目符号，然后加上我们自己的背景图片。no-repeat告诉浏览器不要平铺这张图片，0px 50%告诉背景图片应该位于距左侧0px 且竖直方向位于顶部往下50%处，实际上就是在竖直方向居中。我们在左侧加上了17px的边距，这样那些15px宽5像素高的小图标就能完全显露出来，不会被文本遮挡，并且和文本之间有一点间隔。
3、常规方法
li {background: url(/images/icon.gif) no-repeat 0px 50%; padding-left:17px;}

巴特西

html排版，样式

最新文章

热门文章