收藏
批改状态：合格
老师批语：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>QQ在线布局</title>
</head>
<style type="text/css">
body {
/*清除body默认外边距，将body高设置成2000来测试固定定位功能。*/
margin: 0;
height: 2000px
}
a {
/*清除文字的默认样式，给文字增加颜色*/
text-decoration: none;
color: blue;
}
.qq {
/*设置QQ的所占的大小*/
width: 100px;
height: 200px;
/*设置QQ框的边框为实线，2像素宽，颜色*/
border: lightcoral 2px solid;
/*设置边框圆角*/
border-radius: 2%;
/*设置固定定位*/
position: fixed;
/*固定定位离底部200像素*/
bottom: 200px;
/*固定定位离边中20像素*/
right: 20px;
}
.qq ul {
/*清除ul默认样式*/
list-style: none;
padding: 0;
margin: 0;
}
.qq ul img {
/*设置QQ图标的图片宽度等比例*/
width: 30px;
margin-right: 5px;
/*设置图片垂直居中对齐*/
vertical-align: text-bottom;
}
.qq ul li:first-child {
/*利用选择器，选择第一个元素，设置颜色，文本居中*/
background-color: lightblue;
text-align: center;
设置内边距上下为5像素，左右为0
padding: 5px 0px;
/*设置第一个元素外边框为0*/
margin: 0;
/*设置第一个元素边框为无*/
border: none;
}
.qq ul li {
/*设置li元素外边框上下为3像素，左右为0*/
margin: 3px 0px;
/*设置Li元素下边框为虚线，2像素，颜色*/
border-bottom: lightcoral 2px dashed;
/*设置li内边距底部为3像素*/
padding-bottom: 3px;
}
.qq ul li a {
/*设置a标签文字居中，垂直居中*/
text-align: center;
line-height: 100%;
}
</style>
<body>
<div class="qq">
<ul>
<li>在线咨询</li>
<li><img src="https://img.php.cn//upload/image/193/851/105/1534521039592984.jpg"><a href="http://www.php.cn">售前</a></li>
<li><img src="https://img.php.cn//upload/image/193/851/105/1534521039592984.jpg"><a href="http://www.php.cn">售前</a></li>
<li><img src="https://img.php.cn//upload/image/193/851/105/1534521039592984.jpg"><a href="http://www.php.cn">售后</a></li>
<li><img src="https://img.php.cn//upload/image/193/851/105/1534521039592984.jpg"><a href="http://www.php.cn">技术</a></li>
</ul>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
1、向老师请教一下，有这么两个问题，为什么我的QQ在线图片与后面文字没有法对齐，总有一点文字要下一点，图片要上一点，这个是怎么回事，请老师帮回答一下。
2、固定定位CSS用position: fixed;来定位，设置底部与右边对齐多少，可以用百分比或者像素。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
